← AI Library
Frontend · Design QAClaude Code

Claude Code Front-End Design Tools

A small toolkit for catching the familiar AI-site tells: samey gradients, weak spacing, generic cards, and pages nobody has actually looked at in a browser.

Todd Kelley · Rewritten field guide from a public Cindy Zhu source

Claude CodeDesignFrontendQA

impeccable

A checker for common AI visual tells before shipping.

Repository

ui-ux-pro-max

A design-system style skill for stronger UX and UI structure.

Repository

taste-skill

A frontend taste layer that helps critique layout, spacing, and visual hierarchy.

Repository

huashu-design

A design polish helper for making finished screens feel less default.

Repository

Playwright MCP

Lets Claude inspect what actually rendered, take screenshots, and compare the page against the intent.

Repository

Stack Order

Plan UX, build, render in browser, screenshot, critique, fix, repeat.

Browser QA Prompt
Open the page in a browser, take a screenshot, and audit it for AI-site tells:
generic palette, weak hierarchy, cramped spacing, awkward cards, unreadable mobile layout, and decorative elements that do no work.

List the fixes in priority order, then apply them and re-check the rendered page.

Original Source

Adapted from Cindy Zhu's guide: Top 5 Claude Code front-end skills: the anti-AI-slop toolkit.