Visual Design Test-Improve Loop

What it does

Automates an iterative visual review loop: takes screenshots of a page, audits it against established design guidelines, proposes fixes, and re-checks until the quality standard is met. Cuts down manual rounds of visual feedback.

When to use it

• Polishing a page's visual finish before delivery
• Validating that a page follows the brand style guide
• Iterating quickly on design feedback

Steps

1. Capture screenshots of the page at relevant breakpoints
2. Audit each section against the design guidelines
3. List discrepancies found with visual evidence
4. Propose targeted fixes as a draft
5. Re-capture and compare after applying adjustments
6. Repeat the cycle until standards are met and request final approval

The skill

---
name: visual-design-test-improve
description: Iterative visual review using screenshots: audits a page against design guidelines, fixes issues, and re-checks until standards are met.
---

# Visual Design Test-Improve Loop

## 1. What it does
Automates an iterative visual review loop: takes screenshots of a page, audits it against established design guidelines, proposes fixes, and re-checks until the quality standard is met. Cuts down manual rounds of visual feedback.

## 2. When to use it
- Polishing a page's visual finish before delivery
- Validating that a page follows the brand style guide
- Iterating quickly on design feedback

## 3. Steps
1. Capture screenshots of the page at relevant breakpoints
2. Audit each section against the design guidelines
3. List discrepancies found with visual evidence
4. Propose targeted fixes as a draft
5. Re-capture and compare after applying adjustments
6. Repeat the cycle until standards are met and request final approval

## 4. Safety rules
Always work in draft mode: nothing is sent, published, or paid for without explicit client approval. Never invent data, metrics, or results. No passwords, tokens, or API keys are requested or shown in chat.

## 5. Deliverable
A clear, reviewable draft of the output (text, code, report, or file), ready for the user to approve before it becomes final.

For Claude Code, save it as ~/.claude/skills/visual-design-test-improve/SKILL.md. In Cursor, ChatGPT or another assistant, paste it as project instructions.