# Make it look real: the checklist

From "How to make your vibe-coded app not look vibe-coded" on
creativemindhabits.com/posts. Go through it one line at a time. Each check has
a prompt you can paste into your AI tool (Claude, ChatGPT, Cursor or any
coding assistant), in the project you want to fix.

Tip: run one prompt, look at the change, then run the next. Asking for all of
them at once gets you a worse version of each.

---

## 1. Kill the gradient hero

- [ ] No purple-to-blue gradient backgrounds
- [ ] One brand colour, used on purpose, on a flat background

> Find every gradient background in this app. Replace them with one flat background and one accent colour. Ask me for the brand colour if there isn't one. Show me each file you change.

## 2. Emoji are not icons

- [ ] No emoji standing in for icons in the nav, buttons or cards
- [ ] One icon set, same size and stroke weight everywhere

> List every place an emoji is used as an icon. Replace them with icons from one set (Lucide or Heroicons), same size and stroke weight everywhere. Keep emoji only where they're part of the text a person wrote.

## 3. Stop centring everything

- [ ] Content sits on a grid or aligns to an edge
- [ ] Body text is left-aligned

> Most of this app is one centred column. Give the main screens a real layout: a grid or edge-aligned sections, with body text left-aligned. Don't change what any screen does.

## 4. Give the type a hierarchy

- [ ] Big, bold headings; smaller, quiet body text
- [ ] Clear size steps between them, not five sizes that are almost the same

> Set up a type scale: one size for page titles, one for section headings, one for body, one for small print, with clear steps between them. Apply it across the app and remove one-off font sizes.

## 5. Design the empty and loading states

- [ ] A new user sees something helpful before there's any data
- [ ] Every list and page has a loading state that resolves or explains itself

> For every screen that shows data, show me what a brand-new user sees with no data, and what shows while it loads. Design both: an empty state that says what to do first, and a loading state that never spins forever.

## 6. Check the AI images

- [ ] No wonky hands, extra fingers or plastic sheen
- [ ] Real photos, no image, or generated with written rules

> List every image in this app that looks AI-generated, with its file name and what gives it away (hands, text, plastic sheen). Don't replace them; I'll decide which go.

## 7. Let it breathe

- [ ] One spacing scale, used everywhere
- [ ] The most important thing on each screen has the most room

> Replace one-off margins and paddings with one spacing scale (for example 4, 8, 12, 16, 24, 32, 48). Give the main action on each screen more room than everything around it.

## 8. Write the words like a person

- [ ] No "Submit", "Error" or "No data found"
- [ ] Buttons say what happens; errors say what to do next

> Find every placeholder message: "Submit", "Error", "Something went wrong", "No data found" and the like. Rewrite each so it says what happens or what to do next, in one plain, friendly voice. Show me the old and new text side by side.

## The secret weapon: one hand-made detail

- [ ] One small thing no template would give you, made on purpose

This one is yours, not the AI's. Pick one place people look at a lot (an
avatar, an empty state, a button, a loading moment) and make it unmistakably
yours: a drawing, a shape, a sound, a line of copy. One is enough.

---

## The whole thing as one prompt

> My app works but looks like a default AI-made app. Review the UI and fix the defaults that give it away, one at a time, without changing what the app does:
>
> 1. Replace any purple-to-blue gradient backgrounds with one brand colour on a flat background. Ask me for the colour if there isn't one.
> 2. Replace emoji used as icons with one real icon set (e.g. Lucide or Heroicons), same size and weight everywhere.
> 3. Stop centring everything: use a grid or edge-aligned layout, and left-align body text.
> 4. Create a type hierarchy: big bold headings, smaller quiet body text, clear size steps between them.
> 5. Design every empty state and loading state: what a new user sees before there's any data, and what shows while things load.
> 6. Flag any AI-generated images with obvious tells (hands, plastic sheen) so I can replace or remove them.
> 7. Fix spacing: use a consistent spacing scale and give the most important things more room.
> 8. Rewrite placeholder copy ("Submit", "Error", "No data found") so buttons and messages say what happens, like a person would.
>
> Start by listing what you find for each point, with file names. Then fix them in that order, showing me each change.

---

Made by Em at Creative Mind Habits. Free to use and share.
One fix like this every week: creativemindhabits.com