Stop Blaming Claude For Ugly Apps
5 tools that make AI-built apps look like a designer made them.
Every week I see the same complaint.
"Claude builds ugly UIs."
"AI apps all look the same."
"Everything looks like a default Tailwind template."
The problem isn't Claude. It's you.
You're asking it to design AND build at the same time. That's like asking a builder to also be the architect. They can... but the house will look like a box.
Here are 5 tools that fix this. Install them once. Every app you build after that looks completely different.
Let's go.
1. Google Stitch + Stitch MCP
Stop describing what you want. Start showing it.
Google Stitch is a free AI design tool that turns text prompts into full UI mockups. Clean ones. Not wireframes. Actual designs with real layouts, colours and components.
The problem? Those designs live inside Stitch. They don't automatically connect to your code.
That's where Stitch MCP comes in. It bridges the gap between your designs and your coding agent.
What it does:
- Pulls your Stitch designs into a local dev server so you can preview them
- Builds an Astro site from your screens (maps screens to routes automatically)
- Feeds design context directly to Claude Code, Cursor, Codex or any MCP-compatible agent
- Works with one command:
npx @_davideast/stitch-mcp init
The workflow:
- Design your UI in Google Stitch (free, takes 2 minutes)
- Run
npx @_davideast/stitch-mcp serve -p - Your coding agent now has the actual design to reference while building
No more "make it look modern." You give Claude the exact design and say "build this."
443 GitHub stars and climbing.
🔗 github.com/davideast/stitch-mcp
2. Impeccable
Design taste. In a box.
Impeccable is a design language for coding agents. It gives Claude a set of slash commands that change how it thinks about visual design.
Instead of defaulting to generic layouts, it applies real design principles. Spacing. Colour theory. Typography hierarchy. Visual rhythm.
Key commands:
/colorize- builds a colour palette that actually works together/typeset- sets up font pairings with proper hierarchy/bolder- takes a bland UI and makes it pop/layout- restructures pages using proper grid principles/polish- final pass for spacing, alignment, consistency
When to use it: After your app works. Build the features first, then run /bolder and /polish to make it look professional.
How to install:
/plugin marketplace add anthropics/skillsThen select Impeccable from the marketplace. Done.
10,800+ GitHub stars. This one's legit.
🔗 github.com/pbakaus/impeccable
3. Anthropic Frontend Design Skill
The official skill that teaches Claude how designers think.
This comes straight from Anthropic. It's part of their official skills repo (97,000+ stars).
It's not a component library. It's a set of instructions that changes HOW Claude makes UI decisions. Think of it as upgrading Claude's design brain.
What Claude learns:
- Visual hierarchy - what the eye should see first, second, third
- Whitespace - not empty space, intentional breathing room
- Colour psychology - which colours create trust vs urgency vs calm
- Mobile-first thinking - responsive decisions baked into the process
- Accessibility - contrast ratios, font sizes, touch targets by default
How to install:
/plugin install example-skills@anthropic-agent-skillsOr upload the SKILL.md file in Claude.ai. Or use the Skills API.
When to use it: Install it and forget it. It runs in the background and quietly improves every frontend Claude generates.
🔗 github.com/anthropics/skills/tree/main/skills/frontend-design
4. UI UX Pro Max
A design system generator you install with npm.
The other tools teach Claude principles. This one gives it a massive library of pre-made design decisions to pull from.
What's inside:
- 97 colour palettes (sorted by industry and mood)
- 57 font pairings (tested combos that work together)
- 75+ design styles (glassmorphism, brutalist, corporate clean, etc)
- 13 framework presets (React, Next.js, Svelte, Vue and more)
- Full design system generator (tokens, variables, component specs)
How to install:
npm install -g uipro-cli
cd your-project
uipro init --ai claudeWhen to use it: At the start of every project. Run uipro init before writing any code. Claude will reference the design system for every component it builds.
5. 21st.dev
1,000+ production components. Assemble, don't design.
This is the cheat code.
21st.dev is a library of over 1,000 production-ready UI components. Navbars, hero sections, pricing tables, dashboards, forms, footers. All of them look good out of the box.
Instead of asking Claude to design a navbar from scratch (which is how you get generic results), you pick one from 21st.dev and tell Claude to use it.
What makes it different from other component libraries:
- Every component is designed to look premium, not just functional
- You can preview them before installing
- One-click install into your project
- Works with React, Next.js and other frameworks
- New components added regularly
How to use it:
- Browse 21st.dev
- Find the component you need
- Copy the install command
- Tell Claude "use this component for the hero section"
That's it. No designing. Just assembling.
🔗 21st.dev
How to use all 5 together
Here's the workflow that actually works:
| Step | Tool | What you're doing |
|---|---|---|
| 1. Design | Google Stitch + Stitch MCP | Create the visual mockup, feed it to your agent |
| 2. Foundation | UI UX Pro Max | uipro init --ai claude for design tokens |
| 3. Background | Frontend Design Skill | Install once, improves all output automatically |
| 4. Build | 21st.dev | Pick production components, assemble the UI |
| 5. Polish | Impeccable | /bolder then /polish for the finishing touches |
Total setup time: About 10 minutes.
Result: People asking "who designed your app?" instead of "did AI build this?"
All links
| Tool | Link |
|---|---|
| Stitch MCP | github.com/davideast/stitch-mcp |
| Impeccable | github.com/pbakaus/impeccable |
| Frontend Design Skill | github.com/anthropics/skills |
| UI UX Pro Max | npmjs.com/package/uipro-cli |
| 21st.dev | 21st.dev |
The real takeaway: Claude doesn't have bad taste. It has no taste. Until you give it one.
Install these 5 tools. Takes 10 minutes. Stop building grey-on-white apps.
If someone you know is still complaining about ugly AI apps, forward them this. They need it.
See you next time. 🤙
- Mike