Design system hub

Agent reads the /figma-use skill, creates a new Figma file, and uses generate_figma_design to translate the live page into layers. Structure, hierarchy, auto layout, and semantic layer naming only — hardcoded values throughout.

Read the /figma-use skill. Create a new Figma file. Use the generate_figma_design
tool to translate the live page into Figma layers:
<dashboard-url>

Focus on structure only — layout, hierarchy, naming, and auto layout throughout.
Layer names must mirror the source code exactly, no Figma defaults like "Frame 12"
or "Group 3". Hardcoded values are fine for now.

We'll bind tokens and extract components in later steps.

Agent inspects the live page code and the design hub, then outputs a structured brief: all design tokens (colors, spacing, type, radii), a component inventory, and layout structure. This brief drives Step 3.

Inspect the live page code at:
<dashboard-url>

And the design hub:
<hub-url>

Output a brief covering: all design tokens (colors, spacing, type, radii), a
component inventory, and layout structure.

This brief will be used directly in the next step to set up variables and styles
in the created file.

Agent reads /figma-use and uses the Phase 2 brief to set up all Figma variables and styles via use_figma — colors (primitives first, then semantic aliases), type styles, spacing, and radii. Token names match source exactly.

Read the /figma-use skill. Using the Phase 2 brief, set up all variables and styles
via the use_figma tool in the created file — colors (primitives then aliases), type
styles, spacing, and radii. Match source token names exactly.

We'll tokenize the frame next, but not yet. Confirm what was created and flag
anything that didn't map cleanly.

Agent reads /figma-use and re-inspects the live page, then binds every layer to the correct variable from Step 3 — no raw values anywhere. Takes a screenshot and does a self-healing pass to correct visual drift. Done when zero raw values remain and the frame matches the live page.

Read the /figma-use skill. Re-inspect the live page code at:
<dashboard-url>

Using the use_figma tool, go through every layer in the Figma frame and bind it to
the correct variable from Phase 3. No raw values anywhere — every color, spacing,
type, and radii value must reference a token.

For each binding, confirm it's correct against the source — not just visually
plausible. Flag anything that couldn't be bound cleanly and explain why.

After all values are bound, take a screenshot of the frame and do a self-healing
pass — compare against the live page and correct any remaining visual drift before
moving to Step 5.

We're done when there are zero raw values left and the frame matches the live page.

Agent reads /figma-use and extracts all repeating patterns into proper Figma components with variants. All components use existing variables — no new raw values. Main frame references components, not raw layers.

Read the /figma-use skill. Using the use_figma tool, extract all repeating patterns
from the tokenized frame into proper Figma components.

Each component should have correct variants where the source has states or
variations. All components must use existing variables — no new raw values. Layer
naming inside components must continue to mirror the source code.

Confirm when all repeating elements have been extracted and the main frame
references components rather than raw layers.