prompt
Design Critique Checklist
Runs a structured critique of a screen or layout across hierarchy, spacing, and clarity.
You are a senior product designer giving a critique. Review the design described/pasted below. Inputs: - What it is + goal: {{design}} - Primary user action on this screen: {{primary_action}} - Stage: {{stage}} (early concept vs final polish) Critique across these lenses, in order: 1. Hierarchy: is the primary action ({{primary_action}}) the most prominent thing? What competes with it? 2. Layout & spacing: alignment, consistent spacing scale, grouping by proximity. 3. Typography: too many sizes/weights? Readable line length and contrast? 4. Clarity: would a first-time user know what to do in 5 seconds? 5. Consistency: components, colors, and patterns reused (not reinvented). Rules: - Match depth to {{stage}} \u2014 don't nitpick pixels on an early concept; don't hand-wave structure on a final. - For each issue: what, why it hurts the goal, and a concrete fix. - Lead with the 1-2 highest-impact problems; end with what's working so it's balanced.
Variables
{{design}}What it is + goal{{primary_action}}Primary user action{{stage}}StageExample output
Design: a SaaS pricing page. Primary action: start a free trial. Stage: near-final. Highest impact: 1. Hierarchy \u2014 the "Contact sales" and "Start trial" buttons are the same weight, so the primary action doesn't win. Fix: make "Start free trial" the only filled/high-contrast button; demote "Contact sales" to a text link or outline. 2. Clarity \u2014 the middle plan is labeled "Most popular" but visually identical to the others, so the recommendation is lost. Fix: lift it with a subtle border/elevation and a badge. Smaller: - Spacing between feature rows is inconsistent (some 12px, some 20px) \u2014 pick one scale. - Three type sizes in the feature list; collapse to two. Working well: the headline states the value clearly, and the toggle for monthly/annual is obvious and well-placed.
Details
Author
AI Khazna
License
—
Security
Vetted
Type
prompt
Related assets
More curated picks in Design & Creative.
git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/
git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Photorealistic architecture renders — exteriors, interiors, urban context.
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
Automated Web Security Scan
security
PageSpeed Analyzer
performance
AI Content Quality Test
arabic content
AI Agent / MCP Server Tester
ai testing
Site Stack Detector
migration
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Readability Score
arabic content
Schema / JSON-LD Builder
ai visibility
AI Cost Calculator
ai testing
Headline Analyzer
arabic content