figma-codegen

# figma-codegen Turn a Figma selection into code that looks like the rest of the project: reuse the components and tokens that already exist, only build what's genuinely missing. The grounded tools do the heavy lifting so you are not guessing from a screenshot. This file is the router; deep detail lives in [`references/`](./references) — load a reference when its step is in play. ## When to use - The user pastes a Figma URL/selection and asks for code ("code this", "build this component"). - The user wants to extend an existing component to match a Figma frame. ## Workflow Run the grounded tools against the selection, then generate — **trust them over the rendered image.** 1. **`get_design_context`** (detail `full`, `dedupeComponents: true`) → the structural tree with tokens resolved to names (`Primary/500`, `spacing/4`), styles deduped into `globalVars`, and each instance's `mainComponent` / `componentProperties`. This is the layout + binding source of truth. Keep `dedupeComponents: true` and don't depth-limit a subtree you'll build from. → **How to read the tree, the per-node fidelity catalog (effects, per-side borders, stroke align, per-corner radius, blend, masks, gradients, image-fit, auto-layout/grid, aspect-ratio, scroll/sticky, stack & stroke-space), Dev Mode annotations as ground truth, and grounding a page too big for one call: [`references/grounding.md`](./references/grounding.md).** 2. **`component_map`** → every Figma component grouped...