Design With Pencil

# Create a .pen file in your project
touch designs/my-component.pen
# Open it — Pencil canvas opens automatically

2. Design on canvas

Describe what you want in the Pencil prompt box:

• "Design a dashboard with sidebar navigation and data cards"
• "Design a mobile app login screen, minimalist style"
• "Design a landing page for a SaaS product, dark theme"

Or import from Figma: copy elements → paste directly into Pencil canvas.

3. Iterate with AI

From the Pencil canvas, prompt changes directly:

• "Change to light mode"
• "Make the headline larger, Swiss layout"
• "Explore a totally different direction"
• "Use a sidenav instead"

4. Generate code from design

Ask Claude Code to read the canvas and generate code:

Read my Pencil canvas in designs/my-component.pen and generate
a React component matching the design pixel-perfectly.
Use Tailwind CSS and shadcn/ui components.

Claude Code reads the .pen file via MCP and generates production-ready code.

5. Sync design ↔ code

Pencil is bi-directional — when code changes, ask Claude Code to update the canvas:

Update the canvas in designs/my-component.pen to reflect
the changes I made to components/Dashboard.tsx

Key prompts for Pencil

New screen from scratch:

Design a web app for [purpose]. Use [style] style.

Iterate on existing:

Look at the selected design. [Change]. Create a new design for it.

Explore directions:

Look at the selected design. Explore a totally different design direction.

Brand consistency:

Look at the selected design. Apply our design system from /design-tokens.

When to use Pencil vs Stitch

Use Pencil when you want designs to live in the repo with Git versioning. Use Stitch when you want quick API-generated HTML without IDE setup.