pencil-design
✓Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
Installation
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.
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools. Source: chiroro-jr/pencil-design-skill.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-11
- Updated
- 2026-02-18
Quick answers
What is pencil-design?
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools. Source: chiroro-jr/pencil-design-skill.
How do I install pencil-design?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design 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/chiroro-jr/pencil-design-skill
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-11