critique

Critique Skill · 5 维度专家评审

生成一个单文件 HTML“设计评审报告”，对任意作品从 5 个维度进行评分，并提出可执行的改进建议。灵感来自 huashu-design 专家评审流程。

使用时机

• Agent（或用户）生成作品（演示文稿 / 原型 / 落地页）后，用户询问“这有什么问题？”或“评审一下”
• 作为 Agent 在输出自身作品之前运行的自检循环
• 比较同一设计的两个版本

产出内容

生成一个独立完整的 <artifact type="text/html"> 评审报告，包含：

1. 页眉——评审的作品、日期、评审者（“OD · Critique skill”）、一句话结论
2. 雷达图（内嵌 SVG，无需库），展示 5 个维度的评分
3. 五张维度卡片，每张包含：
   • 0–10 分（并标注档位：0–4 分 有问题 · 5–6 分 可用 · 7–8 分 出色 · 9–10 分 卓越）
   • 一段证据（引用具体元素 / 文件 / 行号）
   • 一条保留 / 修复 / 快速优化要点
4. 底部的综合行动清单：
   • 保留——哪些部分效果不错，不要改动
   • 修复——在视觉上代价高昂的 P0 / P1 问题
   • 快速优化——只需 5–15 分钟、却能带来显著影响的调整

5 个维度

每个维度彼此独立——一份演示文稿的创新性可以是 9/10，层级可以是 4/10；报告应如实指出。不要用平均分掩盖值得关注的问题。

1. 哲学一致性 · 哲学一致性

作品是否选择了明确的方向，并在每个细微决策（界面装饰 / 引导语 / 间距 / 强调色）中贯彻到底？

观察证据：

• 是否明确了一种设计方向（例如 Monocle / WIRED / Kinfolk），还是把三种风格硬凑在一起？
• 界面装饰 / 引导语的表达风格是否统一，还是第 3 页写着“Vol.04 · Spring”，第 7 页却写着“BUT WAIT 🔥”？
• 强调色 / 衬线字体 / 等宽字体是否始终遵循同一套规则？

0–4 分 三种风格彼此冲突。5–6 分 方向明确，但一半元素偏离。7–8 分 整体协调，个别边缘页面偶有偏离。9–10 分 每个元素都在阐述同一个主旨。

2. 视觉层级 · 视觉层级

陌生人能否在无人指引的情况下，判断先读什么、再读什么、最后读什么？

观察证据：

• 每页字号最大的内容是否显然最重要？
• 等宽 / 衬线 / 无衬线字体的用途是否符合信息的角色（元信息 / 正文 / 展示）？
• 是否有太多“抢眼”的元素互相竞争？还是有清晰的主次层级？

0–4 分 所有内容都在大声争抢注意力。5–6 分 首屏层级清晰，但正文部分失序。7–8 分 层级清楚，偶有冲突。9–10 分 视线移动毫无阻碍。

3. 细节执行 · 细节执行

那些占 90/10 的细节——对齐、行距、大字号下的字距、图片裁切、页脚 / 界面装饰的打磨，以及边缘情况下的间距。

观察证据：

• 大数字页面：数字是否稳稳落在基线上，还是悬浮不定？
• grid-2-7-5 中左右栏的顶部是否对齐？
• 各页面的 frame-img 和说明文字比例是否一致？
• 等宽字体标签的字间距是否一致？大写规则是否一致？
• 是否有多余的 <br> 导致只剩 1 个字符的一行？

0–4 分 粗糙得一眼可见。5–6 分 大多数页面整洁，但有 1–2 处参差。7–8 分 打磨到位，专家仍能找出 2–3 处瑕疵。9–10 分 达到杂志级水准——细节精致到足以让手工排版师点头称赞。

4. 功能性 · 功能性

这个产物能否胜任预期用途？检查可点击目标、导航、演示距离下的可读性、代码块是否便于复制粘贴，以及（如相关）移动端备用方案。

需要查找的证据：

• 演示文稿：键盘／滚轮／触控导航是否都能正常使用？是否有 iframe 滚动备用方案？
• 落地页：首屏上方是否有 CTA？手机号码在移动设备上是否可点击？
• 操作手册：代码块是否可复制、是否使用等宽字体、是否没有智能引号？
• 关键信息能否在 4m 外清晰读出（大屏演示）？

0–4 视觉上不错，但无法完成其任务。5–6 核心流程可用，边缘情况有问题。7–8 日常使用中稳健可靠。9–10 防护周全——面对 iframe／全屏／粘贴／打印也能从容应对。

5. 创新性 · 创新性

这是否超越了中位水平？是否有一个元素能让人眼前一亮？

需要查找的证据：

• 是否有一个并非必需的出人意料的布局／动效／字体设计？
• 还是完全稳妥——看起来像任何一家代理公司制作的演示文稿／落地页？
• 创新是否恰如其分（符合设计方向），还是生硬拼凑（例如在 Kinfolk 慢生活风格的演示文稿中加入随机的 WebGL）？

0–4 普通 AI 垃圾内容的中位水平。5–6 合格但令人难忘不起来。7–8 有一个令人印象深刻的亮点，其余部分扎实可靠。9–10 有多个值得借鉴的设计手法，而且每个都明显服务于核心主旨。

评分准则（评分前请阅读）

• 始终引用证据——“得分为 4，因为首页在同一行混用了 Playfair display 和 Inter sans”胜过“感觉不一致”。没有证据的分数会被驳回。
• 不要拔高平均分——如果层级得分为 5，因为第 3 页有问题，不要因为第 1、2 页表现不错就提到 7。分数应反映持续表现最差的档位。
• 不要虚高评分——7 代表出色，而不是合格。如果每项得分都在 7 分以上，说明你评审得不够严格。
• 创新性可以偏低——对于生产交付物，5/10 完全可以接受。不要惩罚恰当的保守设计。

工作流

步骤 1 — 获取产物

三种模式：

1. 项目文件 — 用户说“评审我刚做的 index.html”： 从项目文件夹中打开它。
2. 粘贴的 HTML — 用户在聊天中粘贴了代码：从消息中读取。
3. 本轮由你生成 — 你刚刚在上文生成了一个产物，现在想自我评审：重新阅读自己的 <artifact>。

如果存在多个 HTML 文件，请询问要评审哪一个（不要全部评审）。

步骤 2 — 阅读足够内容后再评分

快速浏览整个 <style>，然后阅读 6–8 个有代表性的内容区块。不要只根据 frontmatter 评分。 评分取决于实际呈现的设计，而非宣称的意图。

步骤 3 — 根据证据评分

对 5 个维度分别给出分数，并写一段 30–80 词的证据说明，指出具体元素。请使用行号、类名、页码。

示例：

Dimension: Detail execution
Score: 6 / 10
Evidence: Stat-cards on page 3 align cleanly (grid-6, 3×2), but on
page 8 the right column foot sits 2vh higher than the left because
.callout has 3vh top margin while the figure doesn't. Image captions
use mono on page 5 but sans on page 7 — pick one.

步骤 4 — 整理行动清单

将 5 段证据说明汇总为：

• 保留（3–5 条）— 列出有效的具体做法，用户在下一轮迭代中必须保留。请引用类名／页面／元素。
• 修复（3–6 条）— 必须完成的事项，按每分钟可节省的视觉成本排序。每条不超过 1 句话。
• 快速优化（3–5 条）— 每项耗时 5–15 分钟，且信噪比高（例如“将第 4 页的 display:flex 替换为 grid，修复列偏移”）。

步骤 5 — 输出报告 HTML

构建单个文件：

• 页眉：产物名称 + 评审者署名 + 日期
• 大型雷达图（SVG）
• 5 张维度卡片，采用 1 列或 2 列网格
• 底部的三份行动清单，带复选框样式

如果存在有效的 DESIGN.md 设计令牌，请使用；否则，默认使用中性浅色主题（灰白背景、近黑色文字、雷达图填充使用一种强调色）。

输出要求

<artifact identifier="critique-<artifact-slug>" type="text/html" title="Critique · <Artifact Title>">
<!doctype html>
<html>...</html>
</artifact>

在产物前写一个句子（“已从 5 个维度评审 X，报告如下。”），并在 </artifact> 后立即结束——不要在聊天中转述报告；用户会阅读产物。

硬性规则

• 每次都给出 5 项评分——不允许只提供部分报告（例如只评估 3 个维度）。
• 每项评分都要有依据——不能只说“感觉不太对”或“有待改进”。如果无法引用具体元素，就不能给出该评分。
• 不要虚高打分——总体平均分高于 8 就值得怀疑；请自我检查。
• 不要在同一轮中评审自己刚产出的内容——用户需要先看到内容。只有在用户明确要求时（“现在批评你刚才的作品”）才进行自我评审。
• 仅限单文件 HTML——不能使用外部 CSS/JS。所有内容都内嵌。
• 必须包含雷达图——它能让报告呈现出醒目的轮廓，也便于用户一眼发现薄弱维度。