Pencil Design

What it does

The Pencil Design skill enables AI agents to design user interfaces (UIs) in Pencil and generate corresponding code from those designs. It focuses on producing high-quality UIs while adhering to best practices for design system reuse, variable usage, layout correctness, visual verification, and ensuring a smooth design-to-code workflow. The generated code supports React, Next.js, Vue, Svelte, and HTML/CSS.

When to use it

• Designing screens, pages, or components within Pencil files (.pen).
• Generating code (React, Next.js, Vue, Svelte, HTML/CSS) from existing Pencil designs.
• Building or expanding a design system using Pencil.
• Synchronizing design tokens between Pencil and code (Tailwind v4 @theme, shadcn/ui tokens).
• Importing existing code into Pencil designs.

Key capabilities

• Design creation in the Pencil application.
• Code generation for React, Next.js, Vue, Svelte, and HTML/CSS.
• Integration with design systems through component reuse (using pencil_batch_get).
• Variable usage for consistent styling (using pencil_get_variables).
• Layout verification to prevent text and content overflow (using pencil_snapshot_layout).
• Support for Pencil MCP tools like pencil_batch_design and pencil_batch_get.

Example prompts

• "Create a button component in Pencil, reusing existing design system components."
• "Generate React code from this Pencil design file."
• "Import this HTML/CSS code into my Pencil project."

Tips & gotchas

• Design System Reuse is Mandatory: Always check for and reuse existing components before creating new ones using pencil_batch_get.
• Variable Usage is Required: Avoid hardcoding values; use design tokens obtained with pencil_get_variables instead.
• Visual Verification is Crucial: Regularly verify the layout to prevent text or content overflow using pencil_snapshot_layout.