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.
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.
.pen file@theme, shadcn/ui tokens)pencil_batch_design, pencil_batch_get, etc.)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.
Before inserting any element, you MUST:
pencil_batch_get with patterns: [{ reusable: true }] to list all available reusable componentsref instance using I(parent, { type: "ref", ref: "<componentId>" })U(instanceId + "/childId", { ... })See references/design-system-components.md for detailed workflow.
NEVER hardcode colors, border radius, spacing, or typography values when variables exist.
Before applying any style value, you MUST:
pencil_get_variables to read all defined design tokensprimary not #3b82f6, use radius-md not 6)bg-primary, text-foreground, rounded-md). NEVER use arbitrary value syntax (bg-[#3b82f6], text-[var(--primary)], rounded-[6px])See references/variables-and-tokens.md for detailed workflow.
NEVER allow text or child elements to overflow their parent or the artboard.
For every text element and container:
"fill_container" for width on text elements inside auto-layout framespencil_snapshot_layout with problemsOnly: true to detect clipping/overflowSee references/layout-and-text-overflow.md for detailed workflow.
NEVER skip visual verification after building a section or screen.
After completing each logical section (header, hero, sidebar, form, card grid, etc.):
pencil_get_screenshot on the section or full screen nodepencil_snapshot_layout with problemsOnly: true to catch clipping and overlapSee references/visual-verification.md for detailed workflow.
NEVER generate a new logo or duplicate asset when one already exists in the document.
Before generating any image or logo:
pencil_batch_get and search for existing image/logo nodes by name pattern (e.g., patterns: [{ name: "logo|brand|icon" }])C() (Copy) operationG() (Generate) operation for genuinely new images that don't exist anywhere in the documentSee references/asset-reuse.md for detailed workflow.
frontend-design SkillNEVER design in Pencil or generate code from Pencil without first loading the frontend-design skill.
The frontend-design skill provides the aesthetic direction and design quality standards that prevent generic, cookie-cutter UI. You MUST:
frontend-design skill at the start of any Pencil design or code generation taskThis applies to both directions:
0. Load `frontend-design` skill -> Get aesthetic direction and design quality standards
1. pencil_get_editor_state -> Understand file state, get schema
2. pencil_batch_get (reusable) -> Discover design system components
3. pencil_get_variables -> Read design tokens
4. pencil_get_guidelines -> Get relevant design rules
5. pencil_get_style_guide_tags -> (optional) Get style inspiration
6. pencil_get_style_guide -> (optional) Apply style direction
7. pencil_find_empty_space_on_canvas -> Find space for new screen
8. pencil_batch_design -> Build the design (section by section)
9. pencil_get_screenshot -> Verify each section visually
10. pencil_snapshot_layout -> Check for layout problems
For each section of a screen (header, content area, footer, sidebar, etc.):
ref instances, apply variables for stylesSee references/design-to-code-workflow.md for the complete workflow. See references/tailwind-shadcn-mapping.md for the full Pencil-to-Tailwind mapping table. See references/responsive-breakpoints.md for multi-artboard responsive code generation.
Summary:
frontend-design skill for aesthetic directionpencil_get_guidelines with topic "code" and "tailwind"pencil_get_variables to map design tokens to Tailwind @theme declarationspencil_batch_getbg-primary, rounded-md), never arbitrary valuesfrontend-design guidelines: distinctive typography, intentional color, motion, spatial compositioncn() for class merging, Lucide for icons| Tool | When to Use |
|---|---|
pencil_get_editor_state | First call - understand file state and get .pen schema |
pencil_batch_get | Read nodes, search for components (reusable: true), inspect structure |
pencil_batch_design | Insert, copy, update, replace, move, delete elements; generate images |
pencil_get_variables | Read design tokens (colors, radius, spacing, fonts) |
pencil_set_variables | Create or update design tokens |
pencil_get_screenshot | Visual verification of any node |
pencil_snapshot_layout | Detect clipping, overflow, overlapping elements |
pencil_get_guidelines | Get design rules for: code, table, tailwind, landing-page, design-system |
pencil_find_empty_space_on_canvas | Find space for new screens/frames |
pencil_get_style_guide_tags | Browse available style directions |
pencil_get_style_guide | Get specific style inspiration |
pencil_search_all_unique_properties | Audit property values across the document |
pencil_replace_all_matching_properties | Bulk update properties (e.g., swap colors) |
pencil_open_document | Open a .pen file or create a new document |
| Mistake | Correct Approach |
|---|---|
| Creating a button from scratch | Search for existing button component, insert as ref |
Using fill: "#3b82f6" | Use the variable: reference primary or the corresponding variable |
Using cornerRadius: 8 | Use the variable: reference radius-md or the corresponding variable |
Generating bg-[#3b82f6] in code | Use semantic Tailwind class: bg-primary |
Generating text-[var(--primary)] in code | Use semantic Tailwind class: text-primary |
Generating rounded-[6px] in code | Use semantic Tailwind class: rounded-md |
Using var(--primary) in className | Use semantic Tailwind class: bg-primary or text-primary |
| Not checking for overflow | Call pencil_snapshot_layout(problemsOnly: true) after every section |
| Skipping screenshots | Call pencil_get_screenshot after every section |
| Generating a new logo | Copy existing logo from another artboard with C() |
| Building entire screen, then checking | Build and verify section by section |
Ignoring pencil_get_guidelines | Always call it for the relevant topic before starting |
Using tailwind.config.ts | Use CSS @theme block (Tailwind v4) |
| Using Material Icons in code | Map to Lucide icons (<Search />, <ArrowRight />, etc.) |
Skipping frontend-design skill | Always load it before designing in Pencil or generating code |
| Generic AI aesthetics (Inter font, purple gradients) | Follow frontend-design guidelines for distinctive, intentional design |