How it works
Four steps per iteration. Each one makes the page measurably better.
Screenshot
Section-level captures via Playwright — semantic landmarks or scroll fallback
Score
5 anti-slop criteria rated 1–5 with companion skill enrichment
Fix
Top 3 issues fixed in code, build verified between each fix
Repeat
Loops until all criteria hit 4/5+ for two consecutive iterations
Iteration phases
Composition & Typography
Layout rhythm and type hierarchy first
Color & Contrast
Intentional palette, WCAG compliance
Visual Identity
Distinctive, not generated-looking
Polish
Consistency, alignment, final details
5 anti-slop criteria
Every screenshot set is scored. Every score detects AI-default patterns and pushes toward intentional design.
Layout, spacing, visual flow. Elements breathe. Sections have rhythm.
Rejects uniform grids — asymmetry creates interest
Hierarchy through size/weight/tracking. Font pairing works.
Flags Inter/Roboto defaults — consider display fonts
Intentional palette, WCAG AA text contrast, interactive states visible.
Flags purple gradients, gratuitous gradients, rainbow decorations
Looks designed, not generated. Has a point of view. Passes the "portfolio test."
Flags generic card layouts, stock-photo hero patterns
Alignment, consistency, details. Same pattern = same treatment.
Flags mixed spacing scales, orphaned elements
See it in action
Click any state. The entire page transforms.
One command away
Requires Claude Code. Install the plugin and start iterating.
claude plugin add https://github.com/tonymfer/design-loop
Usage
# Start polishing
/design-loop http://localhost:3000
# 20 iterations on a dashboard
/design-loop http://localhost:3000/dashboard 20
# No limit — runs until all criteria hit 4/5+
/design-loop http://localhost:5173 0Pro Tip
Use frontend-design → design-loop to get creative direction first, then iterate visually.
Features
Autonomous. Framework-aware. Zero setup.
Fully Autonomous
Stop Hook keeps the loop running. Claude iterates until done — no babysitting.
Zero Dependencies
No API key. No npm install. Reads your theme config and existing tokens — won’t conflict.
CSS Cascade Audit
Detects unlayered resets overriding Tailwind v4. Finds bugs screenshots miss.
Section Screenshots
Semantic landmark detection with scroll fallback. Not just a full-page blob.
Adaptive Strategy
Prioritizes highest-impact issues. Adapts focus as scores improve.
Stuck Detection
Tries alternative approaches. After 3 fails, documents TODO, moves on.
Stop guessing. Start measuring.
claude plugin add https://github.com/tonymfer/design-loop