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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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:
