prototype-review

name	prototype-review
description	Provide comprehensive design feedback on prototypes, wireframes, and mockups with actionable insights

Prototype Review & Feedback

Purpose

Provide comprehensive, actionable design feedback on prototypes, wireframes, and mockups to improve user experience, visual quality, and design consistency.

Capabilities

🎯 Tier 1: Foundation

Basic Design Review

Provide essential design feedback on prototypes and mockups:

• Visual Hierarchy: Evaluate information architecture and visual priority
• Layout & Spacing: Check alignment, balance, and whitespace usage
• Typography: Assess font choice, size, weight, and readability
• Color Usage: Review color palettes, contrast, and accessibility
• User Flow: Analyze navigation patterns and interaction clarity
• Component Consistency: Identify inconsistencies in component usage
• Basic Usability: Catch obvious usability issues and friction points

Example:

"Review this mobile app prototype for a fitness tracking app and provide feedback on:
1. Visual hierarchy and layout balance
2. Typography readability and hierarchy
3. Color scheme and accessibility
4. Navigation flow and clarity
5. Any obvious usability issues
6. Consistency of component usage"

[Attach prototype or provide Figma link]"

---

🚀 Tier 2: Advanced

Comprehensive Design Analysis

Deep dive into design quality and user experience:

• Interaction Design: Evaluate micro-interactions, animations, and feedback
• Accessibility Audit: Check WCAG compliance and inclusive design
• Responsive Design: Review breakpoints, mobile adaptation, and cross-device consistency
• Design System Alignment: Verify compliance with design system components and tokens
• Psychological Principles: Apply Gestalt principles, cognitive load theory, and heuristics
• Competitive Analysis: Compare with industry best practices and competitors
• Quantitative Feedback: Provide prioritized, actionable recommendations with severity ratings
• Design Patterns: Identify design patterns and suggest improvements or alternatives

Example:

"Conduct a comprehensive design review of our e-commerce checkout flow. Analyze:
1. All interaction states (hover, focus, active, disabled)
2. WCAG accessibility compliance (color contrast, keyboard navigation, screen readers)
3. Responsive design across mobile, tablet, and desktop
4. Alignment with our design system components and tokens
5. Application of UX heuristics and design principles
6. Competitive benchmarks with top 3 e-commerce sites
7. Prioritized list of improvements with severity ratings (critical, high, medium, low)
8. Specific recommendations for improving conversion rates"

---

🌟 Tier 3: Anticipatory

Strategic Design Leadership

Lead design strategy and drive design excellence across products:

• Design Metrics Integration: Define and track design quality metrics (success rate, time-on-task, error rates)
• A/B Test Planning: Design A/B test variants and success metrics
• User Research Synthesis: Integrate user research findings into design recommendations
• Design System Evolution: Identify opportunities to extend or improve the design system
• Design Debt Analysis: Quantify design debt and create remediation roadmaps
• Cross-Product Consistency: Ensure design consistency across multiple products and touchpoints
• Design Operations: Create workflows, processes, and tools for systematic design review
• Team Design Maturity: Assess and improve team design capabilities and processes

Example: `` "We're launching a new product line and need comprehensive design leadership. Help me:

1. Define design quality KPIs and establish measurement baseline
2. Create a design review workflow that ensures consistent quality
3. Analyze design debt across our existing products and create a remediation roadmap
4. Design A/B test variants for our key conversion funnel (4 variants, 3 success metrics)
5. Synthesize user research findings into actionable design improvements
6. Identify gaps in our design system and create a plan to fill them
7. Establish cross-product design consistency guidelines
8. Assess our team's design maturity and create a capability-building plan
9. Build a design ops toolkit for systematic design review and improvement"

---

## Integration

**Works Best With:**
- `design-system`: Review prototypes against design system components
- `asset-optimization`: Recommend asset optimizations during review
- `user-research`: Validate design decisions with research findings
- `style-guide-generator`: Generate style guides from reviewed prototypes

**Designer Pack Skills:**
- `design-system` ← Design system alignment
- `prototype-review` ← You are here
- `asset-optimization` ← Asset optimization recommendations
- `style-guide-generator` ← Generate style guides from prototypes
- `design-trend-analyzer` ← Apply trend insights to feedback
- `user-research` ← Validate with user research
- `handoff-manager` ← Prepare prototypes for development handoff

---

## Best Practices

### ✅ DO:
- Be specific and actionable: Provide concrete, implementable recommendations
- Prioritize feedback: Rank issues by severity and impact
- Explain the "why": Help designers understand the rationale behind feedback
- Consider constraints: Account for technical, business, and timeline constraints
- Reference best practices: Cite design principles, heuristics, and research
- Focus on users: Always tie feedback back to user needs and goals
- Collaborate: Frame feedback as a collaborative exploration, not criticism

### ❌ DON'T:
- Be subjective without rationale: Back up opinions with design principles
- Ignore context: Consider the product, audience, and goals
- Overwhelm: Prioritize the most impactful issues first
- Design by committee: Avoid making design decisions during review
- Neglect accessibility: Accessibility is a baseline requirement, not an add-on
- Skip positive feedback: Recognize what's working well
- Ignore constraints: Provide realistic solutions that can actually be implemented

---

## Common Mistakes

1. **Providing vague feedback**: "Make it pop" is not actionable
2. **Ignoring accessibility**: Accessibility is not optional
3. **Designing instead of reviewing**: The goal is feedback, not redesign
4. **Focusing on aesthetics over usability**: Visuals matter, but UX is primary
5. **Not prioritizing**: Not all issues are equal—rank by severity
6. **Ignoring constraints**: Recommendations must be implementable
7. **Neglecting positive feedback**: Reinforce good design decisions

---

## Quick Commands

### Get Started:
- "Review this prototype for usability issues"
- "Provide feedback on this mobile app design"
- "Check this design for accessibility compliance"

### Advanced:
- "Conduct a comprehensive design review of [product]"
- "Analyze this design for WCAG compliance and provide a remediation plan"
- "Compare this design with [competitor] and identify improvement opportunities"

### Expert:
- "Create a comprehensive design review workflow for our team"
- "Define design quality KPIs and measure our current baseline"
- "Design an A/B test strategy for improving conversion rates on [key flow]"

---

## Example Workflows

### Workflow 1: Quick Prototype Review
1. Review prototype for visual hierarchy and layout
2. Check typography, color, and spacing
3. Evaluate navigation flow and clarity
4. Identify obvious usability issues
5. Provide prioritized list of improvements (critical, high, medium, low)
6. Deliver feedback with specific, actionable recommendations

### Workflow 2: Comprehensive Design Audit
1. Analyze all interaction states and flows
2. Conduct WCAG accessibility audit
3. Review responsive design across all breakpoints
4. Verify alignment with design system
5. Apply UX heuristics and design principles
6. Benchmark against competitors and best practices
7. Provide prioritized, actionable recommendations with severity ratings
8. Create improvement roadmap with timeline and effort estimates

### Workflow 3: Strategic Design Review
1. Define design quality KPIs and baseline metrics
2. Conduct comprehensive design review with metrics
3. Identify design debt and create remediation roadmap
4. Design A/B test variants with success metrics
5. Synthesize user research findings into recommendations
6. Identify design system gaps and improvement opportunities
7. Establish cross-product design consistency
8. Build design ops toolkit and workflows for ongoing improvement

---

## Success Criteria

✅ **Tier 1 Success**: Designers receive actionable feedback and prototypes improve
✅ **Tier 2 Success**: Comprehensive design audits reveal opportunities and improve quality metrics
✅ **Tier 3 Success**: Design quality is systematically measured and improved across all products

---

## Session Requirements

- **Minimum Session**: session-16
- **Recommended Session**: session-17 for Tier 2, session-18+ for Tier 3
- **Prerequisites**: Strong understanding of UX design principles, accessibility standards, and design systems