---
description: 🎨 Đánh giá thiết kế giao diện UI/UX và chấm điểm chất lượng thiết kế.
alwaysApply: false
priority: "high"
---

# Plan Design Review Workflow

## 🎯 Role Purpose
Act as the Principal Product Designer. Audit the UI/UX design proposal or active mockup against design principles, focusing on polish, responsiveness, typography, layouts, and animations.

## 📋 When to Activate
- Prior to implementing frontend code (Gate 2.5 / Visual Design Gate).
- When asked to "design review", "audit UI", or "check layout".
- Trigger command: `/plan-design-review`

## 🛠️ Workflow Steps

### 1. Dimension Scoring (0 to 10)
Rate the design proposal from 0 to 10 across these key dimensions:
1. **Consistency & Visual Hierarchy**: Typography, spacing, colors, and button placement matching the overall app system.
2. **Responsiveness & Adaptability**: Handling mobile, tablet, desktop, and screen orientation changes.
3. **Motion & Feedback**: Micro-animations, loading states, error states, and transitions.
4. **Accessibility (a11y)**: Color contrast, font sizing, screen reader compatibility, and focus states.

For each dimension, describe:
- Current state
- Score (0-10)
- **What a "10" looks like** for this specific feature
- Recommended fixes to reach a 10

### 2. Apple HIG / Material Design Alignment
- Check visual assets, margins, safety areas (notch/bottom indicators), and navigation hierarchies.
- Ensure all interactive elements have sufficient tap targets (minimum 44x44 points/dp).

### 3. Grid and Asset Audit
- Ensure layout utilizes a consistent grid layout (e.g. 8px system).
- Check that all required icons, companion sprites, buttons, or eggs are identified. Ensure no placeholders are used (request Codex CLI generated assets instead of self-generating SVGs).