AI-built apps look the same because every design decision you don't make gets filled in with the builder's safest default. The fix is to make those decisions yourself, then put them where the AI reads them on every single prompt.
Here's the difference those decisions make:
The first is a mock I made to show the look, not a real app. The second runs on the same React, Tailwind and shadcn/ui stack as any Base44 app. The difference is a few dozen decisions, made before the AI got the chance to make them.
The builder had already written a brief for my site
When I started rebuilding aatmanjain.com, I pulled my app's settings through the Base44 API. Two things jumped out.
The app was called "Aatman Jain Portfolio", and its description was an AI-written line about a "digital sanctuary". I would never call anything a digital sanctuary. I changed both through the API on 27 September.
The second one was sneakier. There was a design guidelines field that the builder had filled in by itself. It named the style "Monolithic Essentialism", and it asked for this:
Photography, shot in high-contrast black and white
There are no photos of me. The only picture of me on this whole site is an illustrated portrait. So the AI had quietly picked a look for my site, and part of that look needed something that doesn't exist.
I've since removed those guidelines from my app's AI Controls. Go and open yours. You might have a Monolithic Essentialism of your own (and if you do, please tell me what it's called).
That's the whole problem in one example. Give the AI no direction and it doesn't leave the gap blank. It fills it with something generic and confident.
Why AI-built apps all look the same
Two reasons, and neither of them is "AI has bad taste".
Everyone starts from the same parts
Base44's docs list the frontend stack: React, Vite, Tailwind CSS and the shadcn/ui component library. It's a good stack. This site runs on it too.
But every app starts from the same buttons and cards, right down to the corner radius. Leave the Theme panel's standard colour roles alone and you ship the starter kit.
Nobody made the decisions
Most first prompts I see only describe features. "A booking app for my salon with a calendar and reminders." Nothing in there says how it should feel, so the AI picks the safe middle.
Then people add taste words. Modern. Clean. Those don't point anywhere specific either, so you get the average of every app ever made. Which is technically what you asked for..
The AI isn't being lazy. It's being polite. A safe default can't offend anyone. It also can't be remembered by anyone.
Left on default
- A plain white page
- The starter kit's default font
- Colour roles exactly as the theme set them
- "Make it modern and clean" as the whole brief
Decided on purpose
- Warm paper,
#fff3e7 - Newsreader, Geist and Caveat, one job each
- Pastels for big areas, papaya only in small doses
- One studied reference, and the rules written down
Taste is a list of decisions
If you take one idea from this post, take this one. Taste isn't a vibe you sprinkle on at the end. It's a list of decisions, written down, made before the AI makes them for you.
Here's how I made them for this site. (Claude Code did a lot of the measuring. I did most of the arguing.)
Pick a reference, then actually study it
This site's paper, tape and pastel look is inspired by Craft's scrapbook style. I didn't glance at it and say "like that, please". I studied it: screenshots all the way down, computed styles, fonts, shadows and what really moves.
The biggest lesson? Craft's page is mostly calm cream canvas with big serif headlines. The collage bits only show up in a few places, like the hero. So my rule became: collage as accents, not wallpaper.
Craft's live page also barely animates. I wanted way more motion than that, and I got it. (Motion has a cost, though. Animation problems left some of my pages blank for a while, which became a whole other post.)
One line I don't cross: copying assets. Every scrap and sticker here is drawn from scratch in code. Base44 can start a build from a URL, but its docs say you must own that site or have full rights to its design. Take that seriously.
Choose type on purpose
Nothing I know does more for "this looks designed" than fonts.
For headlines I wanted a calm, bookish serif, close to Craft's own. So I put Craft's serif next to a pile of free candidates and measured them.
How far each serif is from Craft's letter width
| Row | Difference from Craft's serif |
|---|---|
| Newsreader | 3.4% |
| Source Serif 4 | 11.3% |
| Fraunces | 12.3% |
| Instrument Serif | 21.6% |
Average letter width at weight 400, measured on Craft's live page next to the real Untitled Serif (0.416 em). Lower means a closer fit.
Newsreader came closest: 0.430 em against 0.416 for the original. Geist won for body text, Caveat does the handwritten notes and Geist Mono handles labels and code. Three fonts and a typewriter, each with one job.
Hattle is the opposite mood. It's a World Cup sweepstake app, so its brand, Football Frenzy, is loud on purpose: Anton for the big headlines, Caveat Brush for scribbles, Space Mono for the scoreboard digits, and hard offset shadows.
And Inter for the body text. Yes, Inter, the font people love to blame for the "AI look". Inter isn't the problem. Hattle still doesn't look like a template, because everything around the body text was chosen.
Give colours rules, not just values
A palette is a list of hex codes. A colour system is a list of rules about where each colour is allowed.
Here it's pastels, mostly, on warm paper. The lime comes from the background of my portrait. Papaya and azure only show up in small doses. Those rules do more work than the hex codes.
Then check the rules against real contrast. The muted grey I'd picked for quieter text passed on the cream background and failed on the mint, periwinkle and sky cards. WCAG asks for 4.5 to 1 on normal text.
Same grey, different surface
| Row | Muted grey #6b645c | Graphite #41413f | Change |
|---|---|---|---|
| White | 5.83 to 1 | 10.23 to 1 | 75% higher |
| Cream canvas | 5.34 to 1 | 9.37 to 1 | 75% higher |
| Mint | 3.55 to 1 | 6.23 to 1 | 75% higher |
| Periwinkle | 3.55 to 1 | 6.24 to 1 | 76% higher |
| Sky | 3.64 to 1 | 6.39 to 1 | 76% higher |
WCAG 2 contrast ratios, computed from the site's own hex values. AA needs at least 4.5:1 for normal-size text.
Same grey, different surface, different answer. So the rule became: on pastel cards, quieter text uses graphite or the card colour's own dark shade. You only catch that by checking every surface your text sits on.
Put the decisions in tokens
Decisions need to live somewhere the code can't ignore. On my app that's src/index.css, which maps the standard theme roles to my own colours. A trimmed bit:
:root {
/* the standard theme roles, mapped to my brand */
--background: 30 100% 95.3%; /* warm paper, #fff3e7 */
--foreground: 60 20% 1%; /* ink, #030302 */
--primary: 60 20% 1%;
--radius: 14px;
/* brand colours */
--canvas: #fff3e7;
--mint: #9bd8a9;
--periwinkle: #b8caf5;
--papaya: #ff4500; /* small doses only */
}Components use classes like bg-canvas and text-ink instead of raw hex, so one token change reaches the whole app. Base44's component library themes new components to match your app too. Great, as long as the theme is actually yours.
Where your rules go in Base44
Writing the decisions down is half the job. The other half is putting them where the AI will read them.
AI Controls: custom instructions
This is the big one. Custom instructions are rules the AI follows on every prompt in that app. Here's where they live:
Open the model menu
At the bottom of the AI chat, click the current model.
Go to AI Controls
Under Preferences, click AI Controls.
Open Custom Instructions
Click Custom Instructions.
Write your rules
One per line, then click Save changes.
Here's what a block could look like for a site in this style. It's an example, not a copy of my own settings, so swap in your own fonts, colours and rules before you paste it anywhere:
Headings use Newsreader. Body text uses Geist. Handwritten notes use Caveat, sparingly.
The page background is warm paper (#fff3e7), not plain white.
Colour blocks use the pastel palette: mint, marigold, periwinkle, sky, blush, peach.
Papaya (#ff4500) and azure (#0087ff) are small accents, never large areas.
Prefer the theme tokens over raw hex values in components.
Collage details are accents. Keep most of each page calm.
No photos of people. Use illustrations instead.
Never show meaning with colour alone.Same menu, one more tool: Freeze Files. It locks files you're happy with, so the AI can't touch them while you experiment elsewhere.
The Theme panel
Click the Theme icon at the top of the app editor. Change any colour role everywhere at once, or pick or upload a font in the Fonts tab. Then click Save & Apply.
Do this early. Base44's design guide suggests this order for a redesign: Theme panel first, then page-level changes in the AI chat, one page at a time, then single elements in Edit mode, which doesn't use credits.
Plan mode and Discuss mode
Starting from scratch? In the prompt box on the Base44 home screen, open the Mode dropdown and choose Plan instead of Build. The design question comes last, and you get four working previews of your app's main screen. Refine each one up to three times, regenerate the set or skip it.
Four real options beat one confident guess. Pick the preview that matches your written rules, not the flashiest one.
Inside an existing app, run bigger design changes through Discuss mode first. The AI can propose a change, and nothing is built until you approve it. Each Discuss message uses 0.3 credits, a lot cheaper than a rebuild you didn't want.
Running more than one app? On the Builder plan and above, a workspace design system (colours, fonts, logo and components) starts new apps on-brand. Apply it early: the docs say applying one to a finished app rebuilds it rather than restyling it in place.
A checklist before you type "make it modern"
- One sentence on who the app is for and how it should feel, in words a person would say.
- One reference, with notes on what you're taking and what you're leaving.
- Fonts chosen, each with a single job.
- Colour rules written down, and contrast checked on every surface text sits on.
- Rules saved as custom instructions, and the Theme panel set to match.
- Plan mode for a new app, Discuss mode for a big change, Edit mode last.
The full list of what this site is made with, fonts and colours included, is on the colophon. And if you'd rather have someone make these decisions with you, that's what I do.
If your app looks like everyone else's, you probably just haven't made the decisions yet. Make a few this week, then send the before and after to hello@aatmanjain.com (I'd genuinely love to see them).
FAQ
Why do AI-built apps all look the same?
Because they're built from the same parts, and the builder fills every missing decision with a safe default. Base44 apps, for example, all start on React, Tailwind CSS and shadcn/ui. If nobody chooses the type, colour and layout on purpose, you get the defaults, and so does everyone else.
How do I make my Base44 app look different?
Decide your fonts, colours and rules before you prompt, then save them as custom instructions in AI Controls so the AI follows them on every prompt. Set colours and fonts in the Theme panel first, then make page-level changes in the AI chat and polish details in Edit mode.
Where are custom instructions in Base44?
At the bottom of the AI chat, click the current model, then click AI Controls under Preferences, then Custom Instructions. Enter your rules one per line and click Save changes. They apply to every prompt in that app.
Is it bad to use Inter?
No. Inter is a very readable font, and my Hattle app uses it for body text. The "AI look" comes from leaving every choice on its default, not from any single font.
