skills.rest
txema-puch
txema-puchCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live sites for visual inconsistencies and propose fixes with before/after screenshots.

1|Updated Mar 23, 2026
Search Tags:#workflow#design#screenshots#design-system#visual-qa#ui-audit#before-after
One-click install
npx skills add https://github.com/txema-puch/drone-ai-saturdays --skill design-review-txema-puch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/txema-puch/drone-ai-saturdays/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/txema-puch/drone-ai-saturdays --skill design-review-txema-puch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers need a repeatable QA workflow to identify visual inconsistencies, spacing issues, and hierarchy problems on live sites, and to fix them with atomic commits and before/after evidence.

Core Features & Use Cases

  • End-to-end visual QA: spotting typography, spacing, color, and layout issues, and delivering atomic fixes with traceable commits.
  • Before/after verification: capture screenshots and compare results to confirm polish and design-system alignment.
  • Handoff-ready documentation: generate context and rationale to support implementation.

Quick Start

Launch the design-review workflow on your target site and begin the guided audit to generate before/after screenshots.

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 QA audit on a live site to find spacing and hierarchy issues?▼

Run a visual QA audit on a live site by capturing annotated screenshots, validating typography and layout against your design system, and recording actionable findings with before and after verification.

Can I verify UI polish using before and after screenshots during a design review?▼

Yes, you can verify UI polish by capturing before and after screenshots to compare results, confirming that layout and typography changes align with your design system and deliver measurable improvements.

What is a design system alignment check for a live website?▼

A design system alignment check validates live site typography, color, and spacing against established guidelines, identifying visual inconsistencies and proposing fixes to enforce design-system alignment.

Does visual QA workflow support atomic commits for iterating layout fixes?▼

Yes, the visual QA workflow supports iterating layout fixes via atomic commits, ensuring traceable changes that document measurable polish and provide context and rationale for handoff-ready implementation.

What's the best way to document visual inconsistencies for developer handoff?▼

The best way to document visual inconsistencies for handoff is generating context and rationale records alongside annotated screenshots, ensuring developers have actionable findings and before and after evidence for implementation.

Related Skills

Explore More Design & Creative Skills→
curielmccurielmc

design-review

Audit live UI for visual consistency, spacing, hierarchy, and interaction latency.

Community
Advanced
lucas-flatwhitelucas-flatwhite
43

design-review

Audit live sites for visual inconsistencies and implement fixes with before/after verification.

Community
Advanced
xoaixoai
25

ux-audit

Extract colors, typography, spacing, and component patterns from web page screenshots.

Community
Intermediate
sunholo-datasunholo-data
1

Test Manager

Run visual regression tests comparing screenshots to golden files.

Community
Advanced