Pencil MCP로 새 화면(Desktop 1440x900 + Mobile 390x844)을 디자인합니다. 프레임 생성, 컴포넌트 배치, 스크린샷 검증까지 전체 워크플로우를 안내합니다. "새 화면 디자인", "스크린 추가", "화면 만들어줘", "Desktop+Mobile 디자인", "Pencil 새 화면" 요청에 트리거됩니다. .pen 파일에 새 페이지를 추가하고 싶다면 이 스킬을 사용하세요. 기존 화면 수정은 pencil-update를 사용합니다.
Pencil MCP 도구를 사용하여 .pen 파일에 새 화면을 디자인한다. 항상 Desktop(1440x900) + Mobile(390x844) 쌍으로 생성한다.
Pencil MCP의 batch_design은 한 번에 최대 25개 operation만 처리할 수 있어, 복잡한 화면은 여러 번 나눠 호출해야 합니다. placeholder 모드를 설정하지 않으면 중간 상태가 렌더링되어 레이아웃이 깨질 수 있습니다. 이 워크플로우는 프레임 생성→placeholder 설정→컴포넌트 배치→검증→해제 순서로 안전하게 진행합니다.
get_editor_state(include_schema: false)
get_style_guide_tags()
get_style_guide(tags: [...관련_태그])
batch_get(nodeIds: [사용할_컴포넌트_ID], readDepth: 3)
find_empty_space_on_canvas(direction: "below", width: 1980, height: 900)
batch_design([
desktop=I(document, {type: "frame", width: 1440, height: 900, placeholder: true, name: "화면명 - Desktop", fill: "#FAF8F5", x: ..., y: ...}),
mobile=I(document, {type: "frame", width: 390, height: 844, placeholder: true, name: "화면명 - Mobile", fill: "#FAF8F5", layout: "vertical", x: ..., y: ...})
])
placeholder: true 필수layout: "vertical" 기본#FAF8F5 설정get_screenshot(nodeId: desktop_id)
get_screenshot(nodeId: mobile_id)
placeholder: false 해제batch_design([
U(desktop_id, {placeholder: false}),
U(mobile_id, {placeholder: false})
])
| 입력 | 출력 |
|---|---|
| 화면 이름, 요구사항 | Desktop + Mobile 프레임 쌍 |
| 사용할 컴포넌트 지정 | .pen 파일에 새 화면 추가 |
프로젝트별 컴포넌트 ID와 디자인 토큰은 Read 도구로 references/components.md를 읽어서 참조하세요.
pencil-update: 기존 화면 수정pencil-to-code: 디자인을 코드로 변환