skills.rest
endearqb
endearqbCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit and fix visual design inconsistencies in live sites and design systems.

6|1|Updated Feb 28, 2026
Search Tags:#typography#layout#visual-qa#design-review#color-palette#before-after#design-polish
One-click install
npx skills add https://github.com/endearqb/kimi-app --skill design-review-endearqb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/endearqb/kimi-app/tree/main/.codex/skills/design-review
Command: npx skills add https://github.com/endearqb/kimi-app --skill design-review-endearqb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistencies, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.

Core Features & Use Cases

  • Visual QA audits of design systems and live pages to surface spacing, typography, color, and interaction issues.
  • Before/after verification with annotated screenshots to validate fixes.
  • Plan-mode design reviews to guide pre-implementation polish and design handoffs.
  • Atomic commits for each fix with verifications and regression checks.

Quick Start

Run a design-review pass on your project and follow the prompts to identify issues, propose fixes, and verify changes with before/after captures.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit visual design inconsistencies on a live site?▼

Run a visual QA audit to detect spacing, typography, hierarchy, and color inconsistencies across live pages, then generate concrete fix guidance for each issue found.

What is the best way to verify design fixes with before and after screenshots?▼

Verify design fixes using before/after screenshots to validate changes, ensuring each atomic commit includes regression checks and annotated visual confirmation of the corrected layout.

Can I do a plan-mode design review before implementing code changes?▼

Yes, use plan-mode design review to guide pre-implementation polish and design handoffs, evaluating visual hierarchy and color palette issues before writing any source code.

How do I fix spacing and typography issues directly in source code?▼

Fix spacing and typography issues iteratively in source code by applying concrete fix guidance, committing each correction atomically, and re-verifying the visual output with screenshots.

Does visual QA work for checking color palette and interaction problems?▼

Yes, visual QA audits surface color palette inconsistencies and slow interaction patterns, providing actionable feedback to polish the visual design and improve user experience responsiveness.

When should I use a design review for design systems?▼

Use design review when you need to surface visual inconsistencies across a design system, checking for spacing, typography, and hierarchy deviations to ensure component visual consistency.

Related Skills

Explore More Design & Creative Skills→
nicholaslocascionicholaslocascio
2

plan-design-review

Audit live site visual design and export a DESIGN.md baseline.

Community
Advanced
zzxtbetazzxtbeta

qa

Automate web application QA testing with tiered end-to-end flows and bug detection.

Community
Advanced
tuantiensiutuantiensiu
1

visual-analysis

Extract colors, typography, and layout data from images and UI mockups.

Community
Intermediate
shin0720shin0720

auto-verify

Automate visual regression testing by capturing and comparing UI screenshots with Playwright.

Community
Basic