Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

UI Designer (Reference → Design System)

Extracts colors, typography, and component rules from reference UI screenshots, then produces a design system, PRD, and implementation-ready UI prompt.

Design & UIIntermediate★ 1,323⑂ 212AI score 8/10Last updated: Aug 8, 2026

What it does

Give it UI screenshots or mockups you like, and Claude runs a four-stage pipeline:

  1. Design system extraction: color palette (primary/secondary/accent/functional), font families, sizes and weights, button/card/input/icon styles, a 4–48dp spacing scale, animation durations and easing, plus dark mode variants — captured as concrete hex and px values.
  2. MVP PRD generation: from your project idea file, it interactively builds an elevator pitch, problem statement, target audience, USP, feature list with user stories, and per-screen UX notes.
  3. Final prompt composition: merges the design system and PRD into a single implementation-ready prompt, saved with a timestamp under documents/ux-design/.
  4. React check & build: greps package.json for React, suggests create-react-app + Tailwind + lucide-react if missing, then generates multiple design variations (3 mobile, 2 web) as separate components collected in a showcase page.

Who it's for

  • Anyone with good reference visuals but no systematic tokens, whose screens drift in tone
  • Solo developers and founders shipping MVP UIs without a designer
  • PMs who want several design directions side by side for comparison
  • Teams prototyping in React + Tailwind

Example uses

  • Match a SaaS dashboard mood: drop 5 shots into reference-images/saas-dashboard/, ask for a project management app in that style → design system file, PRD dialogue, then 3 mobile + 2 web variants implemented.
  • Redesign an existing app: feed both your own screenshots and a competitor's to document two design systems and decide which tokens to change.
  • Document design tokens: use only your existing screens to produce a color/type/spacing spec for team onboarding.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the ui-designer folder from the GitHub repo daymade/claude-code-skills into my ~/.claude/skills/ui-designer/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/ui-designer ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS, Git Bash or WSL on Windows).
  2. Clone the repo: git clone https://github.com/daymade/claude-code-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy this skill: cp -r claude-code-skills/ui-designer ~/.claude/skills/
  5. Confirm the assets/ folder came along with all three templates (design-system.md, app-overview-generator.md, vibe-design-template.md).
  6. Put your reference images in one folder (e.g. reference-images/my-ref/) and write your product idea into ideas/my-app.md.
  7. Start Claude Code in your project directory and ask: "Extract a design system from reference-images/my-ref and build the UI based on ideas/my-app.md".
  8. If you have no React project yet, run npx create-react-app my-app, then install Tailwind and lucide-react as prompted.
  9. The templates contain Chinese placeholders like {项目背景}; Claude substitutes them automatically, but you can localize the templates if the output feels off.
View source on GitHub ↗License: MIT