design-context-extract

name	design-context-extract
license	MIT
compatibility	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.
argument-hint	[screenshot-path | video-path | url | 'current project']
tags	["design-context","design-tokens","stitch","extraction","colors","typography","audit","visual-identity"]
context	fork
background	false
version	1.0.1
author	OrchestKit
user-invocable	true
complexity	medium
persuasion-type	collaborative
model	sonnet
agent	design-context-extractor
allowed-tools	["Read","Write","Glob","Grep","Bash","WebFetch","AskUserQuestion","TaskCreate","TaskUpdate","TaskList"]
skills	["design-system-tokens","remember","memory"]
metadata	{"category":"document-asset-creation","mcp-server":"stitch"}
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.

/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

Pipeline

Input (screenshot/URL/project)
  │
  ▼
┌──────────────────────────────┐
│ Capture                       │  Screenshot or fetch HTML/CSS
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Extract                       │  Stitch extract_design_context
│                               │  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")            
TaskCreate(subject=, activeForm=)                   


TaskUpdate(taskId=, addBlockedBy=[])  
TaskUpdate(taskId=, addBlockedBy=[])  
TaskUpdate(taskId=, addBlockedBy=[])  
TaskUpdate(taskId=, addBlockedBy=[])  


TaskUpdate(taskId=, status=)  
TaskUpdate(taskId=, status=)