What is the design-critiquer skill?
The design-critiquer skill is a SKILL.md that has your agent review wireframes, mockups and design systems. It starts with context and a five-second first impression, applies Nielsen's heuristics and accessibility checks, then ranks findings by severity in an observation, impact and suggestion format.
The design-critiquer skill is one folder in Cortex, a larger development orchestration project. Its SKILL.md is version 1.0.0 and carries an MIT license. It holds a structured routine for giving feedback on UI work.
The skill's premise is that a good critique is not a list of personal preferences. Every observation should connect to user impact, so the designer can act on it straight away.
How a critique is structured
- Understand the screen's goal, the user and the fidelity before judging anything.
- Run a five-second test: what is this page for, what is the primary action, and where did the eye go first?
- Check hierarchy and layout, then apply Nielsen's ten usability heuristics.
- Check accessibility fundamentals and consistency with the design system.
- Rank each finding by severity and word it as observation, impact, suggestion.
What changes in your agent's output
- Feedback arrives grouped under Severity 1, 2 and 3 headings instead of one flat list of comments.
- Each point names the observation, the user impact and a concrete suggestion, as in a worked checkout example in the skill.
- A What Works Well section names what to keep, since the skill treats positive feedback as just as actionable.
- The reply can end with a top three actions summary, so the designer knows where to start.
Who the design-critiquer skill is for
Best for
- Reviewing wireframes, mockups or prototypes before development starts.
- Self-critique of your own design before you present it, or a quick peer review of a teammate's work.
- Auditing a live UI for usability and accessibility, with interface-review as a related review skill.
Not for
- Writing or implementing code. The skill names a frontend design skill for that.
- Marketing material or campaign assets, which the skill calls a different discipline.
- Brand strategy, legal or compliance review of design assets, or performance profiling of a front end.
Use it with UiChemy
Critique a Figma mockup before anyone builds it, because fixing hierarchy in design is cheaper than fixing it in code. Once the design settles, UiChemy Figma to WordPress turns it into an editable page. Click Get Started on uichemy.com.
How to install Design Critiquer Skill: Structured Feedback on UI Designs
git clone https://github.com/NickCrew/Claude-Cortex.gitClone Cortex
Run
git clone https://github.com/NickCrew/Claude-Cortex.git. The skill lives at skills/design-critiquer inside the repository.Copy only this folder
Copy skills/design-critiquer to the directory where your agent loads skills. The Cortex README says its own installer links bundled skills into
~/.claude/, so for Claude Code that is the natural home.Share the design
Attach a screenshot or describe the layout, the user and the problem, as the skill's checkout and dashboard examples do.
Use a trigger phrase
The skill description lists critique this design, give feedback on my UI, review this wireframe and what's wrong with this design.
Check that it loaded
Ask the agent to critique one screen. A working install returns a first impression, findings under Severity 1, 2 and 3 headings and a What Works Well section.
Key features
- Context before critiqueThe agent first identifies what the screen should accomplish, who the user is and whether it is a wireframe or a polished mockup, then calibrates its depth to the fidelity.
- Five-second first impressionThe agent looks at the design briefly, then answers what the page is for, what the primary action is and what the eye went to first. Unclear answers signal a hierarchy problem.
- Hierarchy and layout checkSize, color, weight and whitespace should guide the eye in the intended reading order. The primary action should dominate, related items should be grouped and spacing should look deliberate.
- Nielsen's ten heuristicsThe skill lists all ten, from visibility of system status to help and documentation, and asks the agent to check the ones relevant to the screen.
- Accessibility fundamentalsText contrast of 4.5 to 1 for normal text and 3 to 1 for large text, touch targets of at least 44 by 44 pixels, meaning carried by more than color, and hover content with a keyboard equivalent.
- Design system consistencyComponents, spacing, typography or color values that drift from established patterns are flagged, since inconsistency erodes trust even when users cannot say why.
- Three severity levelsSeverity 1 blocks task completion or causes errors, Severity 2 creates confusion or frustration, and Severity 3 is polish and preference. Sev 1 findings lead the report.
- Observation, impact, suggestionEach finding follows one format: what was seen, why it hurts the user and what to try. The skill says to critique the design, not the designer.
- Positive feedback and top actionsThe output names what works and why, and the skill's tips recommend closing with a top three actions summary.
Frequently asked questions
What is the design-critiquer skill?
It is a skill in the Cortex repository that guides an AI agent through reviewing UI designs, wireframes, mockups and design systems. The agent applies a fixed routine and returns prioritized, constructive feedback tied to user impact instead of personal taste.
How do I install the design-critiquer skill?
Clone the Cortex repository and copy skills/design-critiquer into your agent's skills directory. The README also documents Homebrew and pip installs, but those set up the whole Cortex framework. Then ask for a critique with a phrase such as critique this design.
What does the skill check on every design?
It checks hierarchy and layout, Nielsen's ten heuristics, accessibility basics such as contrast and touch target size, and consistency with the design system. A Quick Reference table in the skill summarizes the approach for each task, from first pass to tone.
How does it rank findings?
Findings fall into three levels. Severity 1 blocks users, Severity 2 frustrates them and Severity 3 covers polish and preference. The skill also tells the agent to separate preference from principle, so a comment that rests on taste is labelled that way.
Which AI coding agents can use the design-critiquer skill?
The Cortex README describes coordinating Claude Code, Codex and Gemini and says its installer links skills into ~/.claude/. The skill itself is a plain SKILL.md with frontmatter. The repository does not state per-agent support for this single skill, so test it in your own agent.
Can it critique a Figma file or a screenshot?
The skill expects a design to review, and its examples describe layouts in words. Whether your agent can read an attached image depends on that agent, not on the skill. Describing the user and the problem alongside the image helps. A related option is design-auditor.
What should I use for accessibility depth?
The skill covers fundamentals only: contrast, touch targets, color-only signals and hover without keyboard access. For a deeper standards-based check, add a dedicated skill such as accessibility-review after the critique.
What license does the design-critiquer skill use?
The skill's frontmatter says MIT, and the Cortex repository is MIT licensed, with the README pointing to its LICENSE file. Check that file before you copy the skill folder into a product you distribute.