/design-context-extract

name: design-context-extract
license: MIT
compatibility: "Claude Code 2.1.277+. Optional: stitch (official Google Stitch) MCP server."
description: "Extracts design DNA (colors, type, spacing, components, motion) from screenshots, URLs or recordings as tokens or Tailwind config. Use to match a visual identity."
argument-hint: "[screenshot-path | video-path | url | 'current project']"
context: fork
# user-typed commands stay interactive; CC >= 2.1.218 backgrounds forks by default (#3093)
background: false
user-invocable: true
model: sonnet
agent: design-context-extractor
allowed-tools: "Read Write Glob Grep Bash WebFetch AskUserQuestion TaskCreate TaskUpdate TaskList 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"
  # 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
skills:
  - design-system-tokens
  - remember
  - memory
metadata:
  category: document-asset-creation
  mcp-server: stitch
  version: "1.0.1"
  author: "OrchestKit"
  complexity: "medium"
  tags: "design-context, design-tokens, stitch, extraction, colors, typography, audit, visual-identity"
triggers:
  keywords: ["extract design", "design tokens", "color palette", "typography", "design dna", "visual identity", "design system from", "screen recording", "motion spec", "analyze this video"]
  examples:
    - "extract the design tokens from this screenshot"
    - "what colors and fonts does this app use"
    - "create a design system from this live URL"
    - "analyze the animations in this screen recording"
  anti-triggers: [implement, build, component, explore, brainstorm]

Design Context Extract

Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens.

design-context-extract /tmp/screenshot.png       # From screenshot
design-context-extract /tmp/recording.mp4         # From screen recording (motion spec)
design-context-extract https://example.com        # From live URL
design-context-extract current project            # Scan project's existing styles

Pipeline

Input (screenshot/URL/project)
  │
  ▼
┌──────────────────────────────┐
│ Capture                       │  Screenshot or fetch HTML/CSS
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Extract                       │  Stitch get_screen + generate_screen_from_text
│                               │  OR multimodal analysis (fallback)
│ → Colors (hex + oklch)        │
│ → Typography (families, scale)│
│ → Spacing (padding, gaps)     │
│ → Components (structure)      │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Output                        │  Choose format:
│ → design-tokens.json (W3C)    │
│ → @theme (Tailwind v4)        │
│ → tokens.css (CSS variables)  │
│ → Markdown spec               │
└──────────────────────────────┘

Step 0: Detect Input and Context

INPUT = ""

# 1. Create main task IMMEDIATELY
TaskCreate(subject="Extract design context: {INPUT}", description="Extract design DNA", activeForm="Extracting design from {INPUT}")

# 2. Create subtasks for each phase
TaskCreate(subject="Detect input type and context", activeForm="Detecting input type")             # id=2
TaskCreate(subject="Capture source material", activeForm="Capturing source")                       # id=3
TaskCreate(subject="Extract design tokens", activeForm="Extracting tokens")                        # id=4
TaskCreate(subject="Choose output format and generate", activeForm="Generating output")            # id=5
TaskCreate(subject="Recommend shadcn/ui style", activeForm="Recommending style")                   # id=6

# 3. Set dependencies for sequential phases
TaskUpdate(taskId="3", addBlockedBy=["2"])  # Capture needs input type detected
TaskUpdate(taskId="4", addBlockedBy=["3"])  # Extraction needs captured source
TaskUpdate(taskId="5", addBlockedBy=["4"])  # Output needs extracted tokens
TaskUpdate(taskId="6", addBlockedBy=["5"])  # Style recommendation needs output

# 4. Update status as you progress
TaskUpdate(taskId="2", status="in_progress")  # When starting
TaskUpdate(taskId="2", status="completed")    # When done — repeat for each subtask

# Determine input type
# "/path/to/file.png" → screenshot
# "/path/to/file.mp4|.mov|.webm|.gif" → screen recording (video pipeline)
# "http..." → URL
# "current project" → scan project styles

Step 1: Capture Source

**For screenshots:** Read the image directly (Claude is multimodal). Pasted/attached images are compressed to the same token budget as Read tool images (CC 2.1.97), so both workflows are equally efficient.

> **Resolution budget (Opus 5.5 / CC 2.1.111+):** Max input is **2,576 px on the long edge** (~3.75 MP) — roughly 3× the Opus 4.6 ceiling. Dense dashboards, dark-mode UIs, and technical diagrams benefit the most from the higher ceiling; extraction reads tiny labels, spacing ticks, and component boundaries that were previously blurred. Below 1,024 px, don't upscale — the source bitmap is the ceiling. Resize only when input exceeds 2,576 px.

**For URLs:**

# If stitch available:
#   list_projects / get_project to locate the project
#   generate_screen_from_text once for the URL goal (can take minutes; DO NOT RETRY;
#     on timeout poll get_screen every 30 s up to 10 times)
#   list_screens, then get_screen(name="projects/{projectId}/screens/{screenId}")
#   fetch download URLs from the response
# If not: WebFetch the URL an