generate-workflow

Use when orchestrating a full design-to-code pipeline — from Figma token extraction through Stitch or Magic component generation to component library registration. Also use when the user says “design to code”, “full UX workflow”, “design pipeline”, “generate from design”, or “end-to-end UI build”.

Model	Source
sonnet	pack: ux-ui

Full Reference

generate-workflow

Full design-to-code orchestrator. Sequences figma-sync → stitch-design/magic-21st → component-library in a repeatable pipeline. One skill to coordinate the whole flow.

Announcement

┏━ 🎨 generate-workflow ━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what design-to-code task]            ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Pipeline Map

┌─────────────────────────────────────────────────────────────┐
│                    generate-workflow                        │
│                                                             │
│  [A] SOURCE     → has Figma file?  ──yes──→ figma-sync      │
│                   no               ──────→ stitch-design    │
│                   neither          ──────→ ui-craft (vibe)  │
│                                                             │
│  [B] GENERATE   → component needed? ────→ magic-21st        │
│                   full screen?      ────→ stitch-design     │
│                   both?             ────→ stitch first,     │
│                                          magic second       │
│                                                             │
│  [C] REGISTER   → always           ────→ component-library  │
│                                                             │
│  [D] DOCUMENT   → if Storybook present → storybook skill   │
│                   always            ────→ JSDoc in file     │
└─────────────────────────────────────────────────────────────┘

Decision Tree

Step A: Source

Situation	First Tool
Figma file URL provided	figma-sync — extract tokens first
No Figma file, need a visual design	stitch-design — generate design
No Figma, no need for full design	ui-craft (frontend pack) — set direction
Pure code, no design tools needed	Skip to Step B

Step B: Generate

What’s needed	Tool
Individual UI component	magic-21st
Full screen / page design	stitch-design then implement
Both design + component	stitch-design first → magic-21st second
Existing component update	magic-21st component update tool

Step C: Register

Always run component-library after generating. No exceptions — orphan components accumulate.

Step D: Document

Project setup	Documentation
Storybook configured	Create story alongside component
No Storybook	Add JSDoc + usage example in file
Design tokens	Update tokens.css from figma-sync output

Common Scenarios

Scenario 1: Figma → Component

1. figma-sync    → extract @theme tokens from Figma file
2. magic-21st    → /ui [component] using the extracted tokens
3. component-library → register + barrel export

Scenario 2: Greenfield (No Figma)

1. ui-craft      → run Socratic Discovery, set aesthetic direction
2. stitch-design → generate full screen design from direction
3. magic-21st    → generate individual components from stitch output
4. component-library → register all generated components

Scenario 3: Rapid Component Build

1. magic-21st    → /ui [component] (direct, no design phase)
2. component-library → register

Use when: design direction is already established, just need a specific component fast.

Scenario 4: Design System Sync

1. figma-sync    → extract ALL variables from Figma design system
2. Update tokens.css with new @theme values
3. magic-21st    → regenerate outdated components to match new tokens
4. component-library → audit for stale components

Token Handoff Pattern

When figma-sync produces tokens, pass them to Magic as context:

/ui Build a card component. Use these design tokens:
--color-brand-primary: oklch(62% 0.19 250)
--radius-card: 0.75rem
--font-heading: "Inter"
Match the Figma spec: [card frame description]

Explicit token context produces better-aligned output than implicit expectations.

Skill Chains

This skill orchestrates:

• figma-sync — token extraction
• stitch-design — full-screen design generation
• magic-21st — component generation
• component-library — registration + audit
• ui-craft (frontend pack) — aesthetic direction
• storybook (frontend pack) — component documentation

Completion Pattern

Pipeline:          [A source] → [B generate] → [C register] → [D document]
Tokens:            [N] extracted / updated
Components:        [N] generated / updated
Library:           [N] registered
Next:              test components or push to staging