pencil-design
✓Pencil(.pen 파일)에서 UI를 디자인하고 이를 통해 프로덕션 코드를 생성합니다. .pen 파일로 작업하거나, Pencil에서 화면이나 구성 요소를 디자인하거나, Pencil 디자인에서 코드를 생성할 때 사용하세요. Pencil, .pen 파일, 디자인-코드 워크플로우 또는 Pencil MCP 도구를 사용한 UI 디자인과 관련된 작업을 트리거합니다.
SKILL.md
Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows.
These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.
NEVER recreate a component from scratch when one already exists in the design file.
Pencil(.pen 파일)에서 UI를 디자인하고 이를 통해 프로덕션 코드를 생성합니다. .pen 파일로 작업하거나, Pencil에서 화면이나 구성 요소를 디자인하거나, Pencil 디자인에서 코드를 생성할 때 사용하세요. Pencil, .pen 파일, 디자인-코드 워크플로우 또는 Pencil MCP 도구를 사용한 UI 디자인과 관련된 작업을 트리거합니다. 출처: chiroro-jr/pencil-design-skill.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-11
- 업데이트
- 2026-02-18
빠른 답변
pencil-design이란?
Pencil(.pen 파일)에서 UI를 디자인하고 이를 통해 프로덕션 코드를 생성합니다. .pen 파일로 작업하거나, Pencil에서 화면이나 구성 요소를 디자인하거나, Pencil 디자인에서 코드를 생성할 때 사용하세요. Pencil, .pen 파일, 디자인-코드 워크플로우 또는 Pencil MCP 도구를 사용한 UI 디자인과 관련된 작업을 트리거합니다. 출처: chiroro-jr/pencil-design-skill.
pencil-design 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/chiroro-jr/pencil-design-skill
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-11