Open Design Critique Skill Guide

Skill Overview

Critique is a 5-dimension expert-level design review skill that can comprehensively review any HTML artifact. The output is a standalone HTML review report containing a radar chart (SVG), 5 dimension cards (with evidence and scores), and a Keep / Fix / Quick-wins action list.

The 5 dimensions are each scored independently (0-10 points), and average scores are not used to mask problems. If Hierarchy is 5 points but Innovation is 9 points, the report will reflect this faithfully.

Trigger Keywords

critique, design review, design audit, 5-dimension review, 5-dim review
audit my design, review my deck, review my landing page
review, retrospective

When to Use

Request a review after generating a design
Compare two design options
Self-check (review before generating)
User asks, "What's wrong with this design?"
Agent's self-check loop before output

Usage

Natural Language Triggers

Review the design from earlier
5-dimension review
Do a design review of the landing page
Audit this deck for me

Specifying a Skill

Use the critique skill to review.

Workflow

Acquire the artifact, project files / pasted HTML / artifact generated just now
Read carefully, scan <style> + 6-8 representative content blocks
Score with evidence, write a 30-80 character evidence paragraph for each dimension (mention specific class / page number / element)
Consolidate the action list, Keep (3-5 items) / Fix (3-6 items, prioritized P0/P1) / Quick wins (3-5 items, 5-15 minute changes)
Output review report HTML

Output Format

Single-file HTML review report:

Header: artifact name + reviewer + date + one-sentence verdict
Radar chart (drawn in SVG, scores for 5 dimensions)
5 dimension cards (score + evidence paragraph + Keep/Fix/Quick-win)
Bottom action list (Keep / Fix / Quick wins)

Scoring ranges: 0-4 Broken, 5-6 Functional, 7-8 Strong, 9-10 Exceptional

5 Dimensions

Dimension	What it assesses
Philosophical consistency	Whether the design direction is clear and consistent, and whether every page tells "the same story"
Visual hierarchy	Whether a stranger can tell the first, second, and third reading order at a glance
Detail execution	Alignment, spacing, letter spacing, image frames, footer polish
Functionality	Whether it meets the use cases (keyboard navigation, CTA, readability)
Innovation	Whether there are design elements that stand out

Scoring Discipline

Always provide evidence: "scored 4 because the hero page mixes Playfair and Inter" is better than "feels inconsistent"
Do not adjust scores upward on average: the worst sustained range determines the score
Do not inflate scores: if everything is 7+, you have not done a real review
Innovation can score low: 5/10 is fine, do not punish "appropriate conservatism"

Practical Examples

Example 1: Reviewing a Magazine PPT

User: "Review the magazine PPT I just generated using the 5 dimensions."

Generate the review report:

Philosophical consistency: 8/10, the Monocle direction is clear, but page 7 uses an emoji, which breaks consistency
Visual hierarchy: 7/10, the hero page is clear, but the font size differences on body pages are not large enough
Detail execution: 6/10, the stat-cards are cleanly aligned, but the right-column footer on page 8 is too high
Functionality: 8/10, page turning is smooth, and keyboard, touch, and scroll wheel all work normally
Innovation: 7/10, the WebGL background is a highlight, and the rest is relatively conservative

Example 2: Reviewing a Landing Page

User: "Review this SaaS landing page"

The report points out:

Keep: clear hero hierarchy, restrained accent usage, correct CTA placement
Fix: inconsistent font sizes in the pricing card, issues with the mobile breakpoint
Quick wins: change the grid to fix the offset on page 4, unify the caption font

Related Skills

Example Use Cases

Design team daily stand-up: Every morning, the UX team conducts a 5-dimension review of the landing pages generated the previous day, quickly identifying visual hierarchy and detail execution issues, and completes an automated audit before the 15-minute stand-up. Final check before product launch: Before a new feature launches, conduct a design audit of all HTML artifacts to ensure philosophical consistency (brand guidelines) and functionality (accessibility, responsiveness). Archive audit reports for compliance purposes.