Pencil To Code

Pencil to Code

Export Pencil .pen designs to production React/Tailwind code.

Interface

Input: Frame ID to export (or entire document) Target framework: React (default), Vue, HTML Optional: Component name, output path Output: React component(s) with Tailwind classes Tailwind theme configuration (from .pen variables) Optional: Screenshot comparison for validation

1. Read Design Structure

// Get full frame tree mcp__pencil__batch_get({ filePath: "<path>.pen", nodeIds: ["frameId"], readDepth: 10, resolveInstances: true, resolveVariables: true }) // Get design variables/theme mcp__pencil__get_variables({ filePath: "<path>.pen" })

2. Extract Design Tokens

Transform .pen variables → Tailwind theme: /* From .pen variables */ @theme { --color-primary: [from variables.colors.primary]; --color-background: [from variables.colors.background]; --font-sans: [from variables.fonts.body]; /* ... */ } Reference: references/token-extraction.md

3. Map Nodes to Components

.pen Node TypeReact Outputframe with layout<div className="flex ...">frame with childrenComponent with childrentext<p>, <h1-6>, or <span>ref (instance)Reusable componentrectangle<div> with fillellipse<div className="rounded-full">image<img> or fill: url() Reference: references/node-mapping.md

4. Generate Code

Component structure: // components/[ComponentName].tsx import { cn } from "@/lib/utils" interface [ComponentName]Props { className?: string // Extracted props from design } export function [ComponentName]({ className, ...props }: [ComponentName]Props) { return ( <div className={cn("[tailwind classes]", className)}> {/* Nested structure */} </div> ) } Tailwind mapping: .pen property → Tailwind class -------------------------------- fill: #000 → bg-black layout: horizontal → flex flex-row gap: 16 → gap-4 padding: [16,24,16,24] → py-4 px-6 fontSize: 24 → text-2xl fontWeight: 700 → font-bold cornerRadius: [8,8,8,8] → rounded-lg

5. Validate (Optional)

// Screenshot the .pen frame mcp__pencil__get_screenshot({ nodeId: "frameId" }) // Compare visually with rendered React // (Manual step or browser automation)

6. Output

• ## Generated Components
• ### [ComponentName]
• File: `components/[ComponentName].tsx`
• Props: [list extracted props]
• ### Theme Configuration
• File: `app/globals.css` (additions)
• ## Verification
• Screenshot comparison: [attached]

Layout System

.pen Tailwind -------------------------------------- layout: "vertical" → flex flex-col layout: "horizontal" → flex flex-row layout: "grid" → grid alignItems: "center" → items-center justifyContent: "center" → justify-center gap: 8 → gap-2 gap: 16 → gap-4 gap: 24 → gap-6 width: "fill_container" → w-full height: "fill_container" → h-full

Spacing (8-point grid)

.pen padding Tailwind ---------------------------------------- [8,8,8,8] → p-2 [16,16,16,16] → p-4 [16,24,16,24] → py-4 px-6 [24,32,24,32] → py-6 px-8

Typography

.pen Tailwind ---------------------------------------- fontSize: 12 → text-xs fontSize: 14 → text-sm fontSize: 16 → text-base fontSize: 20 → text-xl fontSize: 24 → text-2xl fontSize: 32 → text-3xl fontSize: 48 → text-5xl fontWeight: 400 → font-normal fontWeight: 500 → font-medium fontWeight: 600 → font-semibold fontWeight: 700 → font-bold

Colors

.pen Tailwind ---------------------------------------- fill: "#FFFFFF" → bg-white fill: "#000000" → bg-black fill: variable → bg-[var(--color-name)] textColor: "#6B7280" → text-gray-500 stroke: "#E5E5E5" → border-gray-200

Border Radius

.pen cornerRadius Tailwind ---------------------------------------- [0,0,0,0] → rounded-none [4,4,4,4] → rounded [8,8,8,8] → rounded-lg [16,16,16,16] → rounded-2xl [9999,9999,9999,9999] → rounded-full

Constraints

Single concern: Export → code. No design modifications. Tailwind 4 @theme: CSS-first token system React + TypeScript: Default output target Semantic HTML: Choose appropriate elements Accessibility: Include aria attributes where detectable

References

references/node-mapping.md — Complete node → component mapping references/token-extraction.md — Variable → theme extraction design-tokens/ — Token system conventions

Integration

Called by: design-exploration orchestrator (after direction selection) Direct user invocation Composes: design-tokens (for theme structure)