pencil-design

pencil-design is a skill for designing production-quality UIs in Pencil (.pen files) and generating clean, maintainable code from them. It solves the problem of inconsistent, hard-to-maintain designs and poor generated code by enforcing best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows. It applies when designing screens or components in a .pen file, generating code (React, Next.js, Vue, Svelte, HTML/CSS) from Pencil designs, building or extending a design system, syncing design tokens between Pencil and code (Tailwind v4 @theme, shadcn/ui tokens), importing existing code into Pencil, or working with any Pencil MCP tools.

The skill defines six critical rules to prevent common agent mistakes. Rule 1: always reuse design system components by calling pencil_batch_get with patterns [{ reusable: true }], inserting matches as ref instances via I(parent, { type: "ref", ref: "<componentId>" }) and customizing descendants with U(). Rule 2: always use variables instead of hardcoded values by reading pencil_get_variables and using semantic Tailwind v4 utilities (bg-primary, rounded-md) rather than arbitrary value syntax. Rule 3: prevent text and content overflow, constraining widths to parent bounds (mobile typically 375px), using fill_container, and checking pencil_snapshot_layout with problemsOnly: true. Rule 4: visually verify every section with pencil_get_screenshot and layout snapshots. Rule 5: reuse existing assets such as logos and icons, copying with the C() operation rather than regenerating with G(). Rule 6: always load the frontend-design skill first for aesthetic direction. A documented workflow chains tools like pencil_get_editor_state, pencil_get_guidelines, pencil_find_empty_space_on_canvas, and pencil_batch_design, building section by section (plan, build, verify, fix, proceed).

It targets designers and developers using Pencil and its MCP tools who want distinctive, consistent UIs and high-quality generated code. Reference files cover design-system components, variables and tokens, layout and text overflow, responsive breakpoints, visual verification, asset reuse, the design-to-code workflow, and a Tailwind-shadcn mapping. A stated requirement is loading the frontend-design skill at the start of any Pencil design or code generation task to avoid generic AI aesthetics.