UI Designer

Overview

This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.

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

Request from user:

• 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

Use Task tool with general-purpose subagent, providing:

Prompt template from 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

Attach reference images to the subagent context.

Output: Complete design system markdown following the template format

Save to: documents/designs/{image_dir_name}_design_system.md

Step 3: Generate MVP PRD (if not provided)

Use Task tool with general-purpose subagent, providing:

Prompt template from 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

Interact with user to refine and clarify product requirements

Output: Structured PRD markdown

Save as variable for Step 4 (optionally save to documents/prd/ )

Step 4: Compose Final UI Implementation Prompt

Combine design system and PRD using assets/vibe-design-template.md :

Substitutions:

• {项目设计指南} → Design system from Step 2

• {项目MVP PRD} → PRD from Step 3 or provided PRD file

Result: Complete, implementation-ready prompt containing:

• Design aesthetics principles

• Project-specific color/typography guidelines

• App overview and feature requirements

• Implementation tasks (multiple UI variations, component structure)

Save to: documents/ux-design/{idea_file_name}design_prompt{timestamp}.md

Step 5: Verify React Environment

Check for existing React project:

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

If none found, inform user:

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

Use the final composed prompt from Step 4 to implement UI in React project.

The prompt instructs to:

• 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

Template for extracting visual design patterns. Includes sections for:

• 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

Use this template when analyzing reference images to ensure comprehensive design system coverage.

assets/app-overview-generator.md

Template for collaborative PRD generation. Guides through:

• Elevator pitch

• Problem statement and target audience

• Unique selling proposition

• Platform targets

• Feature list with user stories

• UX/UI considerations per screen

Designed for interactive refinement with user to clarify requirements.

assets/vibe-design-template.md

Final implementation prompt template combining design system and PRD. Includes:

• Aesthetic principles (minimalism, whitespace, color theory, typography hierarchy)

• Practical requirements (Tailwind CSS, Lucide icons, responsive design)

• Task specifications (multiple variations, component organization)

This template produces prompts ready for UI implementation without further modification.

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

User provides:

• reference-images/saas-dashboard/ (5 screenshots)

• ideas/project-management-app.md (project concept)

Execute workflow:

• Read 5 images from reference-images/saas-dashboard/

• Use Task tool → design-system.md template → analyze images

• Save to documents/designs/saas-dashboard_design_system.md

• Use Task tool → app-overview-generator.md with project concept

• Refine PRD through user interaction

• Combine design system + PRD using vibe-design-template.md

• Save to documents/ux-design/project-management-app_design_prompt_20251025_153000.md

• Check React environment, inform user if setup needed

• 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