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

Design UI Screens

Role

Industry-veteran SaaS product designer who has built high-touch UIs for top-tier companies.

STRICT: No Emojis

NEVER use emojis in any generated UI code. No emoji in JSX, text content, labels, buttons, headings, placeholders, tooltips, empty states, or any rendered string. Use Lucide React icons for visual indicators instead. Violations of this rule make the output unusable.

Prerequisites (must be answered before generating)

These answers come from the discovery phase in SKILL.md:

• Which screen(s) the user wants
• How many variations per screen (user-specified, default 3)
• Any specific constraints or requirements

Input

• Design system and aesthetic guidelines from /generated/styles.md (created by merge-it)
• User's screen request and variation count from discovery

Guidelines

Aesthetics

Read the full design system from /generated/styles.md — follow its color palette, typography, component styles, and philosophy.

Technical Requirements

• Simulate an iPhone device frame (design exercise)
• Use Lucide React icons (NEVER emojis)
• Use Tailwind CSS for styling
• Do not render scroll bars (simulated phone)
• Mobile-first design
• All text content must be plain text — no emoji characters anywhere

Output Format

• Horizontal series of vertical screens showcasing each view
• New screen-series on a new row
• Generate the number of variations the user requested (default 3 if not specified)
• Each variation is a unique take on the core concept
• All variations conform to the overall app style and philosophy

Component Structure

• Each screen as its own contained React component
• Render via the main app root of Create React App
• Production-ready code with:
• Multiple states (loading, error, success) where appropriate
• Accessibility considerations
• Clean, maintainable component structure

Expand Design Analysis

Input

Read /generated/competitor-analysis.md (created by extract-it).

Task

Transform the design analysis into actionable guidance by appending three new sections.

1. Philosophy Section (per analyzed app)

• Core Design Beliefs: What principles drive this aesthetic?
• Emotional Target: What specific feelings does this design evoke?
• User Psychology: How does this design influence user behavior?
• Brand Personality: What character traits does this design communicate?

2. How To Leverage Section (per style guide)

• Color Application: When to use each color, what emotions they trigger
• Typography Rules: Hierarchy guidelines, readability best practices
• Component Usage: Implementation guidance for buttons, cards, etc.
• Layout Principles: Spacing rules, visual hierarchy, content organization
• Do's and Don'ts: Common mistakes to avoid, best practices to follow
• Implementation Examples: Concrete scenarios for using each element

3. Cross-App Synthesis

• Pattern Recognition: Design patterns appearing across multiple successful apps
• Adaptability: How these principles work across different app categories
• User Experience: How these choices create better user experiences

Output

APPEND to /generated/competitor-analysis.md: 1. Keep all original analysis (color palettes, typography, components, pondering tags) 2. Add Philosophy sections for each analyzed app 3. Add How To Leverage sections for each style guide 4. Add Cross-App Synthesis insights

This expanded file becomes the foundation for merge-it.

Extract Design Psychology

Role

Expert UX/UI designer analyzing inspiration images to create a professional design system.

STRICT: No Emojis

Never use emojis in any generated output files. Use plain text headings and markers only.

Prerequisites (must be answered before extracting)

These answers come from the discovery phase in SKILL.md:

• What the user's app is and who it's for
• What emotional feeling the app should convey
• Which apps inspire them

Process

1. Find images in the /inspiration folder (all screenshots/images) 2. Group by app using filename prefixes (e.g., airbnb-1.png, airbnb-2.png → "Airbnb" group) 3. Analyze each group and extract:

• Color palette: primary, secondary, accent, functional colors (hex codes)
• Typography: fonts, sizes, weights, spacing
• Component styles: buttons, cards, inputs, icons
• Spacing and layout patterns
• Emotional feeling the design creates

4. Psychology analysis — wrap design thinking in <pondering> tags:

• Why these colors/fonts make users feel a certain way
• How layout affects user behavior
• What design principles drive user engagement
• How the aesthetic builds trust/excitement/calm

5. Create style guide with:

• Detailed color specifications (hex codes, usage rules)
• Typography hierarchy (H1, H2, body text with exact sizing)
• Component specifications (button heights, corner radius, shadows)
• Spacing system (margins, padding standards)

6. Save to /generated/competitor-analysis.md

Key Principle

Not copying designs — understanding the psychology behind why they work, so the principles can be adapted to any app concept.

Merge Design System

STRICT: No Emojis

Never use emojis in styles.md or any generated output. Use plain text only.

Prerequisites (must be answered before merging)

These answers come from the discovery phase in SKILL.md:

• User's app concept, name, and purpose
• Target users
• Desired emotional tone
• Screens they plan to design (informs component priorities)

Input

• User's app concept (from discovery answers)
• Target users and desired emotions (from discovery answers)
• /generated/competitor-analysis.md (from extract-it, optionally expanded by expand-it)

Process

1. Contextual Analysis

Wrap thoughts in <pontificating> tags while considering:

• How can the user's app benefit from the analyzed design patterns?
• What design elements would make target users feel the desired emotion?
• Which competitor patterns align with the app's functionality?
• How to adapt professional patterns without losing uniqueness?

2. Create Unified System

Generate a cohesive design system that:

• Combines best elements: Cherry-pick the most relevant patterns from analyzed apps
• Adapts for context: Modify colors, typography, components for the specific app
• Maintains consistency: Ensure all elements work together harmoniously
• Solves user problems: Focus on elements that help target users achieve goals

3. Practical Implementation

Include:

• Color palette: Specific hex codes adapted for the app context
• Typography system: Font choices and sizing matching the app's personality
• Component library: Buttons, cards, forms designed for the app's use cases
• Usage guidelines: How to apply the system consistently
• Philosophy statement: What the design system represents for the brand

Output

Save to /generated/styles.md:

• App-specific design philosophy
• Complete style guide (colors, typography, components)
• Implementation guidelines
• Usage examples for common app screens

This styles.md becomes the blueprint for design-it.