pencil-design

Turn Pencil designs into polished interfaces and code.

frontend design

What it does

Designs production-quality UIs in Pencil and generates maintainable frontend code from them.

When to use it

Use for designing in .pen files, generating code from Pencil designs, managing design systems or tokens, and using Pencil MCP tools.

Give it a UI design or design-to-code task; it creates or updates the Pencil design and production code in the project.

No additional actions listed in the analysis.

Requires Pencil MCP tools for inspecting, editing, rendering, and validating Pencil documents.

Must be loaded before every Pencil design or Pencil-to-code task to supply aesthetic direction and quality standards.