frontend-design-review

前端设计评审

根据设计质量标准和设计系统评审 UI 实现，或从零开始创建独具特色、可用于生产环境的前端界面。

两种模式

模式 1：设计评审

评估现有 UI 是否符合设计系统、三大质量支柱（无摩擦、精工细作、值得信赖）、无障碍和代码质量要求。

模式 2：创意前端设计

创建独具特色的界面，避免千篇一律的“AI 垃圾”风格，明确概念方向，并精准执行。

---

创意前端设计

编写代码前，先确定美学方向：

• 目标：要解决什么问题？谁会使用？
• 基调：极简、繁复、复古未来主义、有机、奢华、活泼、编辑风、粗野主义、装饰艺术、柔和／粉彩、工业风等。
• 约束：框架、性能、无障碍要求。
• 差异化：有哪些特色，且适合当前场景？

美学指南

• 字体排印：选择能提升美感的独特字体。将展示字体与精致的正文字体搭配。避免使用 Inter、Roboto、Arial、Space Grotesk。
• 色彩与主题：使用 CSS 变量构建协调的配色。以主导色搭配醒目的强调色，胜过谨慎且分布均匀的配色。
• 动效：优先使用纯 CSS 动效。与其零散地加入微交互，不如精心编排页面加载过程中的分段渐显效果。
• 空间构图：采用非对称、重叠、对角流线、打破网格的元素、大量留白，或受控的密集布局。
• 背景：使用渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、颗粒叠加。

避免：过度使用的字体、陈词滥调的配色方案、可预测的布局，以及缺少场景专属个性的模板化设计。

让实现复杂度与设计愿景相匹配。繁复设计需要精细的代码，极简设计则讲究克制与精准。

---

设计评审

设计系统工作流

实施前：

1. 在 Storybook／组件库中查看组件，了解其 API 和用法
2. 使用 Figma Dev Mode 获取精确规格（间距、令牌、属性）
3. 使用设计系统组件和设计令牌进行实现

评审期间：

1. 将实现与 Figma 设计进行比较
2. 确认使用了设计令牌（而非硬编码值）
3. 检查所有变体／状态是否均已正确实现
4. 标记偏差（需获得设计审批）

如果组件不存在：

1. 检查能否调整现有组件
2. 联系设计团队创建新组件
3. 在代码中记录例外情况及原因

评审流程

1. 确定用户任务
2. 检查设计系统中是否有匹配的模式
3. 评估美学方向
4. 确定范围（组件、功能或流程）
5. 评估各项支柱
6. 对问题评分并排序（阻塞／主要／次要）
7. 结合设计系统示例提供建议

核心原则

• 完成任务：尽量减少点击次数。每个屏幕都要回答“我能做什么？”和“接下来会发生什么？”
• 操作层级：每个视图提供 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，了解完整的评审模板。

评审类型修饰项

请参阅 references/review-type-modifiers.md，了解针对具体情境的评审重点（PR、创意、设计、无障碍）。

快速检查清单

请参阅 references/quick-checklist.md，查看审批前检查清单，涵盖设计系统合规性、审美质量、无摩擦体验、精良工艺和可信赖性支柱。

模式示例

请参阅 references/pattern-examples.md，了解创意前端和设计系统评审工作的正反示例。

---

致谢

创意前端原则的灵感来自 Anthropic 的 frontend-design 技能。设计评审原则和质量支柱框架由 @Quirinevwm 创建，用于系统化 UI 评估。