Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design, analyze animations or scroll behavior, or keep new pages matching an established visual identity.
Claude Code 2.1.220+. Optional: stitch (official Google Stitch) MCP server.
description
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design, analyze animations or scroll behavior, or keep new pages matching an established visual identity.
{"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.
/ork:design-context-extract /tmp/screenshot.png # From screenshot
/ork:design-context-extract /tmp/recording.mp4 # From screen recording (motion spec)
/ork:design-context-extract https://example.com # From live URL
/ork:design-context-extract current project # Scan project's existing styles
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 / 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: call build_site(prompt=<url + extraction goal>)# then get_screen_code / get_screen_image per generated screen# If not: WebFetch the URL and analyze HTML/CSS
For current project:
Grep("@theme", glob="**/*.css") # Tailwind v4: theme lives in CSS, not a config file
Glob("**/tailwind.config.*") # Tailwind v3 only (v4 ignores this file)
Glob("**/tokens.css")
Glob("**/*.css") # Look for design token files
Glob("**/theme.*")
# Read and analyze existing style definitions
For screen recordings (video): the only input mode that carries motion — easing, scroll
choreography, transitions. Requires ffmpeg/ffprobe (skip with an install hint if missing).
# 1. Probe: duration, dimensions, frame rate
ffprobe -v error -show_entries format=duration,size:stream=width,height,r_frame_rate -of json "$VIDEO"# 2. Extract frames at timeline beats — NOT uniform thumbnails.# Pass A: 1fps sweep to locate transitions; Pass B: re-extract around detected beats.mkdir -p "$SCRATCHPAD/video-frames"
ffmpeg -y -i "$VIDEO" -vf fps=1 "$SCRATCHPAD/video-frames/frame-%03d.jpg"# For scroll-heavy or long videos also grab start / middle / end explicitly.
Then Read the extracted frames (multimodal) and analyze in layers:
Layer
What to capture
Layout
viewport framing, grids, sticky zones, section order
same token extraction as screenshots (colors, type, spacing)
Rebuild
name the mechanism: CSS transition, IntersectionObserver, GSAP ScrollTrigger, video.currentTime scrub, WebGL
Video inputs additionally emit a motion-spec.md alongside the token output: per-interaction
durations (ms), easing, trigger (scroll/hover/load), and a reduced-motion fallback for each entry.
Never describe motion as "smooth" or "nice" — convert taste into mechanism + numbers.
Step 2: Extract Design Context
If stitch MCP is available:
# Official Stitch MCP tools (stitch.withgoogle.com/docs/mcp):# - build_site(prompt) → generates the target design# - get_screen_code(screenId) → React/HTML output per screen# - get_screen_image(screenId) → PNG rasterization per screen## Also consider Figma Dev Mode MCP as a complementary extraction path# when the source is a Figma file:# - get_variable_defs → design tokens straight from Figma variables# - get_design_context → layout + typography + spacing# - search_design_system → locate existing tokens/components
If stitch MCP is NOT available (fallback):
# Multimodal analysis of screenshot:# - Identify dominant colors (sample from regions)# - Detect font families and size hierarchy# - Measure spacing patterns# - Catalog component types (cards, buttons, headers, etc.)## For URLs: parse CSS custom properties, Tailwind config, computed styles
AskUserQuestion(questions=[{
"question": "Output format for extracted tokens?",
"header": "Format",
"options": [
{"label": "Tailwind @theme (Recommended)", "description": "@theme block in the CSS entry (app.css) with extracted theme values"},
{"label": "W3C Design Tokens", "description": "design-tokens.json following W3C DTCG spec"},
{"label": "CSS Variables", "description": "tokens.css with CSS custom properties"},
{"label": "Markdown spec", "description": "Human-readable design specification document"}
],
"multiSelect": false
}])
Tailwind v4 is CSS-first: theme values go in an @theme block, and tailwind.config.js
is ignored entirely (see ui-components/rules/tailwind-v4-patterns.md).
Legacy (Tailwind v3 only): if the project pins v3, emit tailwind.config.ts with the
same values under theme.extend. Offer this only after confirming the v3 pin in
package.json. It is never the default.
Step 4: Generate Output
Write the extracted tokens in the chosen format. If the project already has tokens, show a diff of what's new vs existing.
Step 5: Recommend Best-Fit shadcn/ui Style
After extracting design DNA, map the extracted characteristics to the best-fit shadcn/ui v4 style:
