UI Designer

Overview

When to Use

• User provides UI screenshots, mockups, or design references
• Need to extract color palettes, typography, spacing from existing designs
• Want to generate design system documentation from visual examples
• Building MVP UI that should match reference aesthetics
• Creating multiple UI variations following consistent design principles

Workflow

Step 1: Gather Inputs

• Reference images directory: Path to folder containing UI screenshots/mockups
• Project idea file: Document describing the product concept and goals
• Existing PRD (optional): If PRD already exists, skip Step 3

Step 2: Extract Design System from Images

assets/design-system.md

• Analyze color palettes (primary, secondary, accent, functional colors)
• Extract typography (font families, sizes, weights, line heights)
• Identify component styles (buttons, cards, inputs, icons)
• Document spacing system
• Note animations/transitions patterns
• Include dark mode variants if present

documents/designs/{image_dir_name}_design_system.md

Step 3: Generate MVP PRD (if not provided)

assets/app-overview-generator.md

• Replace

  {项目背景}

  with content from project idea file
• The template guides through: elevator pitch, problem statement, target audience, USP, features list, UX/UI considerations

documents/prd/

Step 4: Compose Final UI Implementation Prompt

assets/vibe-design-template.md

• {项目设计指南}

  → Design system from Step 2

• {项目MVP PRD}

  → PRD from Step 3 or provided PRD file

• Design aesthetics principles
• Project-specific color/typography guidelines
• App overview and feature requirements
• Implementation tasks (multiple UI variations, component structure)

documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md

Step 5: Verify React Environment

find . -name "package.json" -exec grep -l "react" {} \;

npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

Step 6: Implement UI

• Create multiple design variations (3 for mobile, 2 for web)
• Organize as separate components:

  [solution-name]/pages/[page-name].jsx

• Aggregate all variations in showcase page

Template Assets

assets/design-system.md

• Color palette (primary, secondary, accent, functional, backgrounds)
• Typography (font families, weights, text styles)
• Component styles (buttons, cards, inputs, icons)
• Spacing system (4dp-48dp scale)
• Animations (durations, easing curves)
• Dark mode variants

assets/app-overview-generator.md

• Elevator pitch
• Problem statement and target audience
• Unique selling proposition
• Platform targets
• Feature list with user stories
• UX/UI considerations per screen

assets/vibe-design-template.md

• Aesthetic principles (minimalism, whitespace, color theory, typography hierarchy)
• Practical requirements (Tailwind CSS, Lucide icons, responsive design)
• Task specifications (multiple variations, component organization)

Best Practices

Image Analysis

• Read all images before starting analysis
• Look for patterns across multiple screens
• Note both explicit styles (colors, fonts) and implicit principles (spacing, hierarchy)
• Capture dark mode if present in references

Design System Extraction

• Be systematic: cover all template sections
• Use specific values (hex codes, px sizes) not generic descriptions
• Document the "why" for design choices when inferable
• Include variants (hover states, disabled states)

PRD Generation

• Engage user interactively to clarify ambiguities
• Suggest features based on problem understanding
• Ensure MVP scope is realistic
• Document UX considerations per screen/interaction

Output Organization

• Save design system with descriptive filename (based on image dir name)
• Save final prompt with timestamp for version tracking
• Keep all outputs in

  documents/

  directory for easy reference
• Preserve intermediate outputs for iteration

Example Usage

• reference-images/saas-dashboard/

  (5 screenshots)

• ideas/project-management-app.md

  (project concept)

1. Read 5 images from

   reference-images/saas-dashboard/

2. Use Task tool → design-system.md template → analyze images
3. Save to

   documents/designs/saas-dashboard_design_system.md

4. Use Task tool → app-overview-generator.md with project concept
5. Refine PRD through user interaction
6. Combine design system + PRD using vibe-design-template.md
7. Save to

   documents/ux-design/project-management-app_design_prompt_20251025_153000.md

8. Check React environment, inform user if setup needed
9. Implement UI using final prompt

Notes

• This is a high freedom workflow—adapt steps based on context
• Templates provide structure but encourage thoughtful analysis over rote filling
• User interaction during PRD generation is critical for quality
• Final prompt quality directly impacts UI implementation success
• Preserve all intermediate outputs for iteration and refinement