codelisted

# fig:code — Figma design → frontend repo code Moves what is drawn in the design into **the code of a running app**. The target is a frontend repo with a build system, and the deliverable is a branch and a PR in that repo. **The premise — the design and the repo are each canonical for different things.** | Canonical in the design | Canonical in the repo | |---|---| | Numbers, colours, spacing, copy, placement, state variants | File structure, naming conventions, state management, token reference paths | Cross that line and something breaks. Tearing up the repo's conventions to match the design, and rounding the design's numbers off because the code prefers it, are the same failure. **When the call is unclear, do not apply it — ask.** ## When to invoke - "apply the design change to the code", "make it match Figma", "implement this screen" - Building a screen or a state variant that exists in the design and not in the code - An explicit "/fig:code" ## When NOT to invoke - A build-less single-HTML behavioural prototype → `/fig:proto` - Just listing frames or reading structure → `/fig:read` - Auditing the design's own structure, flow, and naming → `/fig:lint` - Marking AS-IS/TO-BE changes on the design and writing them up → `/fig:diff` - Applying into the canonical Figma page rather than into code → `/fig:sync` - The reverse direction, code up into Figma → `figma:figma-generate-design` ## Inputs - `figma_url` (required): figma.com/design/:fileKey/...?node-id=... — the t