/SKILL.md

---

---
name: critique
description: |
  对项目中任意 HTML 制品运行 5 维度专家设计评审——哲学一致性 / 视觉层级 / 细节执行 / 功能性 / 创新性，每项 0–10 分。输出一份自包含的 HTML 报告，包含雷达图、有证据支撑的评分，以及三个清单：保留 / 修复 / 速赢。当需求中提到「设计评审」、「设计批评」、「5 维度评审」、「设计审核」或「我的设计有什么问题」时使用。
triggers:
  - "critique"
  - "design review"
  - "design audit"
  - "5 维度评审"
  - "5-dim review"
  - "audit my design"
  - "review my deck"
  - "review my landing page"
  - "评审"
  - "复盘"
od:
  mode: prototype
  platform: desktop
  scenario: design
  upstream: "https://github.com/alchaincyf/huashu-design"
  preview:
    type: html
    entry: index.html
  design_system:
    requires: false
  example_prompt: "Run a 5-dimension critique on the magazine-web-ppt deck I just generated — score philosophy / hierarchy / detail / function / innovation, give me Keep / Fix / Quick-wins."
---

# 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 分钟即可完成、回报不成比例的小改动

## 五个维度

> 每个维度相互独立——一份幻灯片可能在创新性上得 9/10，但在视觉层级上只有 4/10，报告应当如实陈述。不要用平均值抹杀有趣的缺陷。

### 1. Philosophy consistency · 哲学一致性

> 制品是否选择了一个明确的*方向*，并在每一个微观决策（装饰元素 / 引题 / 间距 / 强调色）中保持一致？

**需要查找的证据：**
- 是否有一个明确的设计方向（如 Monocle / WIRED / Kinfolk），还是三种风格拼凑在一起？
- 装饰元素 / 引题语汇是否保持在同一调性上，还是第 3 页写着「Vol.04 · Spring」而第 7 页写着「BUT WAIT 🔥」？
- 强调色 / 衬线 / 等宽字体是否始终遵循同一规则使用？

**0–4** 三种风格相互冲突。**5–6** 有统一方向，但半数元素存在偏离。**7–8** 整体一致，边缘页面偶有偏离。**9–10** 每个元素都在为同一个主题服务。

### 2. Visual hierarchy · 视觉层级

> 一个陌生人能否不经过说明就知道先读什么、再读什么、最后读什么？

**需要查找的证据：**
- 每页上最大的字体是否显然是该页最重要的内容？
- 等宽 / 衬线 / 无衬线字体的角色是否与信息本身的*角色*（元信息 / 正文 / 展示）相匹配？
- 是否存在大量「喧闹」的元素在争夺注意力？还是清晰的「主级 + 次级 + 三级」层级？

**0–4** 所有元素都在争抢注意力。**5–6** 头版页面上层级清晰，但内页中崩溃。**7–8** 层级分明，偶有冲突。**9–10** 视线移动毫无阻碍。

### 3. Detail execution · 细节执行

> 那 90/10 的部分——对齐、行距、大字号字距、图片裁切、页脚 / 装饰元素打磨、边缘间距。

**需要查找的证据：**
- 大数字页面：数字是否位于基线上，还是悬浮着？
- 左右两栏顶部在 `grid-2-7-5` 中是否对齐？
- `frame-img` 加说明文字的比例在各页之间是否一致？
- 等宽标签：字母间距是否一致？大写规则是否统一？
- 是否存在孤立的 `<br>` 导致单字符换行？

**0–4** 可见的胶带和绳索痕迹。**5–6** 大部分页面干净，1–2 处粗糙。**7–8** 打磨到位，专家眼光可发现 2–3 处遗漏。**9–10** 杂志级别——那种让手工排版的字体设计师点头称道的细节。

### 4. Functionality · 功能性

> 制品是否能在其预期用途中*正常工作*？点击目标、导航、演示距离下的可读性、代码块的复制粘贴能力、相关的移动端降级方案。

**需要查找的证据：**
- 幻灯片：键盘 / 滚轮 / 触摸导航是否都正常工作？iframe 滚动降级方案？
- 落地页：CTA 是否在首屏以上？电话号码在移动端是否可点击？
- 操作手册：代码块是否可复制、使用等宽字体、无智能引号？
- 关键信息在 4 米外是否可读（大屏演示）？

**0–4** 视觉效果不错但无法完成任务。**5–6** 核心流程可用，边缘情况有缺陷。**7–8** 正常使用下稳健。**9–10** 防御性工程——面对 iframe / 全屏 / 粘贴 / 打印均从容应对。

### 5. Innovation · 创新性

> 这个设计是否超越了平均水平？是否有一个元素能让人眼前一亮？

**需要查找的证据：**
- 是否存在一个*意想不到*的布局 / 动效 / 排版手法，并非需求所要求？
- 还是 100% 安全——可以是任何一家机构的任何幻灯片 / 落地页？
- 这种创新是*有根基的*（与方向一致）还是硬贴上去的（在 Kinfolk 慢生活幻灯片上随意加一段 WebGL）？

**0–4** 通用的 AI 垃圾平均水平。**5–6** 称职但毫无记忆点。**7–8** 一个令人印象深刻的瞬间，其余部分扎实。**9–10** 多处手法令人想借鉴——但每一处都明显服务于主题。

## 评分纪律（评分前请先阅读）

- **始终引用证据**——「打 4 分因为首页在同一行混用了 Playfair display 和 Inter sans」比「感觉不统一」更有说服力。没有证据的评分会被驳回。
- **不要往上拉平均**——如果视觉层级因为第 3 页有问题而得了 5 分，不要因为第 1 页和第 2 页没问题就拉到 7 分。评分依据的是*最差持续水平*。
- **不要打分虚高**——7 分意味着*优秀*，不是*及格*。如果每个评分都在 7 分以上，说明你没有在认真评审。
- **创新性可以偏低**——生产交付物得 5/10 完全可以接受。不要因为*合理的保守*而扣分。

## 工作流程

### 第 1 步——获取制品

三种模式：

1. **项目文件**——用户说「评审一下我刚做的 index.html」：从项目文件夹中打开它。
2. **粘贴的 HTML**——用户在聊天中粘贴了代码：从消息中读取。
3. **你本轮生成的**——你刚在上面输出了一个制品并想自评：重新读取你自己的 `<artifact>`。

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

### 第 2 步——读取足够内容以评分

快速浏览整个 `<style>`，然后阅读 6–8 个代表性内容块。**不要仅凭 frontmatter 就打分。** 评分依据的是*实际执行的*设计，而非声明的意图。

### 第 3 步——凭证据打分

对每个维度，写出评分和一段 30–80 字的证据描述，指出具体元素。使用行号、类名、页码。

示例：

维度：细节执行 评分：6 / 10 证据：第 3 页的统计卡片对齐清晰（grid-6，3×2），但第 8 页右侧栏的页脚比左侧高 2vh，因为 .callout 有 3vh 的上边距而图片没有。图片说明文字在第 5 页使用等宽字体，在第 7 页却使用无衬线字体——请统一。

### 第 4 步——构建操作清单

汇总 5 段证据描述，整理为：

- **保留**（3–5 条）——具体哪些做得好，用户在下一次迭代中一定不要破坏。引用类名 / 页码 / 元素。
- **修复**（3–6 条）——必须做的事，按*每花费一分钟所能节省的视觉代价*排序。每条不超过一句话。
- **速赢**（3–5 条）——每条 5–15 分钟，高信噪比（例如「将第 4 页的 `display:flex` 换成 `grid` 以修复列偏移」）。

### 第 5 步——生成报告 HTML

构建一个文件：

- 头部：制品名称 + 评审人署名 + 日期
- 大型雷达图（SVG）
- 5 个维度卡片，排成一列或两列网格
- 底部三个操作清单，带复选框样式

如果存在活跃的 DESIGN.md 令牌则使用；否则默认使用中性浅色主题（米白背景、近黑文字、一种雷达填充强调色）。

## 输出约定

<html>...</html> ```

在 artifact 之前写一句话（「已从 5 个维度评审 X，报告如下。」），然后在 </artifact> 之后停止——不要在聊天中复述报告内容；用户会直接阅读 artifact。

硬性规则

• 每次都要有 5 个评分——不允许部分报告（例如只评审 3 个维度）。
• 每个评分都要有证据——不允许「感觉不对」/「需要改进」。如果你无法引用某个元素，则评分不成立。
• 不要打分虚高——总体平均分超过 8 分需要警惕；请自查。
• 不要在同一轮中评审自己的 artifact——用户需要先看到它。只有在用户明确要求时才进行自评（「现在评审一下你刚做的东西」）。
• 仅限单文件 HTML——不引用外部 CSS/JS。所有内容内联。
• 雷达图是必须的——它让报告具有可识别的轮廓，让用户一眼就能看出薄弱的维度。

---

翻译完成。逐句严格对应原文，保留了所有 YAML 键名（仅翻译了 description 和 example_prompt 中的散文值），所有 Markdown 结构与列表层级不变，代码/命令/URL/技术标识符均原样保留，专有名词未强行音译，标点已按中文习惯转换。