Skip to content
⌘K
Tutorial ~15 min Step 6 of 7

First component

Six copy-paste steps that build the Settings Card end-to-end. For the why behind each step, read /tutorial instead.

What you'll build
  • LlmCard variant="elevated"
  • Two LlmInputs (Name, Email)
  • LlmButton variant="primary"
  • Tokens: --ui-spacing-6 · --ui-spacing-4 · --ui-color-surface-raised
1

Open the Figma frame

Open the Settings / Card frame. The URL already carries ?node-id=695-313 — that's the node-id you'll pass to Claude. No need to copy it manually.

2

Pick your framework

Pick the framework you scaffolded in Setup. The tabs below stay in sync across this page.

3

Paste this prompt into Claude Code

Copy it verbatim — the prompt below is already set to the framework you picked in Step 2 (the storybook-* MCP name is filled in). Claude fetches the Figma spec and Storybook props, then writes the component.

On Angular and Vue the storybook-* MCP serves docs and stories only — Claude reads component props from the storybook-react MCP (the spec is identical across frameworks) or from libs/spec.

prompt — paste into Claude Code
Build the Settings / Card Figma frame as an Atelier UI component.


1. Use figma-console MCP (figma_get_component_for_development) on
   node-id 695-313 — read the component spec, boundVariables, and
   the rendered preview.
2. Use the storybook-angular MCP (list-all-documentation, then
   get-documentation) to look up LlmCard and LlmInput props.
3. Generate the component using:
   - Atelier UI components matched from Storybook
   - The exact CSS custom property names from the boundVariables
     (no manual conversion — they're identical to the Figma variables)
   - No hardcoded hex colors, no hardcoded padding values
4

Save the output and serve

Save the generated component to the path below, then start the dev server:

  1. Save as apps/workshop-angular/src/app/components/settings-card.component.ts
  2. Serve
    start dev server
    npx nx serve workshop-angular
  3. Open http://localhost:4200
5

Compare to the target

You should see the card from the "What you'll build" mockup above — surface-raised background, two labelled inputs, primary button. Spacing should match the Figma frame because the generated code uses --ui-spacing-6 and --ui-spacing-4 (not pixel values).

If the spacing or colors look off — that's a token drift. Run the parity check below.

6

Run the parity check

Eyeballing the result isn't enough — close the loop. figma_check_design_parity compares the generated code against the Figma spec and lists every discrepancy — exact paddings, exact colors, missing variants — so you ship a verified component, not a lookalike. Pass this prompt:

parity check prompt
Run figma_check_design_parity on node-id 695-313 against
the SettingsCard component I just generated. Fix any discrepancies.
Done

You shipped a token-exact component in ~15 min.

Browse /patterns for variations on the recipe — Login Form, Confirmation Dialog, Management Dashboard — all use the same Figma → MCP → Storybook → code loop you just ran.

Edit this page on GitHub