Reviewing an implemented UI for design quality after or alongside measurable correctness checks.
Procedure
Render the actual surface when possible; do not review visual quality from source alone if a runnable UI exists.
Inspect representative desktop/mobile widths and supported themes.
Exercise important controls so feedback reflects real states, not only the initial frame.
Evaluate hierarchy, information density, affordance, consistency, content clarity, product/domain fit, responsive composition, and state communication.
Cross-check interaction behavior with established usability heuristics where relevant.
Cite concrete evidence for each material finding.
Separate measurable defects (for example contrast or clipping) from design judgment.
Recommend changes in priority order based on user impact and implementation leverage.
Output
Use a findings table or equivalent structure with: severity/priority, evidence, why it matters, and recommended correction. Avoid fake precision scores for subjective taste.
1---2name: design-review3description: Design Review4---5# Design Review67## Use when89Reviewing an implemented UI for design quality after or alongside measurable correctness checks.1011## Procedure12131. Render the actual surface when possible; do not review visual quality from source alone if a runnable UI exists.142. Inspect representative desktop/mobile widths and supported themes.153. Exercise important controls so feedback reflects real states, not only the initial frame.164. Evaluate hierarchy, information density, affordance, consistency, content clarity, product/domain fit, responsive composition, and state communication.175. Cross-check interaction behavior with established usability heuristics where relevant.186. Cite concrete evidence for each material finding.197. Separate measurable defects (for example contrast or clipping) from design judgment.208. Recommend changes in priority order based on user impact and implementation leverage.2122## Output2324Use a findings table or equivalent structure with: severity/priority, evidence, why it matters, and recommended correction. Avoid fake precision scores for subjective taste.
Run npx skillmds@latest add devotionn/design-review in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Design Review It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
devotionn (@devotionn) published this skill. Their other Agent Skills are listed on their SkillMD profile.
devotionn