Design to Code
Installation
SKILL.md
Design to Code
Pencil .pen 파일의 디자인을 React + Tailwind CSS 코드로 변환하는 가이드라인을 제공한다.
Conversion Workflow
1. 디자인 분석
대상 노드의 구조를 파악한다:
mcp__pencil__batch_get(
filePath: "design.pen",
nodeIds: ["targetNodeId"],
readDepth: 5,
resolveInstances: true,
resolveVariables: true
)
Related skills
More from gyejoon/pencil-plugin
pencil basics
This skill should be used when the user asks about "pencil 사용법", ".pen 파일", "노드 타입", "레이아웃 시스템", "pencil mcp", "batch_design", "batch_get", or wants to understand how to work with Pencil design files. Provides comprehensive guidance for using Pencil MCP tools effectively.
43design system patterns
This skill should be used when the user asks about "디자인 시스템", "변수", "테마", "컬러 팔레트", "타이포그래피 스케일", "스페이싱 시스템", "컴포넌트 라이브러리", or wants to create or manage design system components and tokens in Pencil.
29