Pencil 가이드

# Pencil 앱이 실행 중인지 확인
# Pencil이 실행 중이면 MCP 서버가 자동으로 시작됩니다

{
  "permissions": {
    "allow": [
      "mcp__pencil__*"
    ]
  }
}

# Claude Code에서 실행
> Pencil로 로그인 버튼을 생성해줘

// 버튼 컴포넌트 DNA 코드
component Button {
  variant: primary
  size: medium
  content: "클릭하세요"
  onClick: handleSubmit
}

// 로그인 폼 레이아웃
layout LoginForm {
  direction: column
  spacing: 16
  children: [
    Input {
      placeholder: "이메일"
      type: email
    }
    Input {
      placeholder: "비밀번호"
      type: password
    }
    Button {
      variant: primary
      content: "로그인"
    }
  ]
}

// 토큰 참조
color: primary.500
spacing: md
radius: lg

// 토큰 정의
tokens {
  primary.500 = #3B82F6
  md = 16px
  lg = 8px
}

# Phase 1: 텍스트 프롬프트로 디자인 요청
> 제품 카드를 만들어줘. 상단에 제품 이미지, 중간에 제목과 가격,
# 하단에 장바구니 버튼. 깔끔한 미니멀 스타일로
 
# Phase 2: Pencil이 DNA 코드 생성
# → component ProductCard { ... }
 
# Phase 3: .pen 파일로 렌더링
# → open_document 후 batch_design으로 생성

// pencil.config.js
module.exports = {
  framework: 'react',
  styling: 'tailwind',
  output: './src/components/generated',
  options: {
    typescript: true,
    responsive: true,
    accessibility: true
  }
};

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary';
  size?: 'small' | 'medium' | 'large';
  isLoading?: boolean;
}
 
export const Button = ({ variant = 'primary', size = 'medium', isLoading, children, ...props }: ButtonProps) => {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors';
 
  const variantStyles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    tertiary: 'bg-transparent text-gray-700 hover:bg-gray-100'
  };
 
  const sizeStyles = {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  };
 
  return (
    <button className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]}`} {...props}>
      {isLoading ? '로딩 중...' : children}
    </button>
  );
};

[컴포넌트 유형]을 생성해줘.
[컴포넌트 목록] 포함.
[레이아웃]으로 배치.
[스타일] 적용.
[반응형] 고려.

# 대시보드 생성
"사이드바와 메인 콘텐츠 영역이 있는 대시보드를 만들어줘"
 
# 가격표 생성
"3단계 가격표를 만들어줘. 기본, 프로, 엔터프라이즈"
 
# 히어로 섹션
"제목과 CTA 버튼이 있는 히어로 섹션을 추가해줘"

# 색상 변경
"모든 기본 버튼을 파란색으로 변경해줘"
 
# 크기 조정
"사이드바를 더 좁게 만들어줘"
 
# 간격 추가
"이 요소들 사이에 간격을 추가해줘"

# 버튼 컴포넌트
"변형이 있는 버튼 컴포넌트를 만들어줘"
 
# 색상 팔레트
"#3b82f6을 기반으로 색상 팔레트를 생성해줘"
 
# 타이포그래피
"타이포그래피 스케일을 만들어줘"

# React 코드
"이 컴포넌트에 대한 React 코드를 생성해줘"
 
# 가져오기
"내 코드베이스에서 Header를 가져와줘"
 
# Tailwind 설정
"이 변수들로부터 Tailwind 설정을 만들어줘"

# Codex CLI에서
> design.pen에 버튼 컴포넌트를 만들어줘
> 랜딩 페이지에 히어로 섹션을 추가해줘
> 파란색을 기반으로 색상 구성표를 생성해줘

# 특정 디자인 시스템 따르기
"Material Design 원칙을 사용하여 대시보드를 만들어줘"
 
"현대적인 미니멀 미학으로 랜딩 페이지를 디자인해줘"
 
"design-system.pen의 디자인 시스템을 따르는 컴포넌트를 만들어줘"

# 버튼 변형
"이 버튼 컴포넌트의 5가지 변형을 만들어줘"
 
# 완전한 양식
"모든 입력 유형이 있는 완전한 양식을 생성해줘"
 
# 전체 랜딩 페이지
"히어로, 기능, 가격, 푸터가 있는 전체 랜딩 페이지를 디자인해줘"

# 색상 변수
"모든 버튼이 기본 색상 변수를 사용하도록 해줘"
 
# 타이포그래피
"모든 제목이 타이포그래피 스케일을 사용하도록 업데이트해줘"
 
# 간격
"모든 요소에 8px 간격 그리드를 적용해줘"

# 버튼 컴포넌트
"모든 변형이 있는 완전한 버튼 컴포넌트를 만들어줘"
 
# 양식 입력
"양식 입력 컴포넌트 (텍스트, 선택, 체크박스, 라디오)를 생성해줘"
 
# 카드 컴포넌트
"이미지, 제목, 설명, 작업이 있는 카드 컴포넌트를 만들어줘"

# 컴포넌트 재현
"src/components의 모든 컴포넌트를 Pencil에서 재현해줘"
 
# 디자인 시스템 가져오기
"Tailwind 설정에서 디자인 시스템을 가져와줘"
 
# 코드베이스 분석
"코드베이스를 분석하고 일치하는 디자인을 만들어줘"

# React 컴포넌트
"모든 React 컴포넌트를 Pencil 디자인과 일치하도록 업데이트해줘"
 
# 색상 구성표
"새 색상 구성표를 디자인과 코드에 모두 적용해줘"
 
# 변수 동기화
"CSS와 Pencil 간에 타이포그래피 변수를 동기화해줘"

# 1. Pencil과 Claude Code 시작
claude
# 2. IDE에서 design.pen 열기
# 3. Cmd + K를 누르고 디자인 시작
 
사용자: "현대적인 랜딩 페이지 히어로 섹션을 만들어줘"
AI: [제목, 부제, CTA 버튼으로 히어로 생성]
 
사용자: "3열로 된 기능 섹션을 추가해줘"
AI: [히어로 아래에 기능 섹션 추가]
 
사용자: "CTA 버튼이 기본 색상 변수를 사용하도록 해줘"
AI: [버튼을 색상 변수 사용으로 업데이트]
 
사용자: "이 전체 페이지에 대한 React 코드를 생성해줘"
AI: [Tailwind CSS가 있는 React 컴포넌트로 내보내기]
 
# 4. 검토 및 수정
# 5. Git에 커밋
git add design.pen src/pages/landing.tsx
git commit -m "랜딩 페이지 디자인 및 구현 추가"

# MoAI가 Pencil을 사용하여 UI 생성
> /moai run --team
# team-designer 에이전트가 Pencil MCP를 사용하여 디자인 생성