Make your AI-built app look less generic: 10 design reference sites

Your app works. It also looks like every other app built with AI that month: same rounded cards, same purple button, same font.

That’s not the AI’s fault. You never showed it what good looks like, so it used its default.

You don’t need a designer to fix that. You need 1 to 3 good references, 2 fonts and a palette, handed to the AI in a way it understands.

When should you care how your app looks?

Make it reasonable from day one. Make it premium once it earns it.

I work by “ship ugly and fast, but useful”. Ugly means visually basic, never broken or confusing. I make every app look reasonable from the start. I don’t spend time making it premium until the app sells or has proven it makes money.

The sites below cover both stages. A screenshot and a palette get you to reasonable. The paid libraries help later, when the design is worth paying for. If you’re still on your first build, this is where I teach the whole process, and Simple, Lovable, Complete explains why the useful part comes first.

Why do AI-built apps all look the same?

Because the AI picks a safe default when you don’t name a style. Many builders use the same component kits underneath, so those defaults look alike.

Lovable shows this. For an open-ended prompt, it asks you about palette, typography and layout first. Name a style in your prompt and it skips the questions (Lovable design guidance).

“Make it look professional” doesn’t help. It fails the same way “act as a designer” fails, which I explain in stop adding roles to your AI prompts. The AI needs the specifics it can’t guess: a picture, colours, fonts and words for the feel.

Which sites should you take design references from?

Ten sites, grouped by the job they do. Prices and plans checked on each site on 9 November 2026. Several sites wouldn’t load their pricing pages for checking, so I’ve only given prices I could confirm.

Screens and flows from real apps

1. Mobbin collects screens and flows from live mobile and web apps. Search “onboarding” or “paywall” and see how real apps handle it. The free plan has no search and no flows, and caps you at 3 collections. Pro costs $10 a month billed yearly ($120) or $15 a month billed quarterly. There’s no monthly billing (Mobbin pricing).

2. Refero is a searchable library of real product screens. The free plan limits search results. Pro adds full search, flows and a connection your AI tools use directly, called MCP (Refero plans).

3. Page Flows shows recorded user journeys, like a full sign-up or checkout. Use it when one of your flows feels clunky and you want to see how others do it.

Whole pages and sites

4. Land-book is a gallery of full landing pages. Look at it before you build your homepage or pricing section.

5. Recent shows curated websites, app screenshots, app icons and branding, and you browse without logging in. The old godly.website address now redirects there.

Fonts and colours

6. Google Fonts fonts are free and open source, and you’re allowed to use them commercially, including in products you sell (Google Fonts FAQ). Pick 2, one for headings and one for body text, and name them in your prompt.

7. Coolors generates palettes. The free plan gives you up to 5 colours a palette, 10 saved palettes and colours picked from an image, with ads. It exports to CSS and Tailwind (Coolors pricing).

8. Realtime Colors is the one I’d open first. You set text, background, primary, secondary and accent colours plus 2 fonts, and see them on a real page layout instead of a row of swatches. It’s free and exports CSS and Tailwind.

9. tweakcn is a visual theme editor for shadcn/ui, the component kit behind many AI-built apps. Use it when you want to change the whole look in one go.

The one you already have

10. Your phone. Screenshot the apps you enjoy using. A banking app with calm spacing, a recipe app with big photos. That’s a reference library made of things you already like.

How do you hand a reference to the AI?

Attach a screenshot, then say what to borrow from it. A URL alone isn’t enough.

All four main builders take images in the chat:

• Lovable: drag, paste or attach up to 10 files a message, or use Take a screenshot under Add context (Lovable chat docs). A screenshot works better than a link.
• Claude: JPEG, PNG, GIF or WebP, through the + button, drag and drop, or paste (Claude Help Center).
• Cursor: drag or paste images into the chat. Cursor recommends this for UI work (Cursor docs).
• Replit: import Figma frames, or attach Canvas frames to Agent messages (Replit Canvas).

Two habits stop the common mistakes.

First, say the image is a reference. Otherwise the AI sometimes copies it too literally or drops it into your app as a picture. Lovable’s docs advise saying where an attached image should go (Lovable image tips). The “Use a reference, don’t copy it” prompt below does this.

Second, turn the reference into words once. The “Screenshot to style brief” prompt converts your screenshots into hex codes, fonts, spacing and things to avoid. Paste that brief into your project instructions. In Lovable, fonts, colours and style keywords saved there apply to every new screen.

The prompts here are starting points, not tested recipes. Change them to fit your app.

What if your app already looks generic?

Don’t redesign it. Restyle one screen at a time.

The “Restyle a generic screen” prompt compares your screen with a reference and gives you 5 small changes. Send them to your builder one by one and check the preview after each. One change per prompt keeps the AI from redesigning things you liked. Same idea as making your AI app builder fix one thing without breaking the rest.

In Lovable, the preview toolbar’s Select elements tool lets you click the exact part you want changed. It uses credits (Lovable preview toolbar), so check how many Lovable credits you’ll need before a big restyle.

Start with the screen your users see first. Then stop, and go back to making the app more useful. My guide on how to ship your first app as a beginner covers what comes next.

I'm building my first app and I'm not a designer. I've attached [1-3] screenshots of designs I like.

Write a short style brief I can paste into my project instructions. Include:
- colours as hex codes (background, text, primary, accent)
- font style, and Google Fonts that match it
- spacing (tight or airy), corner radius, shadows
- the tone of buttons and labels
- 3 things to avoid

Keep it under 20 lines. Describe the style, not the content of the screenshots. If you can't tell something from the images, leave it out rather than guessing.

The attached screenshot is a design reference only. Don't insert it into the app as an image, and don't copy its text, logo or content.

Borrow these qualities: [for example: the generous spacing, the rounded cards, the bold headings]

Apply them to: [screen name in my app]

Keep my own content, brand name and the layout of my feature as they are. Change only the visual style. Tell me which parts you changed.

Help me choose colours and fonts for my app.

What it does: [one sentence]
Who uses it: [who]
How it should feel: [for example: calm and trustworthy, or playful and bold]

Suggest 3 options. For each: 5 colours as hex codes with their job (background, text, primary, secondary, accent), one heading font and one body font from Google Fonts, and one line on why it fits my users. Keep text easy to read on the background. I'll pick one.

I've attached 2 screenshots. The first is my current screen. The second is a reference I like.

List the 5 smallest changes that would make my screen feel closer to the reference. Number them. Each change must be one instruction I can send to my app builder on its own, such as "increase the padding inside cards" or "make headings bold and larger".

Don't suggest changing my content or features. Order them from biggest visual difference to smallest.