UX Design Critique

VerifiedSafe

Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.

Sby Skills Guide Bot
ProductivityAdvanced
7/24/2026
Claude CodeCursorWindsurfCopilotCodex
#design-critique#ux-evaluation#visual-hierarchy#ai-slop-detection#interface-review

Recommended for

Automated summary

A skill for conducting a comprehensive design critique of an interface, evaluating visual hierarchy, information architecture, emotional resonance, and detecting AI-generated patterns.

Strengths

  • Structured evaluation across ten dimensions
  • Emphasis on detecting AI-generated designs
  • Actionable feedback similar to a design director
  • Covers microcopy and edge cases

Limitations

  • Requires existing design context
  • Highly subjective evaluation
  • May not apply to very minimal interfaces
When to use it

When you need a thorough, human-like review of a UI design before launch or after iteration.

When not to use it

When you only need quick technical feedback or a simple checklist, not a deep design assessment.

Security analysis

Safe
Quality score90/100

The skill is a design critique guide with no executable commands or harmful instructions. It poses no security risk.

No concerns found

How this analysis is made

Examples

Critique homepage design
Critique the homepage of my app. The area is the landing page.
Detect AI-generated patterns
Run a design critique focusing on AI slop detection for my dashboard.

name: critique description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback. user-invokable: true args:

  • name: area description: The feature or area to critique (optional) required: false

MANDATORY PREPARATION

Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: what the interface is trying to accomplish.


Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.

Design Critique

Evaluate the interface across these dimensions:

1. AI Slop Detection (CRITICAL)

This is the most important check. Does this look like every other AI-generated interface from 2024-2025?

Review the design against ALL the DON'T guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.

The test: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.

2. Visual Hierarchy

  • Does the eye flow to the most important element first?
  • Is there a clear primary action? Can you spot it in 2 seconds?
  • Do size, color, and position communicate importance correctly?
  • Is there visual competition between elements that should have different weights?

3. Information Architecture

  • Is the structure intuitive? Would a new user understand the organization?
  • Is related content grouped logically?
  • Are there too many choices at once? (cognitive overload)
  • Is the navigation clear and predictable?

4. Emotional Resonance

  • What emotion does this interface evoke? Is that intentional?
  • Does it match the brand personality?
  • Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
  • Would the target user feel "this is for me"?

5. Discoverability & Affordance

  • Are interactive elements obviously interactive?
  • Would a user know what to do without instructions?
  • Are hover/focus states providing useful feedback?
  • Are there hidden features that should be more visible?

6. Composition & Balance

  • Does the layout feel balanced or uncomfortably weighted?
  • Is whitespace used intentionally or just leftover?
  • Is there visual rhythm in spacing and repetition?
  • Does asymmetry feel designed or accidental?

7. Typography as Communication

  • Does the type hierarchy clearly signal what to read first, second, third?
  • Is body text comfortable to read? (line length, spacing, size)
  • Do font choices reinforce the brand/tone?
  • Is there enough contrast between heading levels?

8. Color with Purpose

  • Is color used to communicate, not just decorate?
  • Does the palette feel cohesive?
  • Are accent colors drawing attention to the right things?
  • Does it work for colorblind users? (not just technically—does meaning still come through?)

9. States & Edge Cases

  • Empty states: Do they guide users toward action, or just say "nothing here"?
  • Loading states: Do they reduce perceived wait time?
  • Error states: Are they helpful and non-blaming?
  • Success states: Do they confirm and guide next steps?

10. Microcopy & Voice

  • Is the writing clear and concise?
  • Does it sound like a human (the right human for this brand)?
  • Are labels and buttons unambiguous?
  • Does error copy help users fix the problem?

Generate Critique Report

Structure your feedback as a design director would:

Anti-Patterns Verdict

Start here. Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.

Overall Impression

A brief gut reaction—what works, what doesn't, and the single biggest opportunity.

What's Working

Highlight 2-3 things done well. Be specific about why they work.

Priority Issues

The 3-5 most impactful design problems, ordered by importance:

For each issue:

  • What: Name the problem clearly
  • Why it matters: How this hurts users or undermines goals
  • Fix: What to do about it (be concrete)
  • Command: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)

Minor Observations

Quick notes on smaller issues worth addressing.

Questions to Consider

Provocative questions that might unlock better solutions:

  • "What if the primary action were more prominent?"
  • "Does this need to feel this complex?"
  • "What would a confident version of this look like?"

Remember:

  • Be direct—vague feedback wastes everyone's time
  • Be specific—"the submit button" not "some elements"
  • Say what's wrong AND why it matters to users
  • Give concrete suggestions, not just "consider exploring..."
  • Prioritize ruthlessly—if everything is important, nothing is
  • Don't soften criticism—developers need honest feedback to ship great design

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/ux-design-critique-mrwakehu/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/ux-design-critique-mrwakehu' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/ux-design-critique-mrwakehu/download' --output '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md.part' && mv '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md.part' '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && test -s '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/critique' && cp -R '.skill-downloads/ux-design-critique-mrwakehu' '.claude/skills/critique'

Cursor
test -f '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && test -s '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/critique' && cp -R '.skill-downloads/ux-design-critique-mrwakehu' '.cursor/skills/critique'

Codex
test -f '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && test -s '.skill-downloads/ux-design-critique-mrwakehu/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/critique' && cp -R '.skill-downloads/ux-design-critique-mrwakehu' '.agents/skills/critique'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/ux-design-critique-mrwakehu'

openskills read 'ux-design-critique-mrwakehu'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/ux-design-critique-mrwakehu/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills