pencil-design
Installation
Summary
Design production UIs in Pencil and generate clean code from design files.
- Enforces design system reuse, variable-driven styling, and layout correctness to prevent inconsistent, unmaintainable designs
- Supports design-to-code workflows for React, Next.js, Vue, Svelte, and HTML/CSS with Tailwind v4 semantic classes and shadcn/ui component mapping
- Requires visual verification after each section via screenshots and layout snapshots to catch overflow, alignment, and spacing issues before proceeding
- Must load the
frontend-designskill alongside Pencil work to ensure distinctive aesthetics and avoid generic AI design patterns - Provides 12+ MCP tools for reading/writing design tokens, managing components, generating images, and auditing properties across documents
SKILL.md
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.