Pencil Sync

Pencil Sync is a bidirectional sync engine between .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 — a direct CSS variable replacement requiring no model call. Text, typography, layout, and structural changes route through the Claude CLI with a focused, diff-based prompt. Budget controls and a lock-managed grace period prevent echo loops when a sync write triggers the watcher on the other side.

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

Cast. Used in the workshop to keep the Pencil design and this site in sync.