Mockup-to-component pipeline using Google Stitch and 21st.dev. Accepts screenshots, descriptions, or URLs as input and produces production-ready React components. Orchestrates design extraction via Stitch MCP, component matching via 21st.dev registry, and adaptation to project design tokens. Use when converting visual designs to code, implementing UI from mockups, or building components from screenshots.

Command

Design to Code

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

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

Pipeline Overview

Input (screenshot/description/URL)
  │
  ▼
┌─────────────────────────┐
│ Stage 1: EXTRACT         │  Stitch MCP → HTML + design context
│ get_screen_code          │  Extract colors, typography, layout
│ extract_design_context   │  Produce design-tokens.json
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 2: MATCH           │  21st.dev Magic → search components
│ Search by description    │  Find production-ready matches
│ Filter by framework      │  React + Tailwind preferred
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 3: ADAPT           │  Merge extracted design + matched
│ Apply project tokens     │  components into final implementation
│ Customize to codebase    │  Tests + types included
└─────────────────────────┘

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

TaskCreate(subject="Design to code: {INPUT}", description="Three-stage pipeline: extract, match, adapt")

# Detect project's design system
Glob("**/tailwind.config.*")
Glob("**/tokens.css")
Glob("**/.tokens.json")
# Read existing tokens if found → used in Stage 3

Stage 1: Extract Design Context

If stitch MCP is available:

# For screenshot/URL input:
# Use official Stitch MCP tools to extract design HTML and context
# Tools: get_screen, list_screens, get_project

# For description input:
# generate_screen_from_text to create design, then get_screen to extract

If stitch MCP is NOT available (fallback):

# For screenshot: Read the image file directly (Claude is multimodal)
# Analyze layout, colors, typography, spacing from the image
# For URL: WebFetch the page, extract HTML structure
# For description: Skip extraction, proceed to Stage 2 with description

Extract and produce:

Color palette (hex/oklch values)
Typography (font families, sizes, weights)
Spacing patterns (padding, margins, gaps)
Component structure (headers, cards, buttons, etc.)
Layout pattern (grid, flex, sidebar, etc.)

Stage 2: Match Components from Registry

If 21st-dev-magic is available:

# Search 21st.dev for matching components
# Use the component descriptions from Stage 1
# Example: "animated pricing table with toggle"
# Filter: React, Tailwind CSS, shadcn/ui compatible

If 21st-dev-magic is NOT available (fallback):

# Search for components in the project's existing codebase
Grep(pattern="export.*function|export.*const", glob="**/*.tsx")
# Check for shadcn/ui components
Glob("**/components/ui/*.tsx")
# Generate from scratch if no matches found

Present matches to user:

AskUserQuestion(questions=[{
  "question": "Which component approach for {component_name}?",
  "header": "Component",
  "options": [
    {"label": "Use 21st.dev match", "description": "{matched_component_name} — {match_score}% match"},
    {"label": "Adapt from codebase", "description": "Modify existing {existing_component}"},
    {"label": "Generate from scratch", "description": "Build new component from extracted design"}
  ],
  "multiSelect": false
}])

Stage 3: Adapt to Project

Merge the extracted design context with matched/generated components:

Apply project tokens — Replace hardcoded colors/spacing with project's design tokens
Match naming conventions — Follow project's component naming patterns
Add TypeScript types — Full type safety with Zod validation for any data props
Include tests — MSW handlers for API-backed components, render tests for static
Responsive — Mobile-first with breakpoints matching project's system

Output Structure

src/components/
  └── {ComponentName}/
      ├── {ComponentName}.tsx       # Main component
      ├── {ComponentName}.test.tsx  # Tests
      └── index.ts                 # Barrel export

Graceful Degradation

stitch	21st-dev-magic	Behavior
Available	Available	Full pipeline: extract + match + adapt
Available	Unavailable	Extract design, generate components from scratch
Unavailable	Available	Use description/manual analysis, search registry
Unavailable	Unavailable	Manual analysis + generate from scratch (still works)

The skill ALWAYS produces output regardless of MCP availability. MCPs enhance quality and speed.

Anti-Patterns

NEVER output components with hardcoded colors — use design tokens
NEVER skip TypeScript types — all props must be typed
NEVER generate without checking existing project patterns first
NEVER ignore the project's existing component library structure

ork:component-search — Search 21st.dev registry standalone
ork:design-context-extract — Extract design DNA from screenshots
ork:design-system-tokens — Token architecture and management
ork:frontend-design — Creative frontend design generation

Design To Code