What is the ui-design-review skill?
The ui-design-review skill is a SKILL.md in the mastepanoski skills repo that evaluates visual polish rather than usability. Given screenshots or URLs, it grades ten dimensions such as typography, color and spacing, lists issues with severity and effort, and compiles a report with a score out of 100.
The ui-design-review skill is one folder in a repository of UX, UI and AI governance skills. Its SKILL.md covers the visual side of an interface: how polished, consistent and on-brand it looks, rather than whether the flows work.
The final report opens with a Visual Design Score out of 100, a table of ten dimension scores, top strengths, top issues and a first impression of professional, dated, playful or generic.
The ten dimensions it grades
- Visual hierarchy, typography and color palette, with checks such as two to three typefaces and body line height of 1.4 to 1.6.
- Spacing and white space, visual consistency and imagery, including whether a spacing scale such as an 8px grid is followed.
- Layout and grid, component design and branding, including missing hover, active, disabled and focus states.
- Modern design standards, which flags dated patterns such as Web 2.0 gradients, bevels and splash screens.
How a review runs
- First impression: a quick read of the feeling, the strongest elements and the most glaring issues, with a 1 to 10 score.
- Dimension by dimension: strengths, then issues with severity, location, impact, recommendation and effort.
- Component inventory: buttons, forms, navigation, cards, icons, modals, tables and empty, loading and error states.
- Design system assessment: a 0 to 10 rating from no system evident up to a complete design system.
- Competitive comparison, when competitor products are supplied.
- Synthesis into the final report.
Who the ui-design-review skill is for
Best for
- Design QA before a handoff or launch, when you want every visual decision listed against the same ten dimensions.
- Spotting visual debt and dated patterns on an older product.
- Checking whether a component library or page template is consistent.
- Agents that can read screenshots or fetch URLs, since the skill takes visual references as input.
Not for
- Usability and flow problems. The skill says other UX skills focus on functionality, and the same repo ships separate heuristic, accessibility and walkthrough skills.
- Generating a design or writing UI code. It evaluates and recommends.
- A quick one-line verdict. A full pass is long, and the procedure budgets 45 to 60 minutes for the dimension step alone.
Use it with UiChemy
Run the review on a screenshot of a Figma frame before you convert it with UiChemy Figma to WordPress, or on the live WordPress page afterwards. The skill grades what it sees and edits nothing. Click Get Started on uichemy.com when the design is settled. See also visual-design-foundations and critique.
How to install UI Design Review Skill: Score Visual Design Quality
the skills CLI add command pointed at mastepanoski/claude-skills, with --skill ui-design-reviewRun the skills CLI
Use the skills CLI add command pointed at mastepanoski/claude-skills with --skill ui-design-review. The README documents this as the route for installing a single skill.
Or copy the folder
Clone https://github.com/mastepanoski/claude-skills.git and copy skills/ui-design-review. The README says the skills are plain SKILL.md folders. For Claude Code, copy it into
.claude/skills/. For OpenAI Codex CLI, copy it into.codex/skills/.Prepare the inputs
Have a description of the interface and its audience, plus screenshots or URLs. Brand guidelines, target audience, competitors and design goals are optional.
Ask for the review
Use a request such as review the visual design of my landing page, or check if my component library is consistent.
Check that it loaded
Give the agent a description and one screenshot, then ask for a visual design review. The reply should include a first impression, scores for the ten dimensions and issues with severity and effort.
Key features
- Ten-dimension frameworkHierarchy, typography, color, spacing, consistency, imagery, layout, components, branding and modern standards each get a definition, an evaluation list and common issues.
- Concrete typography thresholdsIt checks for two to three typefaces, a consistent type scale, body line height of 1.4 to 1.6, line length of 50 to 75 characters, and flags body text under 14px.
- Color and contrast checksIt looks for defined primary, secondary and accent colors, WCAG-compliant contrast, a neutral palette and color-blind accessibility, and flags overuse of pure black.
- Structured issue recordsEach issue carries severity from Critical to Low, a location, the problem, its impact, a specific recommendation and an effort estimate of Low, Medium or High.
- Component inventoryA checklist covers buttons, forms, navigation, cards, typography, icons, images, modals, tables and empty, loading and error states, with a consistency pass or fail check and a quality rating from 1 to 5.
- Design system ratingThe skill rates system maturity from 0 out of 10 when none is evident to 10 out of 10 for a complete system, based on palette, scale, spacing, components, icons, shadows, radius and breakpoints.
- Competitive comparison matrixWith competitors supplied, it builds a table on visual polish, modernity, brand strength and hierarchy against an industry standard column.
- Scored executive summaryThe report opens with a score out of 100, ten dimension scores with status markers, top three strengths and issues, first impression, trust level and competitive standing.
- Untrusted input handlingScreenshots, URLs, competitor pages and external brand guidelines are treated as passive data. Phrases that try to override the task are flagged as possible prompt injection.
Frequently asked questions
What is the ui-design-review skill?
It is a skill in the mastepanoski/claude-skills repository that evaluates the visual design and aesthetics of an interface. It grades ten dimensions, from hierarchy and typography to branding and modern standards, and produces a report with a score out of 100, issues and recommendations.
How do I install the ui-design-review skill?
Run the skills CLI add command pointed at mastepanoski/claude-skills with --skill ui-design-review, or clone the repository and copy skills/ui-design-review into the folder your agent loads skills from. Then ask for a visual design review and supply a description plus screenshots or URLs.
What inputs does the skill need?
Two are required: a description of the interface covering product type, audience and brand personality, and screenshots or URLs, with multiple screens preferred. Optional inputs are brand guidelines, target audience, competitors and design goals such as modern or classic, minimal or rich.
Which AI coding agents can use the ui-design-review skill?
The README lists Claude Code, OpenAI Codex CLI and ChatGPT, plus any agent that supports the Agent Skills standard. It says no separate variants are maintained and that the shared SKILL.md files are the source of truth, so the same folder is used across agents.
How is it different from the other skills in the same repository?
This one judges visual polish. The repo also lists a Nielsen heuristics audit for usability, a WCAG audit for accessibility, a Don Norman principles audit for intuitiveness and a cognitive walkthrough for task flows. The SKILL.md suggests combining it with the first three.
Does the skill check accessibility?
Only in part. It checks color contrast against WCAG and accessibility to color-blind users inside the color dimension. It is not an accessibility audit. For that, pair it with the repo's WCAG skill or see accessibility-audit in this hub.
Can it fix the problems it finds?
No. Each issue includes a recommendation and an effort estimate, but the SKILL.md describes an evaluation and report. You then apply the fixes yourself or ask your agent to, and for type and palette ideas see better-typography.
What license does the ui-design-review skill use?
GitHub lists the mastepanoski/claude-skills repository as MIT, and the README badge says MIT as well. The license covers the whole repository, so it applies to this skill folder as well. Read the LICENSE file in the repository before you redistribute the folder inside a product.