Pencil Design
A disciplined approach to Pencil design workflows that enforces the habits most AI agents skip. It mandates design system reuse, variable usage over hardcoded values, overflow prevention, and visual verification after every section. The critical rules target common mistakes: recreating components that already exist, hardcoding colors instead of using tokens, letting text overflow on mobile, and skipping screenshot verification. When generating code from Pencil designs, it maps directly to Tailwind v4 semantic classes and requires loading the frontend-design skill for aesthetic direction. If you're working with .pen files or building design-to-code pipelines, this keeps both the designs and generated code maintainable instead of producing throwaway prototypes.
- skills.sh installs
- 1.8K
- GitHub stars
- 19
- last updated
- Jul 14, 2026
Install
$ npx -y skills add chiroro-jr/pencil-design-skill --skill pencil-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Pencil Design Skill
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.
When to Use This Skill
- Designing screens, pages, or components in a
.penfile - Generating code (React, Next.js, Vue, Svelte, HTML/CSS) from Pencil designs
- Building or extending a design system in Pencil
- Syncing design tokens between Pencil and code (Tailwind v4
@theme, shadcn/ui tokens) - Importing existing code into Pencil designs
- Working with any Pencil MCP tools (
pencil_batch_design,pencil_batch_get, etc.)
Critical Rules
These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.
Rule 1: Always Reuse Design System Components
NEVER recreate a component from scratch when one already exists in the design file.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/chiroro-jr/pencil-design-skill
- Category
- Design & UI/UX
Recommended
More Design & UI/UX
frontend-designam-will/codex-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat1.4Kskills.sh installs
qiaomu-mondo-poster-designjoeseesun/qiaomu-mondo-poster-design一句话生成大师级海报、书籍封面、专辑封面和各类设计作品。无需懂PS、配色或艺术史，AI自动选择最佳风格（基于33+位传奇设计师）。支持多平台多比例：公众号封面(21:9)、小红书配图(3:4)、文章配图(16:9)、书籍封面(9:16)、专辑封面(1:1)、电影海报(9:16)。包含AI提示词优化、风格对比、图生图转换1.4Kskills.sh installs