Pencil Sync

Pencil Sync is a bidirectional sync engine between pencil.dev .pen design files and frontend code, powered by Claude Code. It watches both sides of the design-to-code gap simultaneously: edit a component in Pencil and the code updates automatically; change the code and the design follows. The loop closes without the usual hand-off friction.

Color and fill changes take the fast path: direct CSS variable replacement, no AI call needed. Text, typography, layout, and structural changes route through Claude with a focused, diff-based prompt. Budget controls cap spend. A short grace period prevents the two watchers from triggering each other in a loop.

The name is intentionally mechanical. It does one job: it keeps two representations of the same interface in sync.

What it does

• Watches .pen files and source trees simultaneously with chokidar
• Applies color/fill changes via direct CSS variable replacement (fast path, no model call)
• Delegates structural changes to Claude CLI with a focused, diff-based prompt
• Detects conflicts when both sides diverge, with configurable resolution strategies
• Enforces a per-session token budget to prevent runaway spend
• Supports MCP integration for structured .pen writes via batch_design

Status

Hot. Used here to keep the Pencil design and this site in sync.