design-quality

Review rendered UI against approved designs and resolve visual critique before final evidence.

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill design-quality-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-quality
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/design-quality
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill design-quality-ao-hys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It closes the gap between an approved design and the shipped UI by enforcing a structured visual acceptance contract, so subjective taste debates and unverified screenshots do not pass as finished design work. ## Core Features & Use Cases - Design acceptance contract: Compares rendered surfaces against the approved direction, covering hierarchy, density, type, assets, responsive behavior, and interaction states. - Independent visual critique: Assigns a vision-capable critic to review working screenshots, return impact-ordered gaps, and confirm fixes in one batch without self-review bias. - Evidence handoff: Routes the reviewed candidate into final evidence capture, keeping diagnostic screenshots separate from the delivery package. - Use Case: After implementing a new landing page from an approved design, run this workflow to have an independent critic flag spacing and responsive regressions, fix them in one pass, and produce verified final evidence. ## Quick Start Review the current page implementation against the approved design direction and resolve any visual gaps before capturing final evidence.

Frequently Asked Questions about design-quality

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify a UI implementation matches an approved design?▼

Compare working screenshots of the rendered surface against the approved direction, covering hierarchy, density, type, assets, and responsive behavior. Have an independent vision-capable critic list visible gaps by impact, fix them in one batch, then confirm the changed states.

How to run a visual design review with an AI critic?▼

Give the critic current screenshots, the user task, the approved direction, and references, but not implementation rationalizations or prior self-scores. The critic returns specific visible gaps ordered by impact, and a designer's self-review cannot satisfy this role.

Does this workflow replace the Impeccable design skill?▼

No. Impeccable owns the design workflow, craft floor, direction, and finish checks. This skill only adds the acceptance contract on top, reusing Impeccable's playbooks and references rather than duplicating its style rules.

When should generated images or video be used in UI?▼

Use generated raster or video assets only when the approved concept calls for them and cost is authorized, with static fallbacks and reduced-motion behavior. A CSS approximation of a photographic asset counts as a fidelity gap, not an equivalent delivery.

What are the limitations of automated visual checks?▼

Scanner success proves only mechanical checks, and a functional pass does not certify composition. Numerical taste scores never trigger repeat loops; material mismatches with approved choices block acceptance regardless of whether anything visibly clips.