design-review

Detect and fix visual design inconsistencies in web interfaces via source code.

3|14|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/cegit27/moodle-proctor --skill design-review-cegit27
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/cegit27/moodle-proctor/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/cegit27/moodle-proctor --skill design-review-cegit27

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious manual process of auditing user interfaces for visual inconsistencies, spacing errors, hierarchy problems, and generic AI-generated design patterns. It automates detection and iterative fixing to ensure a polished, professional appearance without hours of manual review.

Core Features & Use Cases

  • Visual QA Audit: Identifies visual inconsistencies, spacing issues, hierarchy problems, and AI slop patterns across live sites or local code.
  • Automated Fixes: Iteratively fixes identified issues directly in source code, committing each change atomically.
  • Before/After Verification: Uses screenshots to verify fixes visually, ensuring changes match the intended design.
  • Use Case: A developer launching a new dashboard can run this Skill to catch misaligned buttons, inconsistent font sizes, and awkward spacing before users see the product.

Quick Start

Use the design-review skill to audit the visual design of the current project and automatically fix any spacing or hierarchy issues found.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate visual QA audits for my frontend codebase?

Automate visual QA audits by using screenshot comparisons to detect UI inconsistencies, spacing errors, and hierarchy problems, then iteratively modify source code to apply atomic visual fixes.

How do I fix spacing and hierarchy problems in a live web interface?

Fix spacing and hierarchy problems in live interfaces by capturing screenshots to identify design issues, modifying the frontend source code directly, and verifying the visual fixes iteratively.

Can I catch visual design inconsistencies before launching my web application?

Yes, you can catch visual design inconsistencies pre-launch by running automated visual audits on local code or live sites to detect misaligned elements, font sizing errors, and awkward spacing.

What's the best way to remove generic AI-generated design patterns from my UI?

Remove generic AI-generated design patterns by auditing the user interface for visual inconsistencies and iteratively applying atomic fixes directly within the source code.

Does automated UI design review require git version control to apply fixes?

Yes, automated UI design review requires git version control to apply and verify atomic visual fixes, ensuring each source code modification for spacing or hierarchy errors is tracked.

How do I verify visual fixes after modifying frontend source code?

Verify visual fixes by taking before and after screenshots to compare the updated web interface against the intended design, ensuring the source code modifications resolve the detected visual issues.