UI Designer Skill

npx degit daymade/claude-code-skills/ui-designer ~/.claude/skills/ui-designer

ui-designer is the reverse of generative design tools — instead of producing a UI, it looks at a UI you already love and decodes it.

The workflow

1. Drop a reference image — screenshot, mockup, design file
2. Extract the design system — colors as tokens, type scale, spacing, radii, component patterns, micro-interactions
3. Output a structured prompt — ready to paste into v0, Cursor, frontend-design, or any other implementation tool

What it gets right

• Color extraction is semantic (primary, surface, accent), not just hex
• Component-aware — recognizes buttons, cards, navs as patterns, not pixel grids
• Outputs a prompt, not code — keeps the implementation tool in the loop and avoids the “AI-generated React” tell

Where it shines

• Cloning a design vibe without copying source code
• Briefing a v0 / Cursor session — feed it a reference, paste the prompt, get an implementation
• Onboarding to a new design language — quickly understand a product’s visual rules

Composes with

• frontend-design — implement the prompt with opinionated taste
• web-artifacts-builder — bundle to single HTML
• theme-factory — apply the extracted tokens consistently

→ Install on GitHub

Use ui-designer on this screenshot of Linear's dashboard. Extract the
design system (color tokens, type scale, component patterns) and
produce an implementation prompt I can paste into v0 to build a
similar interface.