Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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".
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-13 | ✗→✓ | ▲ Improved | 59% | 0% |
| case-17 | ✗→✓ | ▲ Improved | 38% | 0% |
| case-06 | ✓→✗ | ▼ Worse | 38% | 0% |
| case-21 | ✓→✓ | ＝ Same ✓ | 95% | 0% |
| case-22 | ✓→✓ | ＝ Same ✓ | 38% | 0% |
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.
landing page) and the user asks "what's wrong with this?" or "review this"
emitting it
A single self-contained <artifact type="text/html"> review report including:
Critique skill"), 1-line verdict
· 9–10 Exceptional)
> 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.
> Does the artifact pick a clear direction and stick to it through > every micro-decision (chrome / kicker / spacing / accent)?
Evidence to look for:
Kinfolk) or is it three styles in a trench coat?
page 3 say "Vol.04 · Spring" and page 7 say "BUT WAIT 🔥"?
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.
> Can a stranger figure out what to read first, second, third — without > being told?
Evidence to look for:
body / display)?
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.
> The 90/10 stuff — alignment, leading, kerning at large sizes, image > framing, foot/chrome polish, edge-case spacing.
Evidence to look for:
grid-2-7-5?frame-img + caption proportions consistent across pages?<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.
> 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:
fallback?
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.
> Does this push past the median? Is there one element that makes > people lean in?
Evidence to look for:
required?
(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.
Playfair display with Inter sans on the same line" beats "feels inconsistent". Numbers without evidence get rejected.
don't bump to 7 because pages 1 and 2 are fine. The score is the worst sustained band.
every score is 7+, you're not reviewing critically.
deliverables. Don't punish appropriate conservatism.
Three modes:
open it from the project folder.
message.
above and want to self-critique: re-read your own <artifact>.
If multiple HTML files exist, ask which one (don't review all).
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.
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.Aggregate the 5 evidence paragraphs into:
not break in the next iteration. Cite by class / page / element.
minute spent. Each bullet ≤ 1 sentence.
signal-to-noise (e.g. "swap display:flex for grid on page 4 to fix the column drift").
Build a single file:
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).
<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.
are not allowed.
can't cite an element, the score is not justified.
yourself.
needs to see it first. Self-critique only on explicit request ("now critique what you just made").
silhouette and lets the user spot weak axes at a glance.
Other measured skills in the registry, with their headline benchmark lift.