airkjw/open-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial project structure with essential files

Browse Source 
- Created .gitignore to exclude build artifacts and dependencies.
- Added index.html as the main entry point for the application.
- Included LICENSE file with Apache 2.0 terms.
- Initialized package.json and package-lock.json for project dependencies.
- Added pnpm-lock.yaml for package management.
- Created QUICKSTART.md for setup instructions.
- Added README.md and README.zh-CN.md for project documentation in English and Chinese.
This commit is contained in:
pftom
2026-04-28 12:25:59 +08:00
commit a98096a042
258 changed files with 67862 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/critique/SKILL.md
+258
View File
@@ -0,0 +1,258 @@
---
name: critique
description: |
Run a 5-dimension expert design review on any HTML artifact in the
project — Philosophy / Visual hierarchy / Detail / Functionality /
Innovation, each scored 0–10. Outputs a single self-contained HTML
report with a radar chart, evidence-backed scores, and three lists:
Keep / Fix / Quick-wins. Use when the brief asks for a "design
review", "design critique", "5 维度评审", "design audit", or "what's
wrong with my design".
triggers:
- "critique"
- "design review"
- "design audit"
- "5 维度评审"
- "5-dim review"
- "audit my design"
- "review my deck"
- "review my landing page"
- "评审"
- "复盘"
ocd:
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 维度专家评审
Produce a single-file HTML "design review report" that scores any
artifact across 5 dimensions and proposes actionable fixes. Inspired by
the *huashu-design* expert-critique flow.
## When to use
- After the agent (or user) generates an artifact (deck / prototype /
landing page) and the user asks "what's wrong with this?" or
"review this"
- As a self-check loop the agent can run on its own output **before**
emitting it
- For comparing two variants of the same design
## What you produce
A single self-contained `<artifact type="text/html">` review report
including:
1. **Header** — what artifact was reviewed, date, reviewer ("OCD ·
Critique skill"), 1-line verdict
2. **Radar chart** (inline SVG, no library) showing the 5 scores
3. **Five dimension cards**, each with:
- Score 0–10 (with band: 0–4 *Broken* · 5–6 *Functional* · 7–8 *Strong*
· 9–10 *Exceptional*)
- 1-paragraph evidence (cite specific elements / files / lines)
- One Keep / Fix / Quick-win bullet
4. **Combined action lists** at the bottom:
- **Keep** — what's working, don't touch
- **Fix** — P0 / P1 issues that are visually expensive
- **Quick wins** — 5–15 minute tweaks with disproportionate impact
## The 5 dimensions
> Each dimension is independent — a deck can be 9/10 on Innovation but
> 4/10 on Hierarchy and the report should say so plainly. Don't average
> away interesting failures.
### 1. Philosophy consistency · 哲学一致性
> Does the artifact pick a clear *direction* and stick to it through
> every micro-decision (chrome / kicker / spacing / accent)?
**Evidence to look for:**
- Is there one declared design direction (e.g. Monocle / WIRED /
Kinfolk) or is it three styles in a trench coat?
- Does the chrome / kicker vocabulary stay in one register, or does
page 3 say "Vol.04 · Spring" and page 7 say "BUT WAIT 🔥"?
- Are accent / serif / mono used by the same rule throughout?
**0–4** Three styles fighting each other. **5–6** One direction but
half the elements drift. **7–8** Coherent, occasional drift on edge
pages. **9–10** Every element argues for the same thesis.
### 2. Visual hierarchy · 视觉层级
> Can a stranger figure out what to read first, second, third — without
> being told?
**Evidence to look for:**
- Is the largest type clearly the most important thing on each page?
- Do mono / serif / sans roles match the information's *role* (meta /
body / display)?
- Lots of "loud" elements competing? Or a clear primary + secondary +
tertiary tier?
**0–4** Everything shouts. **5–6** Hierarchy works on hero pages but
breaks on body. **7–8** Clear tiers, occasional collision. **9–10** Eye
moves with zero friction.
### 3. Detail execution · 细节执行
> The 90/10 stuff — alignment, leading, kerning at large sizes, image
> framing, foot/chrome polish, edge-case spacing.
**Evidence to look for:**
- Big-stat pages: does the number sit on a baseline, or float?
- Left/right column tops aligned in `grid-2-7-5`?
- `frame-img` + caption proportions consistent across pages?
- Mono labels: same letter-spacing? same uppercase rule?
- Any orphaned `<br>` causing 1-character lines?
**0–4** Visible tape and string. **5–6** Most pages clean, 1–2
ragged. **7–8** Polished, expert eye finds 2–3 misses. **9–10**
Magazine-grade — the kind of detail that makes printed-by-hand
typographers nod.
### 4. Functionality · 功能性
> Does the artifact *work* for its intended use? Click targets, nav,
> readability at presentation distance, copy-paste-ability for code
> blocks, mobile fallback if relevant.
**Evidence to look for:**
- Deck: keyboard / wheel / touch nav all working? Iframe scroll
fallback?
- Landing: CTA above the fold? Phone number tappable on mobile?
- Runbook: code blocks copyable, mono font, no smart quotes?
- Critical info readable from 4m away (large screen presentation)?
**0–4** Visually fine but doesn't accomplish its job. **5–6** Core
flow works, edge cases broken. **7–8** Robust through normal use.
**9–10** Defensively engineered — handles iframe / fullscreen / paste
/ print without flinching.
### 5. Innovation · 创新性
> Does this push past the median? Is there one element that makes
> people lean in?
**Evidence to look for:**
- One *unexpected* layout / motion / typographic move that wasn't
required?
- Or 100% safe — could be any deck/landing from any agency?
- Is the innovation *earned* (matches direction) or grafted on
(random WebGL on a Kinfolk slow-living deck)?
**0–4** Generic AI-slop median. **5–6** Competent and unmemorable.
**7–8** One memorable moment, the rest solid. **9–10** Multiple
moves you'd steal — but each one obviously serves the thesis.
## Scoring discipline (read before you score)
- **Always cite evidence** — "scored 4 because hero page mixes
Playfair display with Inter sans on the same line" beats "feels
inconsistent". Numbers without evidence get rejected.
- **Don't average up** — if Hierarchy is 5 because page 3 is broken,
don't bump to 7 because pages 1 and 2 are fine. The score is the
*worst sustained band*.
- **Don't grade-inflate** — a 7 means *strong*, not *acceptable*. If
every score is 7+, you're not reviewing critically.
- **Innovation is allowed to be low** — 5/10 is fine for production
deliverables. Don't punish *appropriate* conservatism.
## Workflow
### Step 1 — Acquire the artifact
Three modes:
1. **Project file** — user said "review the index.html I just made":
open it from the project folder.
2. **Pasted HTML** — user pasted code in the chat: read it from the
message.
3. **Generated by you in this turn** — you just emitted an artifact
above and want to self-critique: re-read your own `<artifact>`.
If multiple HTML files exist, ask which one (don't review all).
### Step 2 — Read enough to score
Skim the entire `<style>`, then read 6–8 representative content
blocks. **Do not score from frontmatter alone.** The score depends on
*executed* design, not declared intent.
### Step 3 — Score with evidence
For each of the 5 dimensions, write the score and a 30–80 word
evidence paragraph that names specific elements. Use line numbers,
class names, page numbers.
Example:
```
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.
```
### Step 4 — Build the action lists
Aggregate the 5 evidence paragraphs into:
- **Keep** (3–5 bullets) — concrete things working that the user must
not break in the next iteration. Cite by class / page / element.
- **Fix** (3–6 bullets) — must-do, ordered by *visual cost saved per
minute spent*. Each bullet ≤ 1 sentence.
- **Quick wins** (3–5 bullets) — 5–15 minutes each, high
signal-to-noise (e.g. "swap `display:flex` for `grid` on page 4 to
fix the column drift").
### Step 5 — Emit the report HTML
Build a single file:
- Header: artifact name + reviewer credit + date
- Big radar chart (SVG)
- 5 dimension cards in a 1-column or 2-column grid
- Three action lists at the bottom with checkbox affordance
Use the active DESIGN.md tokens if one exists; otherwise default to a
neutral light theme (off-white background, near-black text, one accent
for radar fill).
## Output contract
```
<artifact identifier="critique-<artifact-slug>" type="text/html" title="Critique · <Artifact Title>">
<!doctype html>
<html>...</html>
</artifact>
```
One sentence before the artifact ("Reviewed X across 5 dimensions, see
report below.") and **stop after `</artifact>`** — do not paraphrase
the report in chat; the user will read the artifact.
## Hard rules
- **5 scores, every time** — partial reports (e.g. only 3 dimensions)
are not allowed.
- **Evidence per score** — no "feels off" / "needs work". If you
can't cite an element, the score is not justified.
- **Don't grade-inflate** — overall mean above 8 is suspicious; check
yourself.
- **Don't review your own artifact in the same turn** — the user
needs to see it first. Self-critique only on explicit request
("now critique what you just made").
- **Single-file HTML only** — no external CSS/JS. Inline everything.
- **Radar chart is mandatory** — gives the report a recognizable
silhouette and lets the user spot weak axes at a glance.
skills/critique/example.html
+671
View File
@@ -0,0 +1,671 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Critique · magazine-web-ppt example deck</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>5-Dim Critique</span>
<span>·</span>
<span>2026.04.27</span>
<span>·</span>
<span>OCD · Critique skill</span>
</div>
<h1 class="hd-title">magazine-web-ppt<br>example deck</h1>
</div>
<p class="hd-verdict">
<strong>7.4 / 10 overall.</strong> Strong philosophical
backbone and detail — the deck looks like one designer made
every slide. Innovation is conservative on purpose; functionality
loses points only because the example ships without real images.
</p>
</header>
<!-- ============ Radar + Score table ============ -->
<section class="top">
<div class="radar-card">
<div class="lbl">Score Radar</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="Score radar chart">
<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">Overall · <span class="n">7.4</span> / 10 · band <em>Strong</em></div>
</div>
<div class="scores" aria-label="Score breakdown">
<div class="score-row">
<div class="score-name">Philosophy consistency<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">Visual hierarchy<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">Detail execution<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">Functionality<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">Innovation<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">Dimension reports<span class="en">Evidence per axis</span></h2>
<div class="dim-grid">
<article class="dim">
<div class="dim-head">
<div class="dim-name">Philosophy consistency<span class="en">Phil. cons. · 哲学一致性</span></div>
<div class="dim-score">8<span class="denom">/10</span></div>
</div>
<p class="dim-evidence">
The 9-slide rhythm reads as a single direction (Monocle Editorial)
from cover to close. <code>chrome</code> vocabulary stays in one
register: <em>"A Talk · 2026.04.22"</em>, <em>"Act II · 04 / 09"</em>,
<em>"Page 06 · 金句"</em>. The drift is the <code>kicker</code> on
slide 5 — <em>"Act II"</em> is good, but the slide title <em>"折叠"</em>
is a one-character display word that competes with the Act number for
eyeballs. Worth tightening.
</p>
<div class="dim-tags">
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The chrome / kicker / foot vocabulary across all 9 slides — it's the deck's identity.</span></div>
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 5: bump the kicker to <em>"Act II · 折叠"</em> or shrink the display title to clear the hierarchy.</span></div>
</div>
</article>
<article class="dim">
<div class="dim-head">
<div class="dim-name">Visual hierarchy<span class="en">Hier. · 视觉层级</span></div>
<div class="dim-score">7<span class="denom">/10</span></div>
</div>
<p class="dim-evidence">
Hero pages (1, 5, 7, 9) are textbook — display serif dominates,
<code>kicker</code> and <code>meta-row</code> recede. Body pages
mostly hold up: stat-cards on slide 2 use <code>.stat-label</code>
(mono small) → <code>.stat-nb</code> (serif large) → <code>.stat-note</code>
(sans body), three tiers, no collision. The miss is slide 3's
<code>callout</code> — its left-rule competes visually with the
<code>.h-xl</code> heading because both sit at the same x-coord
and similar weight. Eye doesn't know if to read heading-first or
quote-first.
</p>
<div class="dim-tags">
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>Stat-card 3-tier structure on slide 2 — copy this everywhere.</span></div>
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 3: indent the <code>callout</code> by <code>2vw</code> or push it below the lead so it visibly belongs to a lower tier.</span></div>
</div>
</article>
<article class="dim">
<div class="dim-head">
<div class="dim-name">Detail execution<span class="en">Detail · 细节执行</span></div>
<div class="dim-score">8<span class="denom">/10</span></div>
</div>
<p class="dim-evidence">
Magazine-grade in places — every <code>.foot</code> aligns
baseline-to-baseline across all 9 slides; <code>.meta-row</code>
uses one mono spec throughout (<code>.16em</code> tracking,
uppercase). Pipeline on slide 4 keeps perfect grid even when
column count drops to 3. Two real misses: (1) Slide 3 image-slot
uses <code>aspect-ratio:16/10</code> but the placeholder text
inside is centered which makes it look hollow at viewport widths
≤ 1100px; (2) the dot-nav at the bottom overlaps the foot text
on slide 5 because the hero centered grid eats vertical space.
</p>
<div class="dim-tags">
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The mono <code>.foot</code> spec — it's the deck's grace note, do not change letter-spacing.</span></div>
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 5 hero grid: cap inner content at <code>min-height:78vh</code> so the foot stays clear of the dot-nav.</span></div>
</div>
</article>
<article class="dim">
<div class="dim-head">
<div class="dim-name">Functionality<span class="en">Func. · 功能性</span></div>
<div class="dim-score">6<span class="denom">/10</span></div>
</div>
<p class="dim-evidence">
Keyboard / wheel / touch navigation works correctly inside the
host iframe (verified: ←/→/PageUp/PageDown all advance). ESC
opens the index overview, dot clicks register. Big miss is the
example ships <em>without real images</em> — slide 3 shows a
dashed <code>.img-slot</code> placeholder where a product
screenshot belongs, which is the right call for an example file
but means the user can't judge how the layout holds at full
fidelity. Second miss: <code>iframe</code> sandbox is
<code>allow-scripts</code> only in the example card, so the
WebGL background loads but the dot-nav inside the iframe takes
a click before keyboard nav captures focus.
</p>
<div class="dim-tags">
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The 5-bug-fix nav script (real scroller detection, capture-phase listeners) — proven and stable.</span></div>
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Add a <code>data:</code> URI placeholder image (1×1 colored gradient) in the example so slide 3's layout reads at any width.</span></div>
</div>
</article>
<article class="dim">
<div class="dim-head">
<div class="dim-name">Innovation<span class="en">Innov. · 创新性</span></div>
<div class="dim-score">5<span class="denom">/10</span></div>
</div>
<p class="dim-evidence">
Innovation is intentionally conservative — this is a port of
歸藏's guizang-ppt-skill, and the value proposition is
<em>predictability</em>, not novelty. The dual WebGL background
(Holographic Dispersion on dark, Spiral Vortex on light) is the
one earned moment; the cross-fade on slide-theme transitions is
subtle and well-timed. But everything else (layout vocabulary,
chrome / foot pattern, theme presets) is faithfully replicated
from the upstream. There is no "lean-forward" surprise that
makes a viewer screenshot a slide. For its declared purpose
(Monocle Editorial direction), this is appropriate. For an
AI demo-day deck, it's a missed opportunity.
</p>
<div class="dim-tags">
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The dual-shader cross-fade — it's the only "magic" the deck performs and it earns its keep.</span></div>
<div class="tag-row"><span class="tag tag-qw">Quick win</span><span>Add one <em>typographic</em> moment per deck — e.g. an oversized italic <code>em</code> kicker that breaks the grid on the closing slide.</span></div>
</div>
</article>
</div>
<!-- ============ Action lists ============ -->
<h2 class="section-title">Action lists<span class="en">Keep · Fix · Quick wins</span></h2>
<div class="lists-grid">
<section class="list-card">
<div class="list-head keep"><span>Keep</span><span class="ct">don't break it</span></div>
<ul>
<li>The 9-page rhythm: <code>hero dark → light → dark → light → hero light → dark → hero dark → light → hero light</code>. It's the gold standard.</li>
<li>Dual WebGL backdrops + the <code>1.2s</code> cross-fade between dark and light slides.</li>
<li><code>chrome</code> / <code>kicker</code> / <code>foot</code> vocabulary — they carry the Monocle direction.</li>
<li>3-tier <code>stat-card</code> on slide 2 (<code>label</code> → <code>nb</code> → <code>note</code>).</li>
</ul>
</section>
<section class="list-card">
<div class="list-head fix"><span>Fix</span><span class="ct">P0 — visually expensive</span></div>
<ul>
<li>Slide 3 callout indent — currently competes with <code>.h-xl</code>; push 2vw right or below the lead.</li>
<li>Slide 5 hero centered grid — cap content height at <code>78vh</code> so foot doesn't overlap the dot nav.</li>
<li>Slide 3 add a <code>data:</code> gradient placeholder image so the layout reads at narrow widths even without real assets.</li>
<li>Slide 5 kicker / display: pick one to be primary — currently both fight.</li>
</ul>
</section>
<section class="list-card">
<div class="list-head qw"><span>Quick wins</span><span class="ct">5–15 min, high signal</span></div>
<ul>
<li>Inject <code>data-screen-label</code> on every slide for accessibility + grep self-checks.</li>
<li>Add one oversized italic <em>en</em> moment on the closing slide for typographic surprise.</li>
<li>Move the <code>#hint</code> overlay from <code>opacity:.4</code> to <code>.55</code> on hero pages — currently invisible.</li>
<li>Add a print stylesheet (one slide per page) so PDF export carries the rhythm.</li>
</ul>
</section>
</div>
<footer class="ft">
<span>OCD · Critique skill · v0.1</span>
<span>5 dimensions · Phil / Hier / Det / Func / Innov</span>
<span class="br">github.com/alchaincyf/huashu-design</span>
</footer>
</div>
</body>
</html>