design to code
✓이 스킬은 사용자가 "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드"를 요청하거나, Pencil 디자인을 React + Tailwind CSS 코드로 변환하고 싶을 때 사용해야 합니다.
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 | 컴포넌트별 |
이 스킬은 사용자가 "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드"를 요청하거나, Pencil 디자인을 React + Tailwind CSS 코드로 변환하고 싶을 때 사용해야 합니다. 출처: gyejoon/pencil-plugin.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
design to code이란?
이 스킬은 사용자가 "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드"를 요청하거나, Pencil 디자인을 React + Tailwind CSS 코드로 변환하고 싶을 때 사용해야 합니다. 출처: gyejoon/pencil-plugin.
design to code 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/gyejoon/pencil-plugin