前端设计评审 是做什么的？
根据设计质量标准及你的设计系统审查 UI 实现，或从零开始创建与众不同的、可投入生产的前端界面。
两种模式
模式 1：设计审查
评估现有 UI 是否符合设计系统合规性、三个质量支柱（无摩擦、品质工艺、可信赖）、可访问性及代码质量。
模式 2：创意前端设计
创建与众不同的界面，避免通用的“AI 垃圾”美学，具有清晰的概念方向，并精确执行。
创意前端设计
在编码之前，确定审美方向：
- 目的：这个方案解决什么问题？谁会使用它？
- 基调：极简、极繁、复古未来、有机、奢华、俏皮、编辑风、粗野主义、装饰艺术、柔和/粉彩、工业风等。
- 约束条件：框架、性能、可访问性要求。
- 差异化：是什么让这个方案与众不同且符合上下文？
美学指南
- 排版：使用能提升美感的独特字体。将展示字体与精良的正文字体配对。避免使用 Inter、Roboto、Arial、Space Grotesk。
- 色彩与主题：使用 CSS 变量保持配色协调。主导色彩 + 锐利强调色 > 谨慎、均匀分布的调色板。
- 动效：优先使用纯 CSS。一个精心编排的页面加载（包含交错显示的效果）优于零散的微交互。
- 空间构图：不对称、重叠、对角线布局、打破网格的元素、大量留白或可控的密集感。
- 背景：渐变网格、噪点纹理、几何图案、层次化的透明度、戏剧性阴影、颗粒覆盖层。
避免：过度使用的字体、陈旧的配色方案、可预测的布局、缺乏上下文特色的千篇一律设计。
实现的复杂度要与愿景匹配。极繁主义 = 复杂的代码。极简主义 = 克制与精确。
设计审查
设计系统工作流
实施前：
- 在 Storybook / 组件库中查看组件的 API 和用法
- 使用 Figma Dev 模式获取精确规格（间距、令牌、属性）
- 使用设计系统组件 + 设计令牌实施
审查期间：
- 将实现与 Figma 设计进行比对
- 验证是否使用了设计令牌（而非硬编码值）
- 检查所有变体/状态是否正确实现
- 标记偏差（需要设计方批准）
如果组件不存在：
- 检查现有组件是否可以适配
- 与设计方沟通创建新组件
- 在代码中记录例外情况及理由
审查流程
- 确定用户任务
- 检查设计系统是否存在匹配模式
- 评估审美方向
- 确定范围（组件、功能或流程）
- 评估每个支柱
- 打分并排定问题优先级（阻塞/主要/次要）
- 提供建议并附上设计系统示例
核心原则
- 任务完成：最少点击次数。每个屏幕都应回答“我能做什么？”和“接下来会发生什么？”
- 操作层级：每个视图 1-2 个主要操作。次要操作采用渐进式披露。
- 新手引导：在引入时解释功能。优先使用智能默认值而非配置。
- 导航：清晰的进入/退出点。返回/取消始终可用。深层流程提供面包屑导航。
质量支柱
1. 无摩擦洞察到行动
评估点： 任务能否在 ≤3 次交互内完成？主要操作是否明确且唯一？
危险信号： 点击次数过多、多个竞争性主要按钮、操作隐藏过深、死胡同。
2. 品质即工艺
评估点：
- 设计系统合规性：与 Figma 规格匹配，使用设计令牌
- 审美方向：独特的排版、协调的色彩、有意的动效
- 可访问性：最低 C 级（WCAG 2.1 A 级），理想 B 级（WCAG 2.1 AA 级）
危险信号： 通用的 AI 美学、硬编码值、实现与 Figma 不符、重新流布局损坏、缺少焦点指示器。
3. 可信赖构建
评估点：
- AI 透明度：AI 生成内容需要免责声明
- 错误透明度：可操作的错误消息
危险信号： 缺少 AI 免责声明、未提供指导的模糊错误。
审查输出格式
有关完整的审查模板，请参阅 references/review-output-format.md。
审查类型修饰符
有关特定上下文的审查重点领域（PR、创意、设计、可访问性），请参阅 references/review-type-modifiers.md。
快速检查清单
有关涵盖设计系统合规性、审美质量、无摩擦、品质工艺和可信赖构建的批准前检查清单，请参阅 references/quick-checklist.md。
模式示例
有关创意前端和设计系统审查工作的好/坏示例，请参阅 references/pattern-examples.md。
致谢
创意前端原则灵感来源于 Anthropic 的前端设计技能。设计审查原则和质量支柱框架由 @Quirinevwm 创建。