Uiux Boost — AI skill for Claude Code

██╗   ██╗██╗   ██╗██╗  ██╗██╗  ██╗
██║   ██║██║   ██║╚██╗██╔╝╚██╗██╔╝
██║   ██║██║   ██║ ╚███╔╝  ╚███╔╝
██║   ██║██║   ██║ ██╔██╗  ██╔██╗
╚██████╔╝██║██╗██║██╔╝ ██╗██╔╝ ██╗
 ╚═════╝ ╚═╝╚═╝╚═╝╚═╝  ╚═╝╚═╝  ╚═╝
          B O O S T

UI/UX BOOST

**Pixel-perfect. Fully responsive. Zero AI slop.**

A Claude Code skill that turns Figma designs into production websites that actually look like the design — not "kinda close" — identical. Or, if you don't have a Figma file, it guides you through building one from scratch with live visual feedback.

---

What makes this different

Traditional	UI/UX BOOST
Code it, hope it looks right	Code it, screenshot it, compare it, fix it
"Looks close enough"	Pixel-perfect at design width, fluid between
Generic AI output	Anti-slop rules ban 40+ AI design patterns
One resolution	Responsive from 320px to 1920px+
"Add animations later"	Animations proposed and implemented as part of the flow

How it works

FIGMA DESIGN ──→ EXTRACT ──→ IMPLEMENT ──→ SCREENSHOT ──→ COMPARE
                                  ↑                          │
                                  └────── FIX ◄──────────────┘

1. Extract — Pulls every detail from your Figma: fonts, colors, spacing, layout, assets
2. Implement — Builds mobile-first, section by section
3. Screenshot — Takes browser screenshots at multiple viewports
4. Compare — Visually compares against the Figma design
5. Fix — Corrects any discrepancies
6. Repeat — Until every section is faithful

No Figma? No problem.

Mode B guides you through design decisions with live implementations:

• Describe your project and vibe
• Get 2-3 aesthetic directions described vividly
• Pick one, then approve each section via screenshots
• End up with a complete, intentional design

Anti-AI Slop

This skill actively bans patterns that make sites look AI-generated:

• Typography: No Inter, Roboto, Open Sans defaults
• **Colo