pencil-design
CommunityDesign UIs in Pencil; auto-generate code.
Authorchiroro-jr
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Enables AI agents to design production-quality UIs in Pencil (.pen files) and generate clean, maintainable code from Pencil designs, bridging design and code workflows between design tooling and frontend development.
Core Features & Use Cases
- Reuse design system components by inserting reusable
refinstances to ensure consistency across screens. - Enforce design tokens and semantic Tailwind utilities to support theming, consistency, and faster iteration.
- Generate production-ready React/Next.js + Tailwind v4 + shadcn/ui code from Pencil designs, with visual verification and layout checks.
- Use Pencil MCP tools to accelerate design-to-code workflows, token syncing, and import/export of design data.
Quick Start
Design a Pencil UI and generate production-ready code from your .pen design.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: pencil-design Download link: https://github.com/chiroro-jr/pencil-design-skill/archive/main.zip#pencil-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.