back
loading skill details...
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…
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 .pen file 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
don't have the plugin yet? install it then click "run inline in claude" again.