Skip to content
Skillpedia
Interfaces (UI/UX)101k · #408

critique

Makes your agent analyze a website's design. It evaluates the look and functionality, giving suggestions for improvement.

What it does

This tool analyzes a design (like a website or presentation) across 5 key areas: philosophy, visual hierarchy, detail, functionality, and innovation. It assigns scores from 0-10 for each area and generates a report with improvement suggestions.

When to use it

  • ✓After a design is created and you want to know what can be improved.
  • ✓To check if a design follows a clear and consistent direction.
  • ✓To compare two different versions of the same design.

Example of what to ask your AI

“Perform a design review of the website you just created.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/design-templates/critique/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/design-templates/critique/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The tool reads the design's code (HTML) and evaluates each of the 5 dimensions, looking for strengths and weaknesses. It explains the reason for each score and suggests what to keep, what to fix, and what to improve quickly.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill critique

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/critique/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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 ("OD · 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)?

…

FAQ

What are the 5 dimensions?

They are 5 aspects of the design: Philosophy (consistency of the main idea), Visual Hierarchy (what the eye sees first), Detail (fine finishing), Functionality (if it works well), and Innovation (if it's original).

What format is the report in?

The report is a single HTML file that can be opened in any browser. It includes a radar chart, scores with justifications, and action lists.

What do 'Keep / Fix / Quick-win' mean?

'Keep' are the good parts that should be maintained. 'Fix' are the most important issues to correct. 'Quick-win' are small changes that yield significant results.

Details

Original description by the author

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 wro

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#408
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills