ui-designer

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

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

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

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

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

Documentation

Documentation

UI Designer

Overview

When to Use

Workflow

Step 1: Gather Inputs

Step 2: Extract Design System from Images

Step 3: Generate MVP PRD (if not provided)

Step 4: Compose Final UI Implementation Prompt

Step 5: Verify React Environment

Step 6: Implement UI

Template Assets

assets/design-system.md

assets/app-overview-generator.md

assets/vibe-design-template.md

Best Practices

Image Analysis

Design System Extraction

PRD Generation

Output Organization

Example Usage

Notes

Documentation

ui-designer

Documentation

UI Designer

Overview

When to Use

Workflow

Step 1: Gather Inputs

Step 2: Extract Design System from Images

Step 3: Generate MVP PRD (if not provided)

Step 4: Compose Final UI Implementation Prompt

Step 5: Verify React Environment

Step 6: Implement UI

Template Assets

assets/design-system.md

assets/app-overview-generator.md

assets/vibe-design-template.md

Best Practices

Image Analysis

Design System Extraction

PRD Generation

Output Organization

Example Usage

Notes