Claude Design System

Claude Design System

Build professional design systems from competitor inspiration using a systematic workflow.

STRICT RULE: No Emojis in UI Output

NEVER use emojis anywhere in generated UI code. No emoji in JSX, text content, labels, buttons, headings, placeholders, tooltips, or any rendered string. Use Lucide React icons instead when visual indicators are needed. This rule is non-negotiable.

STRICT RULE: Ask Before Building

NEVER skip the discovery phase. Before doing ANY work (extracting, merging, designing), ask the user questions to understand what they need. Do not assume. Do not jump straight into generating.

Discovery Phase (ALWAYS DO THIS FIRST)

Before any step in the workflow, gather context by asking the user:

For new projects (no existing /generated files):

1. What is your app? (name, purpose, who it's for)
2. What feeling/emotion should the app convey? (trust, energy, calm, playfulness, etc.)
3. What apps inspire you visually? (specific names — Airbnb, Notion, Stripe, Linear, etc.)
4. Do you have inspiration screenshots to analyze, or should we work from the app names you listed?
5. How many screens do you need designed? Which ones? (e.g., onboarding, dashboard, settings, profile)
6. What's the platform? (mobile-first, desktop, responsive)

For returning users (some /generated files exist):

Check which files exist (competitor-analysis.md, styles.md) to determine progress, then ask:

1. What screen do you want designed next?
2. How many variations do you want? (default is 3)
3. Any specific requirements for this screen? (specific components, states, interactions)

For design-it requests:

1. Which screen(s) do you want?
2. How many variations per screen? (default 3, can be 1-5)
3. Any constraints? (specific components to include, specific states to show, layout preferences)

Only proceed to the workflow steps AFTER the user has answered.

Setup

Before starting, ensure the project has:

• /inspiration folder — user adds screenshots from successful apps (e.g., airbnb-1.png, notion-2.png)
• /generated folder — output directory (create if missing)

If these don't exist, create them. If /inspiration is empty and the user wants to extract, ask them to add images first.

Workflow

Discovery Questions → Add inspiration images → extract-it → [expand-it] → merge-it → design-it

Step 1: Extract (extract-it)

Analyze inspiration images and extract design psychology.

Input: User's app description (from discovery) + images in /inspiration Output: /generated/competitor-analysis.md Details: See references/extract-it.md

Step 2: Expand (expand-it) — Optional

Deepen the analysis with philosophy sections and actionable implementation guidance.

Input: /generated/competitor-analysis.md Output: Appends to /generated/competitor-analysis.md Details: See references/expand-it.md

Step 3: Merge (merge-it)

Fuse competitor analysis with the user's specific app concept into a unified design system.

Input: User's app concept (from discovery) + /generated/competitor-analysis.md Output: /generated/styles.md Details: See references/merge-it.md

Step 4: Design (design-it)

Generate UI screen variations using the established design system.

Input: Screen description + number of variations (from discovery) + /generated/styles.md Output: React + Tailwind components (number of variations as specified by user) Details: See references/design-it.md

Workflow Patterns

Quick start: Discovery → Add images → extract-it → design-it Recommended: Discovery → Add images → extract-it → merge-it → design-it Deep understanding: Discovery → Add images → extract-it → expand-it → merge-it → design-it

Command Dispatch

Determine which step to execute based on the user's request:

• First time / vague request → Run discovery questions first, then guide through workflow
• Mentions extracting/analyzing inspiration images → Ask discovery questions if not answered, then extract-it (read references/extract-it.md)
• Mentions expanding/deepening analysis → expand-it (read references/expand-it.md)
• Mentions merging/adapting/creating unified system → Ask about app concept if not provided, then merge-it (read references/merge-it.md)
• Mentions generating/designing screens or UI → Ask which screens and how many variations, then design-it (read references/design-it.md)
• Unclear → Check which /generated files exist, ask clarifying questions