Skip to content
Get packs

Design Critique Review

Scores any HTML design on 5 dimensions and produces a single-file review report with fixes

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

Once installed, the agent can review an HTML design (a slide deck, prototype, or landing page) and grade it from 0 to 10 across five areas: philosophy consistency, visual hierarchy, detail execution, functionality, and innovation. It cites specific elements as evidence and produces one self-contained HTML report with a radar chart, scores, and Keep / Fix / Quick-wins lists. It is designed to be used on the agent's own output as well as on user files.

Great for

  • Designers who want a structured second opinion on a deck or landing page
  • Developers or founders checking a generated prototype before sharing it
  • Teams comparing two variants of the same design

Skip it if

  • Reviewing designs that are not HTML, since the skill is written for HTML artifacts (the reason: it reads markup and styles directly)
  • Expecting objective measurements such as accessibility audits or real device testing (the scores are judgement based on reading the code)

Try asking

  • “Run a 5-dimension critique on the landing page I just generated and give me Keep / Fix / Quick-wins”
  • “Audit my design and tell me what's wrong with the hierarchy on each slide”
  • “Compare these two HTML variants of the pricing page and score both”
Step-by-step guide: how to use Design Critique ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    critique.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip critique.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip critique.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at one specific HTML file, since it asks which file to use if several exist
  • Ask for a comparison between two variants to see which direction scores better
  • Treat the scores as a structured checklist for revisions rather than a definitive grade

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.