Design ↔ Code

Pencil bridges the gap between design and development with three complementary workflows: Design to Code, Code to Design, and Sync. Together they let you move fluidly between the canvas and your codebase.

Design to Code

Create your interface visually in Pencil, save the project as a .pen file, then use the AI prompt to generate production-ready code.

  • Press Cmd/Ctrl+K to open the AI prompt and ask it to generate code for the selected frame.
  • Supported frameworks: React, Vue, Svelte, and Next.js.
  • Supported styling approaches: Tailwind CSS, CSS Modules, and Styled Components.

Code to Design

Keep your .pen files in the same workspace as your source code. The AI agent can read existing components and recreate them visually on the Pencil canvas, making it easy to iterate on designs that already live in code.

Variables & Design Tokens

CSS variables and Pencil variables stay in sync bidirectionally. When you update a colour or spacing token on either side, the change is reflected in the other automatically.

Best Practices

  • Keep .pen files in your project repository alongside your source code so designers and developers always work from the same source of truth.
  • Break complex designs into smaller, reusable component frames before generating code.
  • Use Pencil variables for colours and spacing so that design tokens translate cleanly into CSS custom properties.

Supported Technologies

Frameworks

  • React, Next.js, Vue, Svelte, and plain HTML/CSS.

Component Libraries

  • Shadcn, Radix, Chakra, and Material UI.

Icon Libraries

  • Lucide, Heroicons, and FontAwesome.

Limitations

  • Pencil does not auto-save — remember to save your .pen files frequently.
  • Export failures may occasionally occur and typically require re-authentication with the AI service.
  • For best results, break complex designs into smaller, self-contained pieces before running code generation.

Last updated: February 22, 2026