From ork
Extracts design DNA—colors, typography, spacing tokens, component patterns—from app screenshots, live URLs, or projects using Google Stitch. Outputs design-tokens.json, Tailwind config, or CSS vars for audits and design systems.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ork:design-context-extractsonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens.
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 https://example.com # From live URL
/ork:design-context-extract current project # Scan project's existing styles
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) │
│ → tailwind.config.ts │
│ → tokens.css (CSS variables) │
│ → Markdown spec │
└──────────────────────────────┘
INPUT = ""
TaskCreate(subject="Extract design context: {INPUT}", description="Extract design DNA")
# Determine input type
# "/path/to/file.png" → screenshot
# "http..." → URL
# "current project" → scan project styles
For screenshots: Read the image directly (Claude is multimodal).
For URLs:
# If stitch available: use get_screen + get_project
# If not: WebFetch the URL and analyze HTML/CSS
For current project:
Glob("**/tailwind.config.*")
Glob("**/tokens.css")
Glob("**/*.css") # Look for design token files
Glob("**/theme.*")
# Read and analyze existing style definitions
If stitch MCP is available:
# Use official Stitch MCP tools: get_screen, get_project, list_screens
# Returns structured design data: colors, typography, layout, 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
Extracted data structure:
{
"colors": {
"primary": { "hex": "#3B82F6", "oklch": "oklch(0.62 0.21 255)" },
"secondary": { "hex": "#10B981", "oklch": "oklch(0.69 0.17 163)" },
"background": { "hex": "#FFFFFF" },
"text": { "hex": "#1F2937" },
"muted": { "hex": "#9CA3AF" }
},
"typography": {
"heading": { "family": "Inter", "weight": 700 },
"body": { "family": "Inter", "weight": 400 },
"scale": [12, 14, 16, 18, 24, 30, 36, 48]
},
"spacing": {
"base": 4,
"scale": [4, 8, 12, 16, 24, 32, 48, 64]
},
"components": ["navbar", "hero", "card", "button", "footer"]
}
AskUserQuestion(questions=[{
"question": "Output format for extracted tokens?",
"header": "Format",
"options": [
{"label": "Tailwind config (Recommended)", "description": "tailwind.config.ts 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
}])
Write the extracted tokens in the chosen format. If the project already has tokens, show a diff of what's new vs existing.
ork:design-to-code — Full pipeline that uses this as Stage 1ork:design-system-tokens — Token architecture and W3C spec complianceork:component-search — Find components that match extracted patternsnpx claudepluginhub yonatangross/orchestkit --plugin orkExtracts design system from websites, HTML files, or screenshots into DESIGN.md via Playwright automation, HTML inspection, and visual analysis for UI consistency.
Reverse-engineers design systems from screenshots or live URLs, extracting colors, typography, spacing, component patterns, and layout structure for redesigns and audits.
Analyzes images, websites, and Figma files to extract design tokens, component inventory, and reconstruction notes. Outputs a design.md for replicating or auditing visual designs.