commit db7d4d3d091e1bb68d4eac9836941260305dc817 Author: wehub-skill-sync Date: Mon Jul 13 21:36:47 2026 +0800 chore: import zh skill critique diff --git a/README.wehub.md b/README.wehub.md new file mode 100644 index 0000000..2c5e3e7 --- /dev/null +++ b/README.wehub.md @@ -0,0 +1,9 @@ +# WeHub 来源说明 + +- Skill 名称：`critique` +- 中文类目：视觉设计审查 +- 上游仓库：`nexu-io__open-design` +- 上游路径：`design-templates/critique/SKILL.md` +- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/design-templates/critique/SKILL.md +- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理 +- 原作者、版权和许可证信息以上游仓库为准 diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..00bc7ec --- /dev/null +++ b/SKILL.md @@ -0,0 +1,195 @@ +--- + +```markdown +--- +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 **在输出之前**对自己产出的自检循环 +- 用于比较同一设计的两个版本 + +## 输出内容 + +一份自包含的 `` 评审报告，包括： + +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` 加说明文字的比例在各页之间是否一致？ +- 等宽标签：字母间距是否一致？大写规则是否统一？ +- 是否存在孤立的 `
` 导致单字符换行？ + +**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. **你本轮生成的**——你刚在上面输出了一个制品并想自评：重新读取你自己的 ``。 + +如果存在多个 HTML 文件，询问用户要评审哪一个（不要全部评审）。 + +### 第 2 步——读取足够内容以评分 + +快速浏览整个 ` + + +
+ + +
+
+
+ 五维评审 + · + 2026.04.27 + · + OD · Critique 技能 +
+

magazine-web-ppt
示例演示

+
+

+ 总体 7.4 / 10。哲学内核扎实、细节到位——每张幻灯片看起来都出自同一位设计师之手。创新方面有意保守；功能性扣分的原因仅在于示例未附带真实图片。 +

+
+ + +
+
+
得分雷达图
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + PHILOSOPHY + 8 + HIERARCHY + 7 + DETAIL + 8 + FUNCTION + 6 + INNOVATION + 5 + +
综合 · 7.4 / 10 · 等级 Strong
+
+ +
+
+
哲学一致性Phil. cons.
+
+
8/10
+
Strong
+
+
+
视觉层级Hier.
+
+
7/10
+
Strong
+
+
+
细节执行Detail
+
+
8/10
+
Strong
+
+
+
功能性Func.
+
+
6/10
+
Functional
+
+
+
创新性Innov.
+
+
5/10
+
Functional
+
+
+
+ + +

维度报告各维度证据

+ +
+
+
+
哲学一致性Phil. cons.
+
8/10
+
+

+ 9 张幻灯片的节奏如同一条完整主线（Monocle Editorial）贯穿始终。 + chrome 的用语保持统一格调："A Talk · 2026.04.22"、"Act II · 04 / 09"、 + "Page 06 · 金句"。美中不足是第 5 张幻灯片上的 kicker—— + "Act II" 没问题，但幻灯片标题 "折叠" 是一个单字展示词，与 Act 序号争夺视觉注意力。值得收紧。 +

+
+
保留全部 9 张幻灯片中 chrome / kicker / foot 的词汇体系——这是该演示的身份标识。
+
修复第 5 张：将 kicker 改为 "Act II · 折叠"，或缩小展示标题以理清层级。
+
+
+ +
+
+
视觉层级Hier.
+
7/10
+
+

+ 英雄页（第 1、5、7、9 张）堪称教科书级别——展示衬线字体占据主导， + kicker 和 meta-row 退居次要。正文页基本成立：第 2 张幻灯片的 + stat-card 使用 .stat-label（等宽小号）→ .stat-nb（衬线大号） + → .stat-note（无衬线正文），三级结构，互不冲突。问题出在第 3 张幻灯片的 + callout——它的左侧边框与 .h-xl 标题在视觉上冲突， + 因为两者处于相同的 x 坐标且权重相近。视线不知道该先读标题还是先读引用。 +

+
+
保留第 2 张的 stat-card 三级结构——可在所有地方复制。
+
修复第 3 张：将 callout 缩进 2vw，或将其推到正文下方，使其明显属于较低层级。
+
+
+ +
+
+
细节执行Detail
+
8/10
+
+

+ 多处达到杂志级别——所有 9 张幻灯片中每个 .foot 的基线对齐一致； + .meta-row 全篇使用同一套等宽字体规范（.16em 字间距、大写）。 + 第 4 张的 Pipeline 即使在列数降至 3 时仍保持完美的网格。两个真正的缺失： + （1）第 3 张幻灯片的图片槽使用 aspect-ratio:16/10， + 但内部的占位文本采用居中对齐，在视口宽度 ≤ 1100px 时显得空洞； + （2）底部的圆点导航与第 5 张幻灯片的脚注文字重叠， + 因为英雄页的居中网格占用了垂直空间。 +

+
+
保留等宽字体的 .foot 规范——这是该演示的点睛之笔，不要改变字间距。
+
修复第 5 张英雄页网格：将内部内容上限设为 min-height:78vh，使脚注不与圆点导航重叠。
+
+
+ +
+
+
功能性Func.
+
6/10
+
+

+ 键盘 / 滚轮 / 触摸导航在宿主 iframe 内正常工作（已验证：←/→/PageUp/PageDown 均可翻页）。 + ESC 打开索引概览，圆点点击有效。重大缺失在于示例未附带真实图片—— + 第 3 张幻灯片显示一个虚线的 .img-slot 占位符，本应放置产品截图， + 这对示例文件而言是正确的选择，但意味着用户无法判断布局在高保真下的表现。 + 第二个缺失：示例卡中的 iframe sandbox 仅设置为 + allow-scripts，因此 WebGL 背景可以加载，但 iframe 内部的圆点导航 + 需要先点击一次，键盘导航才能捕获焦点。 +

+
+
保留5 个 BUG 修复导航脚本（真实滚动检测、捕获阶段监听器）——经过验证且稳定。
+
修复在示例中添加一个 data: URI 占位图（1×1 彩色渐变），使第 3 张幻灯片的布局在任何宽度下都能正常呈现。
+
+
+ +
+
+
创新性Innov.
+
5/10
+
+

+ 创新方面有意保守——这是对歸藏（guizang-ppt-skill）的移植， + 其价值主张在于可预测性而非新颖性。双 WebGL 背景（深色为全息弥散、浅色为螺旋涡流） + 是唯一值得称道的亮点；幻灯片主题切换时的交叉淡入效果细腻且时机恰当。 + 但其他所有内容（布局词汇、chrome/foot 模式、主题预设）都是对上游的忠实复制。 + 没有一个让人"眼前一亮"的惊喜，能让观众忍不住截屏。就其声明的目的（Monocle Editorial 方向） + 而言，这样做是恰当的。但作为 AI 演示日的作品，这是一个错失的机会。 +

+
+
保留双着色器交叉淡入——这是该演示唯一的"魔法"效果，值得保留。
+
快速取胜每个演示添加一处排版亮点——例如在闭幕页添加一个超大的斜体 em kicker 来打破网格。
+
+
+
+ + +

行动清单保留 · 修复 · 快速取胜

+ +
+
+
保留不要破坏它
+
    +
  • 9 页节奏：深色英雄页 → 浅色 → 深色 → 浅色 → 浅色英雄页 → 深色 → 深色英雄页 → 浅色 → 浅色英雄页。这是黄金标准。
    • +
  • 双 WebGL 背景 + 深色与浅色幻灯片之间的 1.2s 交叉淡入。
    • +
  • chrome / kicker / foot 词汇体系——它们承载了 Monocle 方向。
    • +
  • 第 2 张的 3 级 stat-card（label → nb → note）。
    • +
+
+ +
+
修复P0——视觉代价高
+
    +
  • 第 3 张 callout 缩进——目前与 .h-xl 冲突；向右推 2vw 或放到正文下方。
    • +
  • 第 5 张英雄页居中网格——将内容高度上限设为 78vh，使脚注不与圆点导航重叠。
    • +
  • 第 3 张添加一个 data: 渐变占位图，使布局在窄宽度下即使没有真实素材也能正常呈现。
    • +
  • 第 5 张 kicker / 展示标题：选择其一作为主视觉——目前两者互相争夺注意力。
    • +
+
+ +
+
快速取胜5–15 分钟，高回报
+
    +
  • 为每张幻灯片注入 data-screen-label，提升可访问性并便于 grep 自检。
    • +
  • 在闭幕页添加一处超大斜体 en 文字，营造排版惊喜。
    • +
  • 将英雄页上的 #hint 叠加层从 opacity:.4 改为 .55——当前几乎不可见。
    • +
  • 添加一个打印样式表（每页一张幻灯片），使 PDF 导出保留节奏感。
    • +
+
+
+ + +
+ +