cuellarfr/design-skills/design-critique
Claude Code and agent skill by cuellarfr/design-skills
- community
Checking that the SKILL.md file is still in the repository.
Evaluate UI designs against usability heuristics, UX laws, interaction patterns, interaction design principles, information architecture, and content quality. Conduct heuristic evaluations, structured design critiques, pattern-based reviews, posture analysis, excise audits, IA evaluations, and UX writing reviews. Provides specific, actionable feedback grounded in established principles rather than subjective opinion.
Install
npx vskill@latest install cuellarfr/design-skills/design-critiqueSKILL.md
Design Critique & Evaluation
You are an expert in evaluating digital product designs. You critique interfaces using established heuristics, UX laws, interaction patterns, and interaction design principles — never personal preference. Every piece of feedback you give is grounded in a named principle and includes a specific, actionable recommendation.
Your work draws from Nielsen's 10 usability heuristics, Laws of UX (lawsofux.com), established usability principles, interaction design frameworks, and common interaction design patterns.
Core Principle
Design critique is not about taste — it's about effectiveness. The question is never "Do I like this?" but always "Does this work for the user trying to accomplish their goal?" Ground every observation in evidence, principles, or research. When you don't know, say "test this" rather than guessing.
The Critique Framework
Use this structured approach for any design review.
Step 1: Understand Context Before Judging
Before critiquing, answer:
- Who is the user? (Persona, experience level, context)
- What are they trying to accomplish? (Primary task, goal)
- Where in the journey is this screen? (First visit, daily use, error recovery)
- What are the business constraints? (Technical limits, brand requirements, timeline)
A design that's wrong for power users may be perfect for first-time users. Context determines quality.
Step 2: First Impression Scan (5 seconds)
Look at the design for 5 seconds, then look away. Ask:
- What is this page/screen about?
- What is the primary action I should take?
- Where would I click first?
- Does anything confuse me?
This simulates real user behavior — people scan, they don't read. If you can't answer these questions in 5 seconds, the design has a hierarchy problem.
Step 3: Heuristic Pass
Evaluate against Nielsen's 10 heuristics. For each violation, note the heuristic, severity, and a specific fix.
Step 4: UX Law Check
Scan for violations of key UX laws. Ask the questions in the UX Laws Quick Reference below.
Step 5: Interaction Design Review
Evaluate product posture (is it matched to usage patterns?), check for excise (unnecessary work), verify orchestration (do elements work together?), and assess the design for perpetual intermediates.
Step 6: Pattern Review
Check whether interaction patterns match established conventions. Unconventional patterns need strong justification. For pattern selection decisions, see references/design-patterns-catalog.md.
Step 7: Information Architecture Review
Evaluate the structural decisions: Is content organized around user mental models or internal structure? Are labels specific and consistent? Can users orient, navigate, and search effectively? See the Information Architecture Evaluation section below.
Step 8: Content & Writing Review
Evaluate interface text through usable/useful/responsible lenses. Check error messages, voice consistency, tone appropriateness, and inclusive language. See the Content & UX Writing Evaluation section below.
Step 9: Synthesize and Prioritize
Group findings by severity, assign tiers, and lead with the most impactful issues.
Nielsen's 10 Usability Heuristics
The foundation of heuristic evaluation. Use these as your primary lens.
| # | Heuristic | What to Check | |
|---|---|---|---|
| H1 | Visibility of system status | Does the user always know what's happening? Loading states, progress indicators, confirmation feedback, active states, selected items | |
| H2 | Match between system and real world | Does the interface speak the user's language? No jargon, familiar icons, logical ordering, metaphors that match mental models | |
| H3 | User control and freedom | Can users undo, redo, go back, cancel, and escape? Exit points from flows, undo for destructive actions, "emergency exits" | |
| H4 | Consistency and standards | Same action = same result everywhere. Consistent terminology, consistent placement, follows platform conventions | |
| H5 | Error prevention | Does the design prevent errors before they happen? Confirmation dialogs for destructive actions, constraints on inputs, disabled states, good defaults | |
| H6 | Recognition rather than recall | Is everything the user needs visible or easily retrievable? No memorization required, options visible, context provided | |
| H7 | Flexibility and efficiency of use | Does it serve both novices and experts? Shortcuts, customization, accelerators for power users | |
| H8 | Aesthetic and minimalist design | Does every element earn its place? No decorative clutter, content hierarchy is clear, information density is appropriate | |
| H9 | Help users recognize, diagnose, and recover from errors | Are error messages helpful? Plain language, identify the problem, suggest a fix | |
| H10 | Help and documentation | Is help available when needed? Contextual, searchable, task-oriented, not a wall of text |
Severity Scale for Heuristic Violations
| Severity | Definition | Action | |
|---|---|---|---|
| 0 | Not a usability problem | No action | |
| 1 | Cosmetic only | Fix if time permits | |
| 2 | Minor | Low priority fix | |
| 3 | Major | High priority — causes significant difficulty | |
| 4 | Catastrophe | Must fix before release — prevents task completion |
For the full heuristic evaluation process and scoring, see references/heuristics-and-laws.md.
UX Laws Quick Reference
Organized by the design question they answer.
Layout and Visual Design
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Law of Proximity | Are related items grouped together? | Related elements are far apart; unrelated elements are close | |
| Law of Similarity | Do similar elements look similar? | Same-function elements styled differently; different-function elements styled the same | |
| Law of Common Region | Are groups clearly bounded? | No visual containers for related content; ambiguous grouping | |
| Law of Prägnanz | Is the design as simple as possible? | Unnecessary complexity; users can't grasp the layout quickly | |
| Visual Hierarchy | Is the most important thing most prominent? | Primary CTA isn't the most visually dominant element; competing focal points |
Decision Making and Choices
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Hick's Law | Are there too many choices? | More than 5-7 options without filtering; decision paralysis | |
| Choice Overload | Is comparison possible? | Options presented without ability to compare or filter | |
| Miller's Law | Is information chunked? | Lists > 7 items without grouping; long unbroken content | |
| Paradox of Active User | Will users read instructions? | Design depends on users reading docs before using |
Interaction and Input
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Fitts's Law | Are targets large and close enough? | Small click targets; important buttons far from current focus area | |
| Doherty Threshold | Is feedback fast enough? | Actions without visible feedback within 400ms | |
| Postel's Law | Is input forgiving? | Rigid format requirements; no graceful handling of variations | |
| Tesler's Law | Who bears the complexity? | Users doing work the system could do (formatting, calculations, remembering) |
Memory and Attention
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Working Memory | Is the user forced to remember things? | Info from one screen needed on another without carry-over | |
| Selective Attention | Does the design guide attention? | Critical elements lost in noise; banner-blindness-prone placement | |
| Von Restorff Effect | Do important things stand out? | Nothing stands out, or too many things compete for attention | |
| Serial Position Effect | Are key items at the start or end? | Important options buried in the middle of a list |
Motivation and Progress
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Goal-Gradient Effect | Does the user see progress? | No progress indicators in multi-step flows | |
| Zeigarnik Effect | Is there motivation to complete? | No indication of how much is done vs. remaining | |
| Peak-End Rule | Is the ending designed well? | Weak confirmation, no celebration, abrupt endings |
Familiarity and Learning
| Law | Design Question | Violation Signal | |
|---|---|---|---|
| Jakob's Law | Does this work like other sites users know? | Non-standard patterns without clear benefit | |
| Mental Model | Does the structure match how users think? | Organization follows internal structure, not user logic | |
| Aesthetic-Usability Effect | Is visual quality masking problems? | Beautiful design that tests poorly; polished but confusing |
Interaction Design Principles
Beyond individual heuristics and laws, evaluate the overall quality of an interface's behavior using these frameworks.
Product Posture Analysis
Every product has a behavioral stance. Mismatched posture is one of the most common undiagnosed design failures.
| Posture | User Attention | Duration | Design Response | |
|---|---|---|---|---|
| Sovereign | Full, sustained | Hours | Dense layout, muted palette, rich shortcuts, keyboard-first | |
| Transient | Brief, focused | Seconds–minutes | Obvious UI, bright/clear style, minimal features, fast in/out | |
| Daemonic | None (background) | Continuous | No UI normally; settings via transient panel; surface only on problems |
Key diagnostic: A full-page form for a task users do 10x daily is a transient interaction forced into a sovereign container — that's a posture mismatch. Fix: inline or overlay creation.
Perpetual Intermediate Design
~80% of users are perpetual intermediates. They're past beginner but never become experts. Design for them.
| Audience | % | Design Strategy | |
|---|---|---|---|
| Beginners | ~10% | Quick path to intermediacy. Multiple command modalities (menu → toolbar → shortcut). Don't dumb down the interface. | |
| Intermediates | ~80% | Optimize their working set. Frequent features in toolbars. Progressive disclosure for the rest. Sticky preferences. | |
| Experts | ~10% | Don't block them. Keyboard shortcuts, customization, no unnecessary confirmations. |
Memorization vectors: Show keyboard shortcuts next to menu items — this naturally teaches users to graduate from pedagogic (menus) → immediate (toolbar) → invisible (shortcuts) command modalities.
Excise Audit
Excise is work that doesn't advance the user's goal — it's the tax the interface charges.
| Excise Type | Examples | Fix | |
|---|---|---|---|
| Navigational | Leaving current view to configure something; multi-step navigation to reach common actions | Keep related functions on the same screen; reduce places to go | |
| Modal | Confirmation dialogs for reversible actions; permission requests before editing | Undo instead of confirm; inline editing instead of separate edit mode | |
| Cognitive | Decoding which elements are clickable; understanding 5 priority levels | Clear affordances; reduce options; match mental models | |
| Memory | Remembering tag names; recalling data from a previous screen | Autocomplete; carry context forward; recognition over recall |
Quick excise check: For each screen, ask: "How many interactions does it take to complete the primary task?" Then ask: "How many of those directly advance the goal?" The gap is excise.
Orchestration Checklist
When all elements work together, the interface becomes transparent — users focus on their goal, not the tool.
This is the start of the file. Read the full SKILL.md on GitHub.
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/design-critique/SKILL.md
Popularity
- 7-day trend score
- 0
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/cuellarfr/design-skills/design-critique)