chore: import zh skill critique
This commit is contained in:
wehub-skill-sync
@@ -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 清单整理
|
||||
- 原作者、版权和许可证信息以上游仓库为准
|
||||
@@ -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 **在输出之前**对自己产出的自检循环
|
||||
- 用于比较同一设计的两个版本
|
||||
|
||||
## 输出内容
|
||||
|
||||
一份自包含的 `<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 令牌则使用；否则默认使用中性浅色主题（米白背景、近黑文字、一种雷达填充强调色）。
|
||||
|
||||
## 输出约定
|
||||
|
||||
```
|
||||
<artifact identifier="critique-<制品别名>" type="text/html" title="Critique · <制品标题>">
|
||||
<!doctype html>
|
||||
<html>...</html>
|
||||
</artifact>
|
||||
```
|
||||
|
||||
在 artifact 之前写一句话（「已从 5 个维度评审 X，报告如下。」），然后在 `</artifact>` **之后停止**——不要在聊天中复述报告内容；用户会直接阅读 artifact。
|
||||
|
||||
## 硬性规则
|
||||
|
||||
- **每次都要有 5 个评分**——不允许部分报告（例如只评审 3 个维度）。
|
||||
- **每个评分都要有证据**——不允许「感觉不对」/「需要改进」。如果你无法引用某个元素，则评分不成立。
|
||||
- **不要打分虚高**——总体平均分超过 8 分需要警惕；请自查。
|
||||
- **不要在同一轮中评审自己的 artifact**——用户需要先看到它。只有在用户明确要求时才进行自评（「现在评审一下你刚做的东西」）。
|
||||
- **仅限单文件 HTML**——不引用外部 CSS/JS。所有内容内联。
|
||||
- **雷达图是必须的**——它让报告具有可识别的轮廓，让用户一眼就能看出薄弱的维度。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
翻译完成。逐句严格对应原文，保留了所有 YAML 键名（仅翻译了 description 和 example_prompt 中的散文值），所有 Markdown 结构与列表层级不变，代码/命令/URL/技术标识符均原样保留，专有名词未强行音译，标点已按中文习惯转换。
|
||||
+651
@@ -0,0 +1,651 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>评审 · magazine-web-ppt 示例演示</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f3ee;
|
||||
--paper: #ffffff;
|
||||
--ink: #1a1a1c;
|
||||
--muted: #6b6964;
|
||||
--rule: #e2dfd7;
|
||||
--accent: #c96442;
|
||||
--good: #4a7a3f;
|
||||
--warn: #c96442;
|
||||
--bad: #a83a2a;
|
||||
|
||||
--serif: 'Source Serif 4', Georgia, serif;
|
||||
--sans: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
--mono: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: var(--accent); }
|
||||
|
||||
.wrap {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 56px 40px 96px;
|
||||
}
|
||||
|
||||
/* ============ Header ============ */
|
||||
.hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 40px;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.hd-title {
|
||||
font-family: var(--serif);
|
||||
font-weight: 700;
|
||||
font-size: clamp(34px, 4.4vw, 56px);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.hd-meta {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hd-verdict {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
color: var(--muted);
|
||||
max-width: 36ch;
|
||||
text-align: right;
|
||||
}
|
||||
.hd-verdict strong { color: var(--ink); font-style: normal; font-weight: 600; }
|
||||
|
||||
/* ============ Top row: radar + score table ============ */
|
||||
.top {
|
||||
display: grid;
|
||||
grid-template-columns: 360px 1fr;
|
||||
gap: 48px;
|
||||
margin-bottom: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.top { grid-template-columns: 1fr; }
|
||||
}
|
||||
.radar-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.radar-card .lbl {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.radar-card svg { width: 100%; height: auto; max-width: 300px; }
|
||||
.radar-card .overall {
|
||||
font-family: var(--serif);
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-top: 18px;
|
||||
}
|
||||
.radar-card .overall .n {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Score table */
|
||||
.scores { display: flex; flex-direction: column; gap: 14px; }
|
||||
.score-row {
|
||||
display: grid;
|
||||
grid-template-columns: 22ch 1fr 6ch 14ch;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.score-row:first-child { border-top: 0; }
|
||||
.score-name {
|
||||
font-family: var(--serif);
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
}
|
||||
.score-name .en {
|
||||
display: block;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.score-bar {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background: var(--rule);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.score-bar-fill {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
background: var(--ink);
|
||||
}
|
||||
.score-num {
|
||||
font-family: var(--serif);
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: right;
|
||||
}
|
||||
.score-num .denom {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
.score-band {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
.band-broken { color: var(--bad); }
|
||||
.band-functional { color: var(--muted); }
|
||||
.band-strong { color: var(--good); }
|
||||
.band-exceptional { color: var(--accent); }
|
||||
|
||||
/* ============ Dimension cards ============ */
|
||||
.section-title {
|
||||
font-family: var(--serif);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.005em;
|
||||
margin: 64px 0 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.section-title .en {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.dim-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.dim-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.dim {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
.dim-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.dim-name {
|
||||
font-family: var(--serif);
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
}
|
||||
.dim-name .en {
|
||||
display: block;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.dim-score {
|
||||
font-family: var(--serif);
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.dim-score .denom {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
.dim-evidence {
|
||||
font-family: var(--serif);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.65;
|
||||
color: #2d2d30;
|
||||
margin: 10px 0 16px;
|
||||
}
|
||||
.dim-evidence code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.88em;
|
||||
background: var(--rule);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dim-tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.tag-row {
|
||||
display: grid;
|
||||
grid-template-columns: 70px 1fr;
|
||||
gap: 12px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
color: var(--paper);
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
}
|
||||
.tag-keep { background: var(--good); }
|
||||
.tag-fix { background: var(--warn); }
|
||||
.tag-qw { background: #2c4d6e; }
|
||||
|
||||
/* ============ Action lists ============ */
|
||||
.lists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.lists-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.list-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
.list-head {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.26em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.list-head.keep { color: var(--good); }
|
||||
.list-head.fix { color: var(--warn); }
|
||||
.list-head.qw { color: #2c4d6e; }
|
||||
.list-head .ct {
|
||||
font-size: 16px;
|
||||
font-family: var(--serif);
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
.list-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.list-card li {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 1fr;
|
||||
gap: 10px;
|
||||
font-family: var(--serif);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.list-card li::before {
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
border: 1.5px solid var(--rule);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.list-card li code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85em;
|
||||
background: var(--bg);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* ============ Footer ============ */
|
||||
.ft {
|
||||
margin-top: 80px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.ft .br { color: var(--ink); font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<!-- ============ Header ============ -->
|
||||
<header class="hd">
|
||||
<div>
|
||||
<div class="hd-meta">
|
||||
<span>五维评审</span>
|
||||
<span>·</span>
|
||||
<span>2026.04.27</span>
|
||||
<span>·</span>
|
||||
<span>OD · Critique 技能</span>
|
||||
</div>
|
||||
<h1 class="hd-title">magazine-web-ppt<br>示例演示</h1>
|
||||
</div>
|
||||
<p class="hd-verdict">
|
||||
<strong>总体 7.4 / 10。</strong>哲学内核扎实、细节到位——每张幻灯片看起来都出自同一位设计师之手。创新方面有意保守；功能性扣分的原因仅在于示例未附带真实图片。
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- ============ Radar + Score table ============ -->
|
||||
<section class="top">
|
||||
<div class="radar-card">
|
||||
<div class="lbl">得分雷达图</div>
|
||||
<!-- Pentagon radar, 5 axes; score grid at 0/2.5/5/7.5/10 -->
|
||||
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" aria-label="得分雷达图">
|
||||
<defs>
|
||||
<style>
|
||||
.axis { stroke: #e2dfd7; stroke-width: 1; fill: none; }
|
||||
.grid { stroke: #e8e5dd; stroke-width: 1; fill: none; }
|
||||
.grid-mid { stroke: #e2dfd7; stroke-width: 1; fill: none; }
|
||||
.area { fill: rgba(201,100,66,0.18); stroke: #c96442; stroke-width: 1.6; stroke-linejoin: round; }
|
||||
.dot { fill: #c96442; }
|
||||
.lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: #6b6964; }
|
||||
.lbl-n { font-family: 'Source Serif 4', serif; font-size: 12px; font-weight: 600; fill: #1a1a1c; }
|
||||
</style>
|
||||
</defs>
|
||||
<!-- Center 150,150. Radius 110 = 10/10. -->
|
||||
<!-- Grid rings 25/50/75/100% of 110 = 27.5 / 55 / 82.5 / 110 -->
|
||||
<!-- Pentagon angles: -90, -18, 54, 126, 198 (deg) measured from center.
|
||||
Order: top=Philosophy, top-right=Hierarchy, bottom-right=Detail,
|
||||
bottom-left=Function, top-left=Innovation -->
|
||||
<!-- Outer rings (5 sided) -->
|
||||
<polygon class="grid" points="150,40 254.66,116.05 214.69,238.95 85.31,238.95 45.34,116.05" />
|
||||
<polygon class="grid" points="150,67.5 228.47,124.54 198.51,216.71 101.49,216.71 71.53,124.54" />
|
||||
<polygon class="grid-mid" points="150,95 202.33,133.02 182.34,194.48 117.66,194.48 97.67,133.02" />
|
||||
<polygon class="grid" points="150,122.5 176.16,141.51 166.17,172.24 133.83,172.24 123.84,141.51" />
|
||||
<!-- Axes -->
|
||||
<line class="axis" x1="150" y1="150" x2="150" y2="40" />
|
||||
<line class="axis" x1="150" y1="150" x2="254.66" y2="116.05" />
|
||||
<line class="axis" x1="150" y1="150" x2="214.69" y2="238.95" />
|
||||
<line class="axis" x1="150" y1="150" x2="85.31" y2="238.95" />
|
||||
<line class="axis" x1="150" y1="150" x2="45.34" y2="116.05" />
|
||||
|
||||
<!-- Score area · Phil 8 / Hier 7 / Det 8 / Func 6 / Innov 5
|
||||
Distances from center (radius 110):
|
||||
Phil 8 → 88 : 150, 150 - 88 = 150, 62
|
||||
Hier 7 → 77 : 150 + 77*sin(72°), 150 - 77*cos(72°)
|
||||
≈ 150 + 73.24, 150 - 23.79
|
||||
= 223.24, 126.21
|
||||
Det 8 → 88 : 150 + 88*sin(144°), 150 - 88*cos(144°)
|
||||
≈ 150 + 51.72, 150 + 71.20
|
||||
= 201.72, 221.20
|
||||
Func 6 → 66 : 150 - 66*sin(36°), 150 + 66*cos(36°)
|
||||
≈ 150 - 38.79, 150 + 53.40
|
||||
= 111.21, 203.40
|
||||
Innov 5 → 55 : 150 - 55*sin(108°),150 - 55*cos(108°)
|
||||
≈ 150 - 52.32, 150 + 17.00
|
||||
= 97.68, 167.00
|
||||
Wait - cos(108°) is negative, so 150 - 55*(-0.309) = 150 + 17, that's bottom of axis. But Innov axis is top-left. Let me redo.
|
||||
Innov axis end point: 45.34, 116.05. Vector from center (150,150): (-104.66, -33.95), magnitude 110.
|
||||
At score 5, scale = 5/10 = 0.5: center + 0.5 * (-104.66, -33.95) = 150 - 52.33, 150 - 16.97 = 97.67, 133.03 -->
|
||||
<polygon class="area" points="150,62 223.24,126.21 201.72,221.20 111.21,203.40 97.67,133.03" />
|
||||
<circle class="dot" cx="150" cy="62" r="3" />
|
||||
<circle class="dot" cx="223.24" cy="126.21" r="3" />
|
||||
<circle class="dot" cx="201.72" cy="221.20" r="3" />
|
||||
<circle class="dot" cx="111.21" cy="203.40" r="3" />
|
||||
<circle class="dot" cx="97.67" cy="133.03" r="3" />
|
||||
|
||||
<!-- Axis labels -->
|
||||
<text class="lbl" x="150" y="28" text-anchor="middle">PHILOSOPHY</text>
|
||||
<text class="lbl-n" x="150" y="14" text-anchor="middle">8</text>
|
||||
<text class="lbl" x="270" y="116" text-anchor="middle">HIERARCHY</text>
|
||||
<text class="lbl-n" x="278" y="100" text-anchor="middle">7</text>
|
||||
<text class="lbl" x="220" y="259" text-anchor="middle">DETAIL</text>
|
||||
<text class="lbl-n" x="220" y="275" text-anchor="middle">8</text>
|
||||
<text class="lbl" x="80" y="259" text-anchor="middle">FUNCTION</text>
|
||||
<text class="lbl-n" x="80" y="275" text-anchor="middle">6</text>
|
||||
<text class="lbl" x="30" y="116" text-anchor="middle">INNOVATION</text>
|
||||
<text class="lbl-n" x="22" y="100" text-anchor="middle">5</text>
|
||||
</svg>
|
||||
<div class="overall">综合 · <span class="n">7.4</span> / 10 · 等级 <em>Strong</em></div>
|
||||
</div>
|
||||
|
||||
<div class="scores" aria-label="得分明细">
|
||||
<div class="score-row">
|
||||
<div class="score-name">哲学一致性<span class="en">Phil. cons.</span></div>
|
||||
<div class="score-bar"><span class="score-bar-fill" style="width:80%"></span></div>
|
||||
<div class="score-num">8<span class="denom">/10</span></div>
|
||||
<div class="score-band band-strong">Strong</div>
|
||||
</div>
|
||||
<div class="score-row">
|
||||
<div class="score-name">视觉层级<span class="en">Hier.</span></div>
|
||||
<div class="score-bar"><span class="score-bar-fill" style="width:70%"></span></div>
|
||||
<div class="score-num">7<span class="denom">/10</span></div>
|
||||
<div class="score-band band-strong">Strong</div>
|
||||
</div>
|
||||
<div class="score-row">
|
||||
<div class="score-name">细节执行<span class="en">Detail</span></div>
|
||||
<div class="score-bar"><span class="score-bar-fill" style="width:80%"></span></div>
|
||||
<div class="score-num">8<span class="denom">/10</span></div>
|
||||
<div class="score-band band-strong">Strong</div>
|
||||
</div>
|
||||
<div class="score-row">
|
||||
<div class="score-name">功能性<span class="en">Func.</span></div>
|
||||
<div class="score-bar"><span class="score-bar-fill" style="width:60%"></span></div>
|
||||
<div class="score-num">6<span class="denom">/10</span></div>
|
||||
<div class="score-band band-functional">Functional</div>
|
||||
</div>
|
||||
<div class="score-row">
|
||||
<div class="score-name">创新性<span class="en">Innov.</span></div>
|
||||
<div class="score-bar"><span class="score-bar-fill" style="width:50%"></span></div>
|
||||
<div class="score-num">5<span class="denom">/10</span></div>
|
||||
<div class="score-band band-functional">Functional</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ Dimension cards ============ -->
|
||||
<h2 class="section-title">维度报告<span class="en">各维度证据</span></h2>
|
||||
|
||||
<div class="dim-grid">
|
||||
<article class="dim">
|
||||
<div class="dim-head">
|
||||
<div class="dim-name">哲学一致性<span class="en">Phil. cons.</span></div>
|
||||
<div class="dim-score">8<span class="denom">/10</span></div>
|
||||
</div>
|
||||
<p class="dim-evidence">
|
||||
9 张幻灯片的节奏如同一条完整主线（Monocle Editorial）贯穿始终。
|
||||
<code>chrome</code> 的用语保持统一格调：<em>"A Talk · 2026.04.22"</em>、<em>"Act II · 04 / 09"</em>、
|
||||
<em>"Page 06 · 金句"</em>。美中不足是第 5 张幻灯片上的 <code>kicker</code>——
|
||||
<em>"Act II"</em> 没问题，但幻灯片标题 <em>"折叠"</em> 是一个单字展示词，与 Act 序号争夺视觉注意力。值得收紧。
|
||||
</p>
|
||||
<div class="dim-tags">
|
||||
<div class="tag-row"><span class="tag tag-keep">保留</span><span>全部 9 张幻灯片中 chrome / kicker / foot 的词汇体系——这是该演示的身份标识。</span></div>
|
||||
<div class="tag-row"><span class="tag tag-fix">修复</span><span>第 5 张：将 kicker 改为 <em>"Act II · 折叠"</em>，或缩小展示标题以理清层级。</span></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="dim">
|
||||
<div class="dim-head">
|
||||
<div class="dim-name">视觉层级<span class="en">Hier.</span></div>
|
||||
<div class="dim-score">7<span class="denom">/10</span></div>
|
||||
</div>
|
||||
<p class="dim-evidence">
|
||||
英雄页（第 1、5、7、9 张）堪称教科书级别——展示衬线字体占据主导，
|
||||
<code>kicker</code> 和 <code>meta-row</code> 退居次要。正文页基本成立：第 2 张幻灯片的
|
||||
stat-card 使用 <code>.stat-label</code>（等宽小号）→ <code>.stat-nb</code>（衬线大号）
|
||||
→ <code>.stat-note</code>（无衬线正文），三级结构，互不冲突。问题出在第 3 张幻灯片的
|
||||
<code>callout</code>——它的左侧边框与 <code>.h-xl</code> 标题在视觉上冲突，
|
||||
因为两者处于相同的 x 坐标且权重相近。视线不知道该先读标题还是先读引用。
|
||||
</p>
|
||||
<div class="dim-tags">
|
||||
<div class="tag-row"><span class="tag tag-keep">保留</span><span>第 2 张的 stat-card 三级结构——可在所有地方复制。</span></div>
|
||||
<div class="tag-row"><span class="tag tag-fix">修复</span><span>第 3 张：将 <code>callout</code> 缩进 <code>2vw</code>，或将其推到正文下方，使其明显属于较低层级。</span></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="dim">
|
||||
<div class="dim-head">
|
||||
<div class="dim-name">细节执行<span class="en">Detail</span></div>
|
||||
<div class="dim-score">8<span class="denom">/10</span></div>
|
||||
</div>
|
||||
<p class="dim-evidence">
|
||||
多处达到杂志级别——所有 9 张幻灯片中每个 <code>.foot</code> 的基线对齐一致；
|
||||
<code>.meta-row</code> 全篇使用同一套等宽字体规范（<code>.16em</code> 字间距、大写）。
|
||||
第 4 张的 Pipeline 即使在列数降至 3 时仍保持完美的网格。两个真正的缺失：
|
||||
（1）第 3 张幻灯片的图片槽使用 <code>aspect-ratio:16/10</code>，
|
||||
但内部的占位文本采用居中对齐，在视口宽度 ≤ 1100px 时显得空洞；
|
||||
（2）底部的圆点导航与第 5 张幻灯片的脚注文字重叠，
|
||||
因为英雄页的居中网格占用了垂直空间。
|
||||
</p>
|
||||
<div class="dim-tags">
|
||||
<div class="tag-row"><span class="tag tag-keep">保留</span><span>等宽字体的 <code>.foot</code> 规范——这是该演示的点睛之笔，不要改变字间距。</span></div>
|
||||
<div class="tag-row"><span class="tag tag-fix">修复</span><span>第 5 张英雄页网格：将内部内容上限设为 <code>min-height:78vh</code>，使脚注不与圆点导航重叠。</span></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="dim">
|
||||
<div class="dim-head">
|
||||
<div class="dim-name">功能性<span class="en">Func.</span></div>
|
||||
<div class="dim-score">6<span class="denom">/10</span></div>
|
||||
</div>
|
||||
<p class="dim-evidence">
|
||||
键盘 / 滚轮 / 触摸导航在宿主 iframe 内正常工作（已验证：←/→/PageUp/PageDown 均可翻页）。
|
||||
ESC 打开索引概览，圆点点击有效。重大缺失在于示例<em>未附带真实图片</em>——
|
||||
第 3 张幻灯片显示一个虚线的 <code>.img-slot</code> 占位符，本应放置产品截图，
|
||||
这对示例文件而言是正确的选择，但意味着用户无法判断布局在高保真下的表现。
|
||||
第二个缺失：示例卡中的 <code>iframe</code> sandbox 仅设置为
|
||||
<code>allow-scripts</code>，因此 WebGL 背景可以加载，但 iframe 内部的圆点导航
|
||||
需要先点击一次，键盘导航才能捕获焦点。
|
||||
</p>
|
||||
<div class="dim-tags">
|
||||
<div class="tag-row"><span class="tag tag-keep">保留</span><span>5 个 BUG 修复导航脚本（真实滚动检测、捕获阶段监听器）——经过验证且稳定。</span></div>
|
||||
<div class="tag-row"><span class="tag tag-fix">修复</span><span>在示例中添加一个 <code>data:</code> URI 占位图（1×1 彩色渐变），使第 3 张幻灯片的布局在任何宽度下都能正常呈现。</span></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="dim">
|
||||
<div class="dim-head">
|
||||
<div class="dim-name">创新性<span class="en">Innov.</span></div>
|
||||
<div class="dim-score">5<span class="denom">/10</span></div>
|
||||
</div>
|
||||
<p class="dim-evidence">
|
||||
创新方面有意保守——这是对歸藏（guizang-ppt-skill）的移植，
|
||||
其价值主张在于<em>可预测性</em>而非新颖性。双 WebGL 背景（深色为全息弥散、浅色为螺旋涡流）
|
||||
是唯一值得称道的亮点；幻灯片主题切换时的交叉淡入效果细腻且时机恰当。
|
||||
但其他所有内容（布局词汇、chrome/foot 模式、主题预设）都是对上游的忠实复制。
|
||||
没有一个让人"眼前一亮"的惊喜，能让观众忍不住截屏。就其声明的目的（Monocle Editorial 方向）
|
||||
而言，这样做是恰当的。但作为 AI 演示日的作品，这是一个错失的机会。
|
||||
</p>
|
||||
<div class="dim-tags">
|
||||
<div class="tag-row"><span class="tag tag-keep">保留</span><span>双着色器交叉淡入——这是该演示唯一的"魔法"效果，值得保留。</span></div>
|
||||
<div class="tag-row"><span class="tag tag-qw">快速取胜</span><span>每个演示添加一处<em>排版</em>亮点——例如在闭幕页添加一个超大的斜体 <code>em</code> kicker 来打破网格。</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- ============ Action lists ============ -->
|
||||
<h2 class="section-title">行动清单<span class="en">保留 · 修复 · 快速取胜</span></h2>
|
||||
|
||||
<div class="lists-grid">
|
||||
<section class="list-card">
|
||||
<div class="list-head keep"><span>保留</span><span class="ct">不要破坏它</span></div>
|
||||
<ul>
|
||||
<li>9 页节奏：<code>深色英雄页 → 浅色 → 深色 → 浅色 → 浅色英雄页 → 深色 → 深色英雄页 → 浅色 → 浅色英雄页</code>。这是黄金标准。</li>
|
||||
<li>双 WebGL 背景 + 深色与浅色幻灯片之间的 <code>1.2s</code> 交叉淡入。</li>
|
||||
<li><code>chrome</code> / <code>kicker</code> / <code>foot</code> 词汇体系——它们承载了 Monocle 方向。</li>
|
||||
<li>第 2 张的 3 级 <code>stat-card</code>（<code>label</code> → <code>nb</code> → <code>note</code>）。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="list-card">
|
||||
<div class="list-head fix"><span>修复</span><span class="ct">P0——视觉代价高</span></div>
|
||||
<ul>
|
||||
<li>第 3 张 callout 缩进——目前与 <code>.h-xl</code> 冲突；向右推 2vw 或放到正文下方。</li>
|
||||
<li>第 5 张英雄页居中网格——将内容高度上限设为 <code>78vh</code>，使脚注不与圆点导航重叠。</li>
|
||||
<li>第 3 张添加一个 <code>data:</code> 渐变占位图，使布局在窄宽度下即使没有真实素材也能正常呈现。</li>
|
||||
<li>第 5 张 kicker / 展示标题：选择其一作为主视觉——目前两者互相争夺注意力。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="list-card">
|
||||
<div class="list-head qw"><span>快速取胜</span><span class="ct">5–15 分钟，高回报</span></div>
|
||||
<ul>
|
||||
<li>为每张幻灯片注入 <code>data-screen-label</code>，提升可访问性并便于 grep 自检。</li>
|
||||
<li>在闭幕页添加一处超大斜体 <em>en</em> 文字，营造排版惊喜。</li>
|
||||
<li>将英雄页上的 <code>#hint</code> 叠加层从 <code>opacity:.4</code> 改为 <code>.55</code>——当前几乎不可见。</li>
|
||||
<li>添加一个打印样式表（每页一张幻灯片），使 PDF 导出保留节奏感。</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="ft">
|
||||
<span>OD · Critique 技能 · v0.1</span>
|
||||
<span>5 个维度 · 哲学 / 层级 / 细节 / 功能 / 创新</span>
|
||||
<span class="br">github.com/alchaincyf/huashu-design</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user