01 / Figma → code
d2c
Eight steps from design link to merged MR: survey and reuse audit, plan review, spec extraction, 1:1 build, regression page, motion review, screenshot acceptance, and cleanup.
2 stops + 1 conditional
Code-to-design- to-code.
Four pipelines close the loop between Figma and a production codebase—packaged as a Claude Code skill series plus an optional Figma plugin.
The shape
c2d and d2c are the two arcs. Govern is the outer ring that keeps the loop from drifting apart.
Restore turns approved Figma into production code. Export moves components, states, and tokens back into Figma. Govern converges the system and freezes it with gates.
Three linked skills
Restore Export Govern
02 / Code → Figma
c2d
Moves components and tokens into Figma. Every state is enumerated from source, everything is bound to tokens, and componentization requires an explicit answer.
12 field-tested gotchas
03 / Code → code
ds-govern
Converges and freezes a style system through census, reviewed spec, one source, full migration, a CI gate, dead-code removal, and written rules.
Spec review before edits
04 / Optional push lane
Token Sync / Figma plugin
Code stays the source of truth.
01
Pull
Snapshot variables and styles from main into Figma.
02
Design
Preview live foundations and review bound objects.
03
Push
Open an MR with safe CSS write-back and manual items listed.
A red check:figma-variables gate is a designed
collaboration signal: snapshot and CSS disagree until the change
is applied or rejected.
Why the loop
Just prompting AI to design isn't the most efficient workflow.
c2d2c starts from what already exists. Going c2d, Claude maps out every module, state, and component and connects them with tokens—drafts that give a full picture of the current state, where a few visual tweaks are often all they need. Going d2c, everything hooks back into the existing design system without much extra prompting.
Production evidence
The workflows were extracted from real delivery.
3
Skills in the series
4
Worked production cases
6
Merged MRs in the global-search case
Case A / restore
Global search rebuild
Four rounds moved from structure to detail to motion. Each round repeated the same build, screenshot acceptance, and merge loop.
Case B / export
Chat inline elements
Source enumeration covered seven mention kinds and the favicon fallback chain before components, states, and token bindings moved into Figma.
Case C / govern
Radius system
One MR shipped the fixed ladder, migration, usage gate, written rule, and Figma export together.
Case D / token sync
Two-way circuit
Export script, CI gate, and local Figma plugin interlock while preserving code as the source of truth.
Repository artifacts
Three views of the loop.
Adoption path
Install once, then just ask.
No upfront configuration: on first run a skill reads what it can
from the repo, asks about the rest, and saves it to
C2D2C.md. The one hard prerequisite is the Figma MCP
connector—read access for d2c, write access for c2d.
01 / Model
Run the skills on Claude Fable 5. Each pipeline is a long multi-stop agent run across Figma and Git tooling—earlier models drop steps and need re-prompting; only Fable 5 keeps the loop smooth end to end.
02 / Install
Run npx skills add BIAsia/c2d2c, or clone the
repository and add it as a local Claude Code plugin for the
full toolkit.
03 / d2c
“Implement this design 1:1: <figma link>.”
04 / c2d
“Map out the search module—components and states—and export it to Figma: <figma link>.”
05 / ds-govern
“Unify how radius is used across the project—one ladder, migrate everything, gate it.”