Skip to content
⌘K
Tutorial ~15 min Kata · copy-paste

First component

Five 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 verbatim. Replace {framework} with your framework (angular, react, or vue). Claude will fetch the Figma spec and Storybook props, then write the component.

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-{framework} 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
    Terminal window
    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.

+

Optional · run the parity check

figma_check_design_parity compares the generated code against the Figma spec and lists discrepancies — exact paddings, exact colors, missing variants. Pass this prompt to close the loop:

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.