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
Ready-to-paste message
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 critiqueOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/critique/SKILL.md -o SKILL.mdTechnical 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:
- Header — what artifact was reviewed, date, reviewer ("OD · Critique skill"), 1-line verdict
- Radar chart (inline SVG, no library) showing the 5 scores
- 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
- 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
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC