npx claudepluginhub yonatangross/orchestkit --plugin orkThis skill is limited to using the following tools:
Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens.
Extracts design system from websites, HTML files, or screenshots into DESIGN.md via Playwright automation, HTML inspection, and visual analysis for UI consistency.
Extracts design systems from websites via Playwright CLI: colors, typography, spacing, shadows. Generates Tailwind config, shadcn/ui & React themes, Figma vars, CSS tokens.
Reverse-engineers design systems from screenshots or live URLs, extracting colors, typography, spacing, component patterns, and layout structure for redesigns and audits.
Share bugs, ideas, or general feedback.
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 patterns