lennney 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