/design-to-code

name: design-to-code
license: MIT
compatibility: "Claude Code 2.1.277+. Optional: stitch (official Google Stitch), 21st-dev-magic, storybook-mcp (@storybook/addon-mcp) MCP servers."
description: "Mockup or screenshot to a React component via Stitch, 21st.dev and Storybook MCP, reusing existing components. For Storybook MCP tools alone, use storybook-mcp-integration."
argument-hint: "[screenshot-path | description | url]"
context: fork
# user-typed commands stay interactive; CC >= 2.1.218 backgrounds forks by default (#3093)
background: false
user-invocable: true
effort: high
model: sonnet
allowed-tools: "Read Write Edit Glob Grep Bash WebFetch WebSearch AskUserQuestion Agent TaskCreate TaskUpdate TaskList mcp__21st-dev-magic__search mcp__21st-dev-magic__search_picker mcp__21st-dev-magic__get_component mcp__21st-dev-magic__get_theme mcp__21st-dev-magic__get_usage mcp__stitch__list_projects mcp__plugin_hq-ext_stitch__list_projects mcp__stitch__get_project mcp__plugin_hq-ext_stitch__get_project mcp__stitch__list_screens mcp__plugin_hq-ext_stitch__list_screens mcp__stitch__get_screen mcp__plugin_hq-ext_stitch__get_screen mcp__stitch__generate_screen_from_text mcp__plugin_hq-ext_stitch__generate_screen_from_text mcp__storybook-mcp__list-all-documentation mcp__storybook-mcp__get-documentation mcp__storybook-mcp__preview-stories mcp__storybook-mcp__run-story-tests"
  # "Priority 2 — Search 21st.dev" (below) named the server but granted none of
  # its tools, so that whole branch was unreachable. Read-only surface only.
  # search/search_picker/metadata are unmetered; get_component is the only metered
  # tool (2/day on free, unlimited on paid — call get_usage, do not assume).
  # Browse first regardless: the USER should pick, not the model.
  # Stitch: body names these five (live stitch.googleapis.com/mcp roster).
  # Grant BOTH prefixes: standalone stitch (mcp__stitch__*) and hq-ext plugin
  # (mcp__plugin_hq-ext_stitch__*). See https://code.claude.com/docs/en/mcp-servers
  # Storybook MCP: body calls these when storybook-mcp is available.
skills:
  - design-system-tokens
  - component-search
  - storybook-mcp-integration
  - design-context-extract
  - remember
  - memory
metadata:
  category: workflow-automation
  mcp-server: stitch, 21st-dev-magic, storybook-mcp
  version: "1.0.1"
  author: "OrchestKit"
  complexity: "complex"
  tags: "design-to-code, stitch, 21st-dev, ui-generation, mockup, component, react, frontend"
triggers:
  keywords: ["design to code", "mockup to code", "screenshot to component", "convert design", "implement ui from", "build from mockup"]
  examples:
    - "convert this screenshot into a React component"
    - "implement the UI from this Figma mockup"
    - "build a component from this design"
  anti-triggers: [explore, assess, review, brainstorm, extract design]
paths:
  - "src/components/**/*.{tsx,css}"
  - "**/*design-tokens*"
  - ".storybook/**"

Design to Code

Convert visual designs into production-ready React components using a four-stage pipeline: Extract, Match, Adapt, Render.

design-to-code screenshot of hero section    # From description
design-to-code /tmp/mockup.png               # From screenshot
design-to-code https://example.com/pricing    # From URL

Pipeline Overview

Input (screenshot/description/URL)
  │
  ▼
┌─────────────────────────┐
│ Stage 1: EXTRACT         │  Stitch MCP → screen details + URLs
│ generate_screen_from_text│  Create screens from a text prompt
│ get_screen               │  Screen details with download URLs
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 2: MATCH           │  1. Storybook MCP → check existing
│ Storybook-first lookup   │  2. 21st.dev → search public registry
│ Then 21st.dev fallback   │  3. Filesystem → grep codebase
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 3: ADAPT           │  Merge extracted design + matched
│ Apply project tokens     │  components into final implementation
│ Customize to codebase    │  Tests + types included
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 4: RENDER          │  Register as json-render catalog entry
│ Generate Zod schema      │  Same component → PDF, email, video
│ Add to defineCatalog()   │  Multi-surface reuse via MCP output
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 4b: VERIFY         │  Storybook MCP → self-healing loop
│ run-story-tests(a11y)    │  Fix violations, retry (max 3)
│ preview-stories          │  Embed live preview in chat
└─────────────────────────┘

Argument Resolution

INPUT = ""  # Full argument string
# Detect input type:
# - Starts with "/" or "~" or contains ".png"/".jpg" → screenshot file path
# - Starts with "http" → URL to screenshot or live page
# - Otherwise → natural language description

Step 0: Detect Input Type and Project Context

# 1. Create main task IMMEDIATELY
TaskCreate(subject="Design to code: {INPUT}", description="Four-stage pipeline: extract, match, adapt, render", activeForm="Converting design to code")

# 2. Create subtasks for each stage
TaskCreate(subject="Extract design context", activeForm="Extracting design context")               # id=2
TaskCreate(subject="Match components (Storybook-first)", activeForm="Matching components")         # id=3
TaskCreate(subject="Adapt to project tokens and conventions", activeForm="Adapting to project")    # id=4
TaskCreate(subject="Register in json-render catalog", activeForm="Registering in catalog")         # id=5
TaskCreate(subject="Verify with Storybook self-healing", activeForm="Verifying component")         # id=6

# 3. Set dependencies for sequential stages
TaskUpdate(taskId="3", addBlockedBy=["2"])  # Match needs extracted design context
TaskUpdate(taskId="4", addBlockedBy=["3"])  # Adapt needs matched components
TaskUpdate(taskId="5", addBlockedBy=["4"])  #