Design System + Engineering
A Claude Code control plane that turns creative direction into dev-ready Figma frames, bound to the design system, consumable in Dev Mode, with zero spec drift.
Design and dev drift the moment the handoff ends
A design system promises one source of truth. In practice the truth splits the second a frame leaves Figma: detached instances, hardcoded hex values, placeholder copy, components that won't resolve in Dev Mode. The expensive part was never drawing the screen. It was keeping the spec true after handoff, by hand, forever.
I wanted to close that gap structurally, so the design that reaches an engineer is already dev-ready by construction, not by review.
A control plane for an AI design workflow
The design artifacts stay in Figma. This is the system that makes the workflow run: an admin repo that hands creative direction to Claude Code, which produces dev-ready Figma frames against the design system. Every value bound to a variable, every component a real instance, all of it resolvable when engineers open Dev Mode. I built it around the Unify DS; the core is system-agnostic.
Operating contract
A durable PLAYBOOK plus a /design skill that loads the DS rules and HCI laws before a single frame is drawn.
Token mirror
JSON mirrors of every Figma variable (colors, type, spacing, radius) as the one source for any value lookup.
Component manifest
A lookup index of library components, variants, and keys, so Claude reaches for the real instance, never a copy.
Swappable ds/ folder
The generic core stays put; the ds/ folder is the only thing that changes per design system. Retarget by folder swap.
Brief in chat, dev-ready frame out
A brief lands in chat: screenshots, component links, or a filled-out template from a designer or PM. From there the workflow is deterministic.
Read only what's needed
Token values from the JSON mirror, component metadata from the manifest, geometry and variants pulled from Figma via MCP, only for the components the brief actually names.
Design in the target Figma file
Frames auto-laid out, every value bound to a DS variable, every component a real instance. No detached copies, no hardcoded hex, no lorem ipsum.
Flag judgment calls in chat
Information-architecture and new-pattern decisions ask first; the handoff is confirmed with a one-line summary of exactly what changed.
Dev-ready by construction, not by review
The frame that reaches an engineer is already correct. Open it in Dev Mode and every token, variant, and component resolves. Nothing detached, nothing hardcoded, no placeholder copy left to clean up. Design and code stop drifting because the design was never allowed to leave the system in the first place. The review step that used to catch spec drift has nothing left to catch.
And because the generic core sits apart from the design-specific layer, pointing the whole workflow at a different design system is a folder swap, not a rebuild.