Pre-launch design checklist for AI-built apps (30 checks)
A practical design QA checklist to run before you launch a Lovable, Bolt, v0 or Cursor-built app: tells, type, color, layout, mobile, meta tags and trust details.
You built the thing. Before you post it on Product Hunt, Reddit or X, spend an hour on this list. Most items take a minute to check and one prompt to fix. They're ordered so the cheapest, most visible fixes come first.
Run a free scan first: it checks section 1 automatically and gives you a fix prompt for each issue it finds.
1. The AI tells
- No builder badge. "Edit with Lovable", "Made with Bolt" and "Built with v0" are gone.
- No purple/indigo gradient as the main brand device.
- No stock Tailwind palette. Colours are your own tokens, not
indigo-600/slate-900. (Palettes) - Not Inter-only. There's a display face for headings. (Fonts)
- No emoji as icons in headings, cards or buttons.
- No glassmorphism (
backdrop-blur) on nav or cards. - No uniform three-card icon grid. Features have hierarchy.
- One radius, used consistently, and not everything is a pill.
- The hero isn't centered-everything with a badge pill on top.
2. Words
- The headline says what it is and who it's for. Test: could a stranger repeat it back?
- No filler verbs. Search the page for unlock, supercharge, seamless, elevate, empower, effortless, streamline. (Copy guide)
- Buttons are actions. "Create your first invoice" beats "Get started".
- No lorem ipsum or placeholder testimonials. Fake quotes from "Sarah J., CEO" hurt more than no quotes.
- Numbers are real. Remove "10,000+ happy users" if you have 12.
3. Type and colour
- The hero headline is at least 3.5x body size on desktop.
- Display headings have tight leading (0.95 to 1.1) and slight negative tracking.
- Body text is 16-18px with 1.5-1.6 line height and lines under ~75 characters.
- Text contrast passes 4.5:1 for body copy, including muted text.
- The accent colour appears sparingly: one key button, links, one emphasis.
4. Layout and mobile
- No horizontal scroll at 390px. Test on a real phone.
- Tap targets are at least 44px high on mobile.
- The nav works on mobile (no overlapping links, menu opens and closes).
- Real product screenshots instead of abstract illustrations or stock 3D blobs.
- Consistent spacing. Sections share a vertical rhythm; nothing is crammed.
5. Meta and sharing
- A real
<title>and meta description, not "Vite + React + TS" or "Lovable App". - A favicon that isn't the builder's default.
- An Open Graph image (1200x630) so links look good on X, LinkedIn, Slack and iMessage.
- A custom domain if possible.
6. Trust details
- Privacy policy and terms if you collect emails or payments.
- A way to contact a human (email address or form).
- Working forms. Submit every form once; check the confirmation and the email you receive.
- 404 page isn't the framework default.
Prompts for the most common failures
Mobile overflow:
Find any element wider than the viewport at 390px and fix it. Add overflow-wrap:anywhere to long strings, make tables scroll inside their container, and set max-width:100% on images and embeds. Don't change desktop layout.
Meta tags:
Set the document title to "<Product> - <what it does>" and add a meta description of ~150 characters, Open Graph and Twitter card tags using /og.png (1200x630), and a favicon from /favicon.svg. Remove any default builder title.
How to run it as a team of one
If you're solo, split the list across two sittings. Do sections 1-3 on desktop with fresh eyes in the morning, then sections 4-6 on your phone in the evening, ideally on a slow connection. Things you'd never notice at your desk, like a sticky header covering half the screen or a font that loads late and makes the page jump, are obvious on a phone on the bus.
Ask one friend who isn't technical to try the main flow while you watch without helping. Where they hesitate is your real to-do list. Write it down, fix the top three, and launch. The rest can be next week's work.
After launch
Re-scan after each redesign pass and share the before/after. It's a good post in itself. See how other launches score on the Slop Leaderboard, and if you build with Cursor or Claude Code, wire the scanner into your agent via MCP so it checks the UI for you.
FAQ
How long does this checklist take?
About an hour for a typical landing page plus app shell, longer if you need to fix things. The scanner covers the first section automatically in about 20 seconds.
What matters most if I only have 15 minutes?
Remove the builder badge, fix mobile overflow, rewrite the headline and button labels in plain words, and add a proper title, description and OG image.
Should I launch even if my Slop Score is low?
Yes. Shipping beats polishing. A low score just tells you where the cheap wins are for the next iteration.