Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

UI Designer (Reference → Design System)

Turns reference UI screenshots into a documented design system, an MVP PRD, and an implementation-ready UI prompt for React + Tailwind.

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

What it does

  • Reads a folder of reference UI screenshots/mockups and produces a design system document: color palette, typography scale, button/card/input/icon styles, a 4–48dp spacing system, animation timings, and dark-mode variants.
  • Uses your project-idea file to interactively draft an MVP PRD (elevator pitch, problem statement, audience, USP, feature list with user stories, per-screen UX notes).
  • Merges design system + PRD into a single implementation-ready UI prompt, checks for an existing React project, then builds multiple variations (3 mobile, 2 web) as separate components plus a showcase page.
  • Saves every artifact under documents/designs and documents/ux-design with timestamps for version tracking.

Who it's for

  • Indie developers and founders who want UI that matches the look and feel of a product they admire.
  • Frontend developers shipping an MVP without a designer, on React + Tailwind CSS + Lucide icons.
  • Teams that want a written, consistent design spec across many screens.

Example uses

  1. Drop 5 SaaS dashboard screenshots into reference-images/saas-dashboard/ and ask for a project-management app UI in that style — you get the design system, PRD, and final prompt in sequence.
  2. Provide 3 competitor app captures and ask only for extracted colors, fonts, and spacing as a design system doc.
  3. Already have a PRD? Pass the file to skip step 3 and jump straight to generating 3 mobile and 2 web UI variations.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/daymade/claude-code-skills/HEAD/ui-designer/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

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 in your working directory.
  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 the skill: cp -r claude-code-skills/ui-designer ~/.claude/skills/
  5. Verify that ~/.claude/skills/ui-designer/assets/ contains design-system.md, app-overview-generator.md, and vibe-design-template.md.
  6. Restart Claude Code, prepare a reference-image folder and an idea document, then ask: "Extract a design system from these screenshots and build the UI."
  7. If you have no React project yet, run the suggested npx create-react-app plus Tailwind CSS and lucide-react setup commands first.
View source on GitHub ↗License: MIT