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 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:

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

MVP PRD Generator

Use this template to turn a project idea into a compact PRD before composing the final UI implementation prompt.

Input

<!-- PROJECT_BACKGROUND_START --> {项目背景} <!-- PROJECT_BACKGROUND_END -->

Product Overview

• Product name:
• One-sentence pitch:
• Target platform:
• Primary user:

Problem

• Current pain:
• Why it matters:
• Existing alternatives/workarounds:

Target Users

MVP Scope

In Scope

• TBD

Out Of Scope

• TBD

Core User Flow

1. TBD 2. TBD 3. TBD

Screen List

Functional Requirements

UX/UI Considerations

• Information density:
• Empty/loading/error states:
• Responsive behavior:
• Accessibility:

Success Metrics

• Activation:
• Engagement:
• Conversion:
• Retention:

Open Questions

• TBD

Reference UI Design System Extraction

Use this template when analyzing one or more UI reference images. Be concrete: prefer exact colors, spacing, component states, and repeated visual decisions over generic adjectives.

Source Summary

• Reference set:
• Product category:
• Screens observed:
• Confidence level:

Visual Direction

• Overall mood:
• Layout density:
• Visual hierarchy:
• Brand personality:

Color Palette

Dark Mode Variants

If reference images show dark mode, capture concrete values. If dark mode is not present, write "not observed" and only provide inferred values when the user asks for a dark mode implementation.

Typography

Spacing And Layout

• Base spacing unit:
• Container widths:
• Grid behavior:
• Section rhythm:
• Mobile adaptations:

Components

Buttons

• Shape:
• Fill/stroke:
• Hover/focus:
• Disabled:

Cards

• Radius:
• Border:
• Shadow:
• Padding:

Forms

• Input height:
• Label style:
• Error state:
• Helper text:

Navigation

• Placement:
• Active state:
• Mobile behavior:

Motion

• Page transitions:
• Hover effects:
• Loading states:
• Timing/easing:

Accessibility Notes

• Contrast risks:
• Keyboard/focus requirements:
• Touch target constraints:

Implementation Notes

• Tailwind tokens:
• Reusable components:
• Assets/icons needed:
• Gotchas:

Implementation Prompt Template

Use this final template after the design system and PRD are ready.

Design System

<!-- PROJECT_DESIGN_GUIDE_START --> {项目设计指南} <!-- PROJECT_DESIGN_GUIDE_END -->

MVP PRD

<!-- PROJECT_MVP_PRD_START --> {项目MVP PRD} <!-- PROJECT_MVP_PRD_END -->

Task

Build implementation-ready UI that follows the design system and satisfies the MVP PRD. Create polished, production-quality screens rather than a marketing description.

Requirements

• Use the existing project stack when one exists.
• Use Tailwind CSS or the local styling system if available.
• Use lucide icons when iconography is needed and the dependency exists.
• Create realistic data, empty states, loading states, and error states.
• Keep text readable on mobile and desktop.
• Ensure focus states, contrast, keyboard navigation, and touch targets are

handled.

• Avoid generic centered layouts, default purple gradients, and interchangeable

card-heavy UI unless the design system explicitly calls for them.

Output Structure

• Create 3 mobile variations and 2 web variations unless the user explicitly

changes the variation scope.

• Aggregate all variations in a showcase/index page for comparison.
• Implement screens as separate components when the project supports it.
• Keep reusable UI primitives small and local unless the repository already has

a design system.

Verification

• Run the project's typecheck/build command if available.
• For browser UIs, open the result and inspect desktop and mobile viewport

screenshots when tooling is available.

• Report any skipped verification with the reason.