design to code
✓This skill should be used when the user asks to "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", or wants to convert Pencil designs into React + Tailwind CSS code.
Installation
SKILL.md
Pencil .pen 파일의 디자인을 React + Tailwind CSS 코드로 변환하는 가이드라인을 제공한다.
resolveInstances: true로 컴포넌트 인스턴스를 풀어서 확인하고, resolveVariables: true로 변수값을 실제 값으로 확인한다.
| frame (layout: vertical) | | flex flex-col | | frame (layout: horizontal) | | flex flex-row | | frame (layout: grid) | | grid grid-cols-N | | text | , , | text-, font- | | rectangle | | rounded-, bg- | | ref (Button) | or | 컴포넌트별 |
This skill should be used when the user asks to "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", or wants to convert Pencil designs into React + Tailwind CSS code. Source: gyejoon/pencil-plugin.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code- Source
- gyejoon/pencil-plugin
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is design to code?
This skill should be used when the user asks to "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", or wants to convert Pencil designs into React + Tailwind CSS code. Source: gyejoon/pencil-plugin.
How do I install design to code?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/gyejoon/pencil-plugin
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01