design-context-extract - Extract Design Tokens from Screenshots or URLs
Extract design tokens including colors, fonts, spacing, and components from screenshots or URLs
Tags
Updated: 2026-06-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Read image
- Fetch URL
- Extract colors
- Extract fonts
- Extract spacing
- Extract components
- Generate tokens
- Generate Tailwind config
- Generate CSS variables
- Generate Markdown spec
Inputs
- Screenshot file
- Web URL
- Project styles
Outputs
- Design tokens file
- Tailwind config file
- CSS variables file
- Markdown spec
Requirements
- Multimodal model
- Claude Code 2.1.183+
- Optional: Google Stitch MCP server