AI Development
Do AI-built web apps all look the same? 6 fixes and the prompt to give Claude Code for each one
Spacing, colors, icons, text, numbers and charts: 6 fixes that stop an AI-built web app from looking generated, each with its prompt for Claude Code.

Luca Di Domenico
· 4 min read
In short
Web apps built with AI all look alike: same colors, same icons, and anyone who opens them can tell right away how they were made. Six fixes are enough, each with its own Claude Code prompt: spacing in multiples of 8, a single neutral palette with no gradients or glow, line icons instead of emoji, at most two font weights and no all caps, plain numbers compared with the previous month, and charts with thin lines and soft colors.
Web apps built with AI almost always have the same colors and the same icons, and anyone who looks at them can tell right away that AI made them. To make yours different, you need six fixes: spacing, colors, icons, text, numbers and charts. For each one I give you the exact sentence to write to Claude Code.
- Spacing: "Use spacing in multiples of 8, always the same values"
- Colors: "Use a single neutral palette, no gradients and no glow"
- Emoji: "Replace the emoji with line icons, all from the same library"
- Text: "At most two font weights. Don’t use all caps"
- Numbers: "Show numbers without decorations, compared with the previous month"
- Charts: "Charts with thin lines, soft colors, readable axes"
Why do AI-built web apps all look the same?
When it gets no rules, AI picks the most common solutions: the same palettes, the same effects, the same layout. The result is a web app that looks like a thousand others, even when the software underneath works well. Each of the six fixes removes one of these defaults and replaces it with a precise rule Claude Code can follow on every screen.
1. How do you fix the spacing?
AI often places the gaps between elements at random. The eye notices it even without knowing why, and the page feels messy. The fix is one fixed rule for every distance.
Use spacing in multiples of 8, always the same values.
With a scale based on multiples of 8, margins and gaps become consistent across the whole web app.
2. Which colors should replace the purple gradients?
The trademark of AI is purple gradients and glow everywhere. They are the most recognizable sign of a generated interface. The fix is a smaller palette and no effects.
Use a single neutral palette, no gradients and no glow.
With a neutral palette the content takes center stage again, and the web app stops looking like a template you have already seen.
3. What should replace the emoji?
Emoji used in place of icons make a web app look like a hobby project. Line icons look more polished, as long as they all come from the same library, so they share the same stroke and style.
Replace the emoji with line icons, all from the same library.
4. How do you handle bold and all caps in text?
If every piece of text is bold and in all caps, nothing stands out. The hierarchy between heading, label and body text disappears. The fix is to limit the tools available.
At most two font weights. Don’t use all caps.
With only two weights, bold goes back to marking what really matters. I covered other typographic signs, such as capitalizing every word, in the article on the 6 signs of an AI-generated UI.
5. How should a dashboard show numbers?
Exclamation marks and colored badges around numbers make a dashboard look like an ad. A number becomes useful when it has something to be compared with, and decorations add nothing to that.
Show numbers without decorations, compared with the previous month.
The comparison with the previous month tells the reader at a glance whether things are getting better or worse, with no need for colors or symbols.
6. What should the charts look like?
Huge, colorful bars distract from the data. Someone who opens a chart wants to read the trend, and every extra element slows that down.
Charts with thin lines, soft colors, readable axes.
With thin lines and soft colors the data stays in the foreground, and readable axes let people understand the values without hovering over every point.
How do you apply the six fixes with Claude Code?
The six sentences work as single prompts on a web app you have already built: one fix at a time, checking the result after each one. They work even better when Claude Code gets them before generating the interface, as rules for the whole project. One way to keep them in a single place is a design rules file, like the one I described in the article on design.md to remove AI slop from web apps.
If you are building your first web app with AI, start with the fix that jumps out at you first: six sentences are enough to give your project a look that reflects your own choices.
Want to know what this means for your product?
If you're building software with AI and want a second opinion on how you're working, tell me about your project.
Tell me about your projectFollow the blog
One email for every new article
I only write when an article is out: title, summary and link. You can unsubscribe with one click from any email.
RSS feed
An RSS feed is the up-to-date list of articles: add it to a reader app like Feedly or Inoreader and new articles show up there, no email needed.