design-review

Audits live web pages for visual inconsistencies and fixes them with atomic commits.

Updated Jun 22, 2026
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill design-review-aicodepro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/gstack/design-review
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill design-review-aicodepro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Visual QA of a live site is tedious and subjective: spacing drift, broken hierarchy, AI-slop patterns, and sluggish interactions slip through code review. This Skill gives the AI a designer's eye to find those issues on a running page, fix them in source code, and verify each fix with before/after screenshots. ## Core Features & Use Cases - Design audit: Detects visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions on a live site. - Iterative fix loop: Fixes each issue in source code, commits atomically, and re-verifies with before/after screenshots. - Session-aware workflow: Adapts behavior for interactive, headless, spawned, and Conductor sessions, with structured decision briefs for user choices. - Use Case: After shipping a new landing page, ask for a design polish pass; the Skill audits the rendered page, lists issues, and commits fixes one by one with visual proof. ## Quick Start Ask the assistant to run a design review on the currently running site and fix any visual issues it finds.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I run a visual design review on my live website?

Invoke the design-review skill while your site is running locally. It audits the rendered page for spacing, hierarchy, and consistency issues, then fixes each one in source code with an atomic commit and before/after screenshots.

What kinds of design issues does automated visual QA catch?

It catches visual inconsistency, spacing and alignment problems, hierarchy issues, AI slop patterns, and slow interactions. Each finding is fixed iteratively and re-verified with screenshots rather than just reported.

What is the difference between design-review and plan-design-review?

design-review runs against an implemented, live site and fixes issues in code. plan-design-review runs in plan mode before implementation to critique a design plan, so use it earlier in the workflow.

Does design-review work in headless or CI sessions?

Yes, it detects the session kind from the preamble. In headless sessions it blocks on unavailable user prompts, and in spawned sessions it auto-chooses recommended options and reports results as prose.

When should I not use automated design review?

Avoid it before any implementation exists, since it needs a running page to screenshot. For pre-implementation critique of mockups or plans, use plan-design-review or design-consultation instead.