Explanation Step 5 of 7

Design to Code

From a Figma component to a verified, framework-native component — the Atelier loop. This is the map; the kata and the tutorial are the territory.

The loop at a glance

Four steps turn a design into shipped code. Each one hands concrete data to the next — no screenshots, no copy-paste guessing.

The four-step loop. Inspect reads the design, Spec is the shared contract, Generate writes framework-native code, Verify proves parity against Figma.

Inspect — read the Figma component

Run figma_get_component_for_development (figma-console MCP) on the node, or open the master on the Components page of the Atelier UI Figma file. Note the variants, the --ui-* tokens bound to each property (boundVariables), and any accessibility annotations. These map one-to-one to CSS custom properties — no conversion needed.

Spec — the framework-agnostic contract

The API contract lives in libs/spec/src/index.ts (plus metadata/ and tokens.manifest.ts). It is the same contract across all three frameworks: identical prop names, identical variant unions, identical token names. Whichever framework you pick, the props you'll write are defined here.

Generate — prompt Claude in your framework

Prompt Claude Code to build or edit the component in your chosen framework, using the Storybook MCP for exact component docs. Pick a framework — the prompt and the source-of-docs note update to match:

Build the Settings / Card Figma frame as an Angular Atelier UI component.

1. figma-console MCP (figma_get_component_for_development) on the node —
   read boundVariables, the component tree, and the rendered preview.
2. Read the component API contract from libs/spec/src/index.ts (LlmCardSpec,
   LlmInputSpec) — Angular metadata isn't on the Storybook MCP yet.
3. Generate the component with the exact Atelier UI props and the exact
   --ui-* token names from boundVariables. No hardcoded colors or paddings.

Build the Settings / Card Figma frame as a React Atelier UI component.

1. figma-console MCP (figma_get_component_for_development) on the node —
   read boundVariables, the component tree, and the rendered preview.
2. storybook-react MCP (list-all-documentation, then get-documentation)
   to look up LlmCard and LlmInput props.
3. Generate the component with the exact Atelier UI props and the exact
   --ui-* token names from boundVariables. No hardcoded colors or paddings.

Build the Settings / Card Figma frame as a Vue Atelier UI component.

1. figma-console MCP (figma_get_component_for_development) on the node —
   read boundVariables, the component tree, and the rendered preview.
2. Read the component API contract from libs/spec/src/index.ts (LlmCardSpec,
   LlmInputSpec) — Vue metadata isn't on the Storybook MCP yet.
3. Generate the component with the exact Atelier UI props and the exact
   --ui-* token names from boundVariables. No hardcoded colors or paddings.

Verify — prove design parity

Run the story in Storybook (nx storybook <fw>) to see the component in isolation, then run figma_check_design_parity to catch padding, colour, and variant drift against the Figma spec. This step is required — it's what turns "looks about right" into a verified component.

Run figma_check_design_parity on the settings card node against
the component I just generated. Fix every discrepancy it reports.

Where to go next

Run the loop hands-on in the 15-min kata, or read the tutorial for the deeper MCP mechanics behind each step.

Edit this page on GitHub