critique

必须进行的准备工作

用户通过 /critique 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，则必须先加载 $setup。此外，还要了解：界面要实现什么目标。

---

进行全面的设计评审，评估界面是否真正好用——不仅是技术层面，还包括作为一种设计体验是否有效。请像设计总监给出反馈那样思考。

查阅层级检查清单，了解灰度测试、操作优先级以及标签与数值的处理方式。 查阅文本层级与可读性，了解行长、行高、基线、对齐方式以及标题的克制使用。 查阅认知负荷，了解工作记忆限制和 8 项检查清单。 评估常见交互模式、目标尺寸、焦点处理和覆盖层行为时，请查阅交互设计。 当界面依赖站内搜索、命令面板、自动建议、结果相关性或无结果恢复机制时，请查阅搜索与可发现性。 评审涉及旧系统、新旧衔接、迁移候选项或高风险运营工作流时，请查阅旧系统现代化。 查阅AI 垃圾内容检测，了解汇总后的反模式列表。 评估主操作、次要操作和第三级操作时，请查阅操作层级。 颜色承载含义时，请查阅语义色彩。 评估边框、卡片的使用、重叠或背景变化决策时，请查阅表面分隔。 当截图、图标和媒体影响可读性或精致度时，请查阅图像处理。

将共享的 frontend-design 参考资料视为层级、可读性和认知负荷原则的权威依据，然后让此技能专注于评估、评分和优先级排序。

当空状态与评审相关时，请通过 empty-state 的思路评估零数据界面本身；通过 onboard 的思路评估更广泛的激活、顿悟时刻和首次使用引导。

阶段 1：设计评审

从以下维度评估界面：

1. AI 垃圾内容检测（关键）

这是最重要的检查。 这看起来是否像 2024—2025 年所有其他 AI 生成的界面？

根据 frontend-design 技能中的所有 DON'T 指南以及 AI 垃圾内容检测参考资料，检查设计——这些都是 AI 生成作品的特征。检查 AI 配色方案、渐变文字、带发光点缀的深色模式、玻璃拟态、主视觉区指标布局、千篇一律的卡片网格、通用字体，以及其他所有明显特征。

判断标准：如果你告诉别人“这是 AI 做的”，对方会立刻相信吗？如果会，这就是问题所在。

2. 视觉层级

• 视线是否会首先落在最重要的元素上？
• 是否有明确的主要操作？能否在 2 秒内找到它？
• 真正重要的内容是否足够突出，还是强调程度过于平均，以至于没有任何内容令人印象深刻？（冯·雷斯托夫效应）
• 尺寸、颜色和位置是否正确传达了重要程度？
• 权重本应不同的元素之间是否存在视觉竞争？
• 即使想象屏幕是灰度显示，层级关系是否依然清晰？
• 区块标题是否比其引出的内容更弱化，还是抢了内容的焦点？
• 操作层级是否已被拉平，导致多个按钮看起来同样紧急？

3. 信息架构与认知负荷

请参阅 cognitive-load，了解工作记忆规则和 8 项检查清单

• 结构是否直观？新用户能否理解其组织方式？
• 相关内容是否按逻辑分组？
• 常见模式的行为是否符合用户已有预期？检查导航、搜索、表格、筛选器、表单、标签页、下拉菜单、分页和设置，确认是否存在不必要的新颖设计。
• 是否通过默认值、预填内容和指导将可避免的复杂性转移到系统中，还是把复杂性丢给用户手动处理？（特斯勒定律）
• 是否一次提供了过多选择？统计每个决策点上可见的选项数量——如果 >4 项，请标记
• 导航是否清晰且可预测？
• 如果有搜索功能，它能否理解意图、同义词、拼写错误和可能的目标位置，还是会因用户不了解内部术语而惩罚他们？
• 在新旧系统混用的流程中，是否有一个脆弱的步骤就让整个产品显得不可靠或不一致？
• 渐进式披露：是否只在需要时才展示复杂性，还是一开始就全部呈现给用户？
• 根据参考资料运行 8 项认知负荷检查清单。报告未通过的项数：0–1 = 低（良好），2–3 = 中等，4+ = 严重。

4. 情感历程

• 这个界面会唤起什么情绪？这是有意为之的吗？
• 是否符合品牌个性？
• 它给人的感觉是否值得信赖、平易近人、高端、活泼——或其他应有的感觉？
• 目标用户会觉得“这是为我打造的吗”？
• 高频交互的响应是否足够快，能保持流程顺畅，还是反复等待不断打断注意力？（多尔蒂阈值）
• 峰终定律：最强烈的时刻是否积极？体验的结尾是否良好（确认、庆祝、明确的下一步）？
• 情绪低谷：检查是否存在令人沮丧的引导流程、陡峭的错误障碍、功能发现缺口，或高风险时刻（付款、删除、提交）带来的焦虑峰值
• 在负面时刻进行干预：是否在用户可能感到沮丧或焦虑的地方提供了设计干预？（进度指示器、安抚文案、撤销选项、社会认同）

5. 可发现性与可供性

• 交互元素是否显而易见？
• 用户是否无需说明就知道该怎么做？
• 主要和高频操作目标是否足够大、彼此距离是否足够近，以便用户放心操作，尤其是在触控设备上？
• 强大功能是否配备了与其风险相称的防护措施——权限、预览、撤销、确认、历史记录或明确说明后果的文案？
• 悬停和焦点状态是否提供了有用的反馈？
• 是否有应该更加醒目的隐藏功能？

6. 构图与平衡

• 布局是否平衡，还是让人感觉重心不适？
• 留白是经过刻意设计的，还是仅仅剩余的空间？
• 间距和重复元素之间是否有视觉节奏？
• 不对称是经过设计的，还是无意造成的？
• 组与组之间的空间是否大于组内空间，还是组边界不够明确？
• 边框是否承担必要的结构作用，还是只是在弥补间距或背景对比度不足？
• 卡片、阴影、叠加和背景变化是否采用了明确的区分策略，还是多种方法堆叠在一起，造成视觉混乱？

7. 排版作为沟通方式

• 字体层级是否清楚地提示了先读什么、再读什么、最后读什么？
• 正文是否易于阅读？（行长、间距、字号）
• 字体选择是否强化了品牌／语气？
• 标题层级之间的对比是否足够？
• 是否有太多几乎相同的字号，以至于看不出真正的字号体系？
• 行高是否与行长相匹配，还是较长的段落显得拥挤？
• 区块标题在视觉上是否过于醒目，不符合其作用？
• 链接是否因颜色而过于抢眼，而采用字重、下划线或悬停样式会更为克制？
• 需要扫描数字进行比较时，数字列是否对齐？

8. 有目的地使用颜色

• 使用颜色是为了传达信息，而不只是装饰吗？
• 调色板是否协调一致？
• 强调色是否将注意力引向正确的内容？
• 色彩搭配是否适合色盲用户？（不只是技术上可用，含义是否仍能传达？）
• 使用染色背景时，文字颜色是否合适，还是出现了褪色的灰字配彩色背景？
• 是否有太多临时拼凑的色调，导致调色板缺乏系统性？

9. 状态与边缘情况

• 空状态：是否引导用户采取行动，还是只说“这里什么都没有”？
• 加载状态：是否能缩短用户感受到的等待时间？
• 表单和搜索是否能妥善接受无害的输入差异，还是会因为本可规范化的格式细节而拒绝用户？（Postel 定律）
• 错误状态：是否实用且不归咎于用户？
• 成功状态：是否予以确认并引导用户进行下一步？
• 截图在当前显示尺寸下是否清晰可读？
• 图标的缩放是否恰到好处，而不是显得笨重或模糊？

10. 微文案与语气

• 文案是否清晰简洁？
• 听起来是否像真人在说话（且符合品牌形象）？
• 标签和按钮是否含义明确？
• 流程中是否存在操纵性设计——例如令人困惑的同意选项、阻碍取消、让人内疚的文案、虚假的紧迫感，或迫使用户做出不当选择的视觉层级？
• 错误文案是否能帮助用户解决问题？

阶段 2：呈现评估结果

请以设计总监的方式组织反馈：

设计健康度评分

请参阅 heuristics-scoring

为 Nielsen 的 10 项启发式原则分别打 0–4 分。以表格呈现：

#	启发式原则	分数	主要问题
1	系统状态可见性	?	[具体发现；若表现稳健则写“—”]
2	系统与现实世界相符	?
3	用户控制权与自由度	?
4	一致性与标准	?
5	错误预防	?
6	识别而非回忆	?
7	灵活性与效率	?
8	美观与简约设计	?
9	错误恢复	?
10	帮助与文档	?
总计		??/40	[评分等级]

请如实评分。4 分意味着真正出色。大多数实际界面的得分在 20–32 之间。

反模式评定

从这里开始。 给出通过／不通过的判断：这看起来像是 AI 生成的吗？列出技能中“反模式”部分提到的具体迹象。请直言不讳。

在通过／不通过的判断后，立即用一句话评述层级关系。

整体印象

简要说说直觉感受——哪些方面有效、哪些无效，以及最重要的改进机会。

做得好的地方

指出 2–3 项做得好的地方。具体说明它们为何有效。

优先级问题

按重要性排序，列出影响最大的 3–5 个设计问题。

每个问题都需标注 P0–P3 严重程度（严重程度定义请参阅 heuristics-scoring）：

• [P?] 问题：清晰说明问题
• 为何重要：说明这如何损害用户体验或阻碍目标实现
• 修复方案：说明如何解决（具体可行）
• 建议命令：可用于解决问题的命令（从以下命令中选择：/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase）

优先指出层级薄弱、系统随意、操作优先级不清和装饰过多等问题，而不是表面层面的细枝末节。

适用时，请明确指出：边框过多、分组含糊、字体大小过多、色调缺乏系统性、分区标题过于醒目、操作层级扁平、行长与行高不匹配、标签:值反模式、不必要地突出彩色链接、数字列未右对齐、界面表面分隔策略薄弱、截图缩小后难以辨认、图标放大后显得笨重，以及图层未清晰分离导致的重叠冲突。

用户画像警示

请参阅 personas

自动选择 2–3 个与此界面类型最相关的用户画像（使用参考中的选择表）。如果 AGENTS.md 中包含由 setup 添加的 ## Design Context 部分，也请根据受众和品牌信息生成 1–2 个项目专属用户画像。

针对每个选定的用户画像，走查其主要操作流程，并列出发现的具体警示：

Alex（高级用户）：未发现键盘快捷键。完成主要操作需要点击 8 次。被迫接受模态引导。⚠️ 用户极可能放弃。

Jordan（首次使用者）：侧边栏导航只有图标。错误消息使用技术术语（“404 Not Found”）。没有可见的帮助入口。⚠️ 用户会在第 2 步放弃。

请具体指出哪些元素和交互未能满足每个用户画像的需求。不要写泛泛的用户画像介绍；要说明具体哪里出了问题。

次要观察

简要记录值得处理的较小问题。

请记住：

• 直截了当——含糊的反馈会浪费所有人的时间
• 具体明确——说“提交按钮”，不要说“某些元素”
• 说明哪里有问题，以及这对用户为何重要
• 给出具体建议，而不只是说“可以考虑探索……”
• 严格排定优先级——如果什么都重要，那就什么都不重要
• 不要委婉弱化批评——开发者需要坦诚的反馈，才能交付出色的设计

第 3 阶段：询问用户

呈现发现后，根据实际发现提出有针对性的问题。直接询问用户你无法推断的内容。这些回答将用于制定行动计划。

围绕以下方向提问（根据具体发现调整——不要提出泛泛的问题）：

1. 优先方向：根据发现的问题，询问用户目前最关注哪一类。例如：“我发现了视觉层级、色彩运用和信息过载方面的问题。你想先处理哪一项？”提供排名靠前的 2–3 个问题类别供选择。

2. 设计意图：如果评审发现了风格调性不一致，询问这是否是有意为之。例如：“界面给人一种冷峻、商务的感觉。这是你想要的风格吗？还是你希望它更温暖、更大胆或更活泼？”根据解决已发现问题的需要，提供 2–3 种风格方向供选择。

3. 范围：询问用户希望处理多少内容。例如：“我发现了 N 个问题。你想全部解决，还是只关注最重要的 3 个？”提供“仅处理前 3 项”“处理全部问题”“仅处理关键问题”等范围选项。

4. 限制（可选——仅在相关时提问）：如果发现的问题涉及许多方面，询问是否有不可触碰的部分。例如：“是否有任何部分需要保持原样？”这样可以避免计划涉及用户认为已经完成的内容。

提问规则：

• 每个问题都必须指向第 2 阶段发现的具体情况——绝不能提出“你的受众是谁？”这类泛泛的问题
• 最多提出 2–4 个问题——尊重用户的时间
• 提供具体选项，而不是开放式问题
• 如果发现的问题很明确（例如，只有 1–2 个清晰的问题），则跳过提问，直接进入第 4 阶段

第 4 阶段：推荐操作

收到用户的回答后，根据用户在第 3 阶段表达的优先事项和范围，提供按优先级排列的操作摘要。

操作摘要

根据用户的回答，按优先级列出建议运行的命令：

1. /command-name — 简要说明要修复的内容（结合评审发现的具体背景）
2. /command-name — 简要说明（结合具体背景） ...

推荐规则：

• 仅推荐以下命令：/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase
• 首先按照用户明确表达的优先事项排序，其次按照影响排序
• 每项说明都应提供足够的背景，让命令清楚知道要关注什么
• 将每个优先问题对应到合适的命令
• 跳过不会解决任何问题的命令
• 如果用户选择了有限范围，则只包含该范围内的事项
• 如果用户标明了不可触碰的部分，则排除会涉及这些部分的命令
• 如果推荐了任何修复操作，最后一步以 /polish 结束

呈现摘要后，告诉用户：

你可以让我逐一运行这些命令、一次性全部运行，或按你喜欢的任意顺序运行。

修复后重新运行 /critique，查看评分是否有所提升。