UI Polish Pack for Claude Code
Five skills that make the interfaces Claude Code builds look designed, not generated. It reviews pages from real screenshots, polishes them in small verified passes, checks every screen size, audits accessibility and turns scattered styles into design tokens.
$4.99one-time, VAT included where it applies
Buy now for $4.99
Or get all 7 kits for $9.99
Instant download: a zip with 5 skills, a setup guide and an example design review. The $9.99 bundle gets you all 7 kits (35 skills). Free updates. 14-day refund, no questions asked.
What's inside
| Skill | What it does |
|---|---|
review-design | Screenshots the page at desktop and phone width and reviews hierarchy, spacing, type, contrast, states and consistency. Every finding names the file and the fix, using your existing design system. |
polish-ui | Applies fixes in passes (layout, type, color, states, details) and re-screenshots after each one. A pass that doesn't visibly improve the page gets reverted. |
check-responsive | Renders the page from 320 to 1920 px wide and measures horizontal scroll, overflowing elements and tiny tap targets in the browser, then fixes the cause instead of hiding it. |
check-accessibility | Runs an axe scan against WCAG 2.2 AA, then the checks scanners miss: keyboard-only use, visible focus, real labels, announced errors and zoom. Fixes in the component so every page gets it. |
extract-design-tokens | Finds every color, font size, spacing value, radius and shadow in use, merges near-duplicates into a small token set, and migrates the code in safe steps with screenshots. |
What a design review looks like
Example output from review-design on a pricing page:
Design review: /pricing (desktop 1440, phone 390)
1. [High] Two primary buttons compete in the hero ("Start trial" and
"Book demo" are both solid blue).
Fix: <Button variant="outline"> for "Book demo" in Hero.tsx:31.
2. [High] Plan card text is #9CA3AF on white, 2.5:1 contrast.
Fix: text-muted-foreground (#6B7280, 4.8:1) in PlanCard.tsx:18.
3. [High] Phone: the comparison table scrolls the whole page sideways.
Fix: wrap it in overflow-x-auto in PlanTable.tsx:12.
4. [Medium] Enterprise card has 18px padding, the others 24px.
Fix: remove the p-[18px] override in EnterpriseCard.tsx:9.
Left out: 3 minor issues. Not checked: dark mode.
Requirements
- Claude Code, with any plan or API key that runs it.
- Node.js and a browser tool for screenshots: Playwright (free), a browser MCP server, or
agent-browser. - Any web stack: React, Vue, Svelte, plain HTML, Tailwind or CSS. The skills read your design system and use it.
Install in two minutes
unzip ui-polish-pack-1.0.0.zip mkdir -p ~/.claude/skills cp -R ui-polish-pack/skills/* ~/.claude/skills/
Then say "review the design of /pricing" with your dev server running.
License
Use and modify the skills in your own projects and inside your company, including in private repos. You can't resell or redistribute them. Full terms.