# Unslop Me

> Unslop Me is a free web tool that scans a public website URL and scores how designed it looks: a 0-100 Slop Score (100 = looks designed; AI tells pull the score down), the specific design tells it found with evidence, fix prompts for Lovable, Bolt, v0 and Cursor, and a free redesign of the first screen with before/after screenshots. A $15 one-time pack adds a multi-page crawl, a full design system and per-page redesigns.

## Who it's for
Founders and builders who shipped an app with AI builders (Lovable, Bolt, v0, Replit, Cursor, Claude Code) and want it to look professionally designed.

## How it works
1. Paste your site URL at https://unslop-me.vercel.app/
2. A headless browser captures desktop (1440px) and mobile (390px) first screens.
3. Heuristics detect 13 tells: purple/indigo gradients, default Tailwind palette, Inter/system-font-only type, emoji icons, glassmorphism, uniform icon-card grids, rounded-everything, centered hero, generic AI copy, default Lucide icons, builder badges, flat type scale, mobile overflow.
4. You get a Slop Score, ranked fixes, design prompts and a redesigned hero. Free scores are listed on the public Slop Leaderboard with a page at https://unslop-me.vercel.app/s/<slug> (one per site, latest scan wins).

## For AI agents
- MCP server (streamable HTTP, no auth): https://unslop-me-production.up.railway.app/mcp with tools `unslop_scan(url)` and `unslop_tells()`
- Cursor: add {"mcpServers":{"unslop":{"url":"https://unslop-me-production.up.railway.app/mcp"}}} to .cursor/mcp.json
- Claude Code: `claude mcp add --transport http unslop https://unslop-me-production.up.railway.app/mcp`
- JSON API: POST https://unslop-me-production.up.railway.app/api/scan {"url": "..."}, GET https://unslop-me-production.up.railway.app/api/scan/{id}, GET https://unslop-me-production.up.railway.app/api/tells. 10 scans/hour/IP.
- OpenAPI: https://unslop-me-production.up.railway.app/openapi.json
- Docs: https://unslop-me.vercel.app/agents

## Pages
- [Scanner](https://unslop-me.vercel.app/): free Slop Score
- [Slop Leaderboard](https://unslop-me.vercel.app/leaderboard): scores for 30 public sites, mostly Lovable, Bolt and v0 apps
- [Agents / API / MCP](https://unslop-me.vercel.app/agents)
- [Guides](https://unslop-me.vercel.app/guides/)
- [How to make a Lovable app look professional (without hiring a designer)](https://unslop-me.vercel.app/guides/how-to-make-a-lovable-app-look-professional): A practical, prompt-by-prompt way to take a Lovable app from "obviously generated" to "someone designed this": tokens, type, layout, copy and the badge.
- [Score your site before and after running the unslop skill](https://unslop-me.vercel.app/guides/score-your-site-before-and-after-unslop): The unslop Claude skill rewrites AI-looking UI. Get a free Slop Score before you run it, re-scan after, and see exactly which AI design tells are left.
- [Why AI-built apps all look the same (the 13 tells, explained)](https://unslop-me.vercel.app/guides/why-ai-built-apps-look-the-same): The specific visual patterns that make Lovable, Bolt, v0 and Cursor sites look generated, where each comes from, and what to do instead.
- [AI website design tells: a 13-point checklist (with how to check each one)](https://unslop-me.vercel.app/guides/ai-website-design-tells-checklist): A printable checklist of the 13 visual tells that make a site look AI-generated, the point weight of each, and a 30-second way to check it yourself in DevTools.
- [How to make a Lovable app not look AI-generated (a tell-by-tell audit)](https://unslop-me.vercel.app/guides/how-to-make-a-lovable-app-not-look-ai-generated): Why Lovable apps get spotted as AI-built, the exact tells our scanner checks for, and the prompts to remove each one without breaking your app.
- [Why does my v0 or Bolt site look generic? (and how to fix it)](https://unslop-me.vercel.app/guides/why-does-my-v0-bolt-site-look-generic): v0 and Bolt sites look alike because they share defaults: shadcn/ui, Tailwind colours, Inter and Lucide. Which ones give you away, and what to change.
- [Bolt app design tips: 9 changes that make a bolt.new site look designed](https://unslop-me.vercel.app/guides/bolt-app-design-tips): Specific prompts and settings to take a Bolt app past the template look, from tokens and fonts to layout, icons, copy and publishing.
- [v0 design system prompts that stop the shadcn default look](https://unslop-me.vercel.app/guides/v0-design-system-prompts): Copy-paste v0 prompts to set up a real design system (tokens, type, radius, components) so your v0 projects stop looking like every other shadcn/ui site.
- [Best fonts for vibe-coded apps (12 free pairings that aren't Inter)](https://unslop-me.vercel.app/guides/best-fonts-for-vibe-coded-apps): Free Google Fonts pairings that make Lovable, Bolt, v0 and Cursor apps look designed, with what each suits and the exact prompt to install them.
- [Color palettes that don't look AI-generated (with hex codes)](https://unslop-me.vercel.app/guides/color-palettes-that-dont-look-ai): Eight ready-to-use five-color palettes for SaaS and indie apps, why indigo and slate read as default, and how to apply custom tokens in Tailwind.
- [Cursor rules for UI design: a .cursor/rules file that stops generic UI](https://unslop-me.vercel.app/guides/cursor-rules-for-ui-design): A complete, copy-paste Cursor project rule (and CLAUDE.md equivalent) that keeps AI-written UI on your design system instead of drifting back to Tailwind defaults.
- [Pre-launch design checklist for AI-built apps (30 checks)](https://unslop-me.vercel.app/guides/pre-launch-design-checklist): 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.
- [How to restyle shadcn/ui so it doesn't look like every other site](https://unslop-me.vercel.app/guides/replace-shadcn-defaults): The exact shadcn/ui variables, component files and Tailwind settings to change so your Lovable, v0 or Cursor app stops looking like the default shadcn theme.
- [Landing page copy that doesn't sound AI-written (and the words to cut)](https://unslop-me.vercel.app/guides/landing-page-copy-that-doesnt-sound-ai): The phrases that make AI-built landing pages sound generated, a simple formula for headlines and subheads, and before/after rewrites you can copy.

## FAQ
- **What is a Slop Score?** A 0-100 score for how designed a site looks. Starts at 100; each detected AI design tell subtracts points. 60+ = already looks designed; 35-59 = a few giveaways; under 35 = lots of room to glow up.
- **What AI design tells does Unslop Me check for?** Thirteen common tells: purple or indigo gradients, the default Tailwind palette, Inter or system fonts only, emoji used as icons, glassmorphism blur, uniform icon-card feature grids, rounded-2xl on everything, a centered-everything hero, generic AI copy, default Lucide icons, a builder badge left on, low type-scale contrast, and horizontal overflow on mobile. Each one found lowers the score, and the result shows the evidence and the fix.
- **Why does every vibe-coded app have a purple gradient?** Because the builders share the same defaults. Tailwind's indigo and violet colors, shadcn/ui and Lucide icons fill most of the code these models learned from, so a vague prompt like "make it modern" lands on a purple-to-blue gradient hero almost every time. To fix it, pick one brand color that isn't indigo or violet, use flat backgrounds, and give your builder exact color values instead of adjectives. A free scan shows whether your site still has the gradient and every other tell, with the fix for each.
- **What does "this looks vibe coded" mean?** It means the site looks like the default output of an AI builder, not like someone designed it. People usually notice the same shared defaults: a purple or indigo gradient hero, untuned Inter type, a centered headline over three identical icon cards, emoji or default Lucide icons, and rounded corners on everything. It is the new "looks like a Bootstrap template." The fix is the same as back then: replace the defaults with deliberate choices. A free scan lists which of those tells your first screen has and what each one costs.
- **How can I check if my site looks vibe coded?** Paste your public URL into Unslop Me. A real browser captures the first screen on desktop and mobile, then a free Slop Score lists each AI design tell it found (purple gradients, default Inter, cookie-cutter card grids, and so on) with the points it cost and a fix. No signup. Re-scan after you change the design to see whether the tells are gone.
- **How do I unslop a vibe-coded website?** Paste your public URL into Unslop Me for a free Slop Score and one redesigned first screen. Use the ranked tells and prompts in your builder (Lovable, Bolt, v0, Cursor, Claude Code, Codex). Re-scan to check the score moved. For a full multi-page redesign pack it is $15 one time; or pair the scan with a design skill while you edit code.
- **How is a Slop Score different from an "is it vibe coded?" checker?** A vibe-coded checker guesses whether a site was built with AI. A Slop Score measures how designed the first screen looks: it lists each AI design tell found with the points it cost, ranks fixes, and redesigns the first screen for free. An AI-built site can still score high once the tells are gone.
- **Do I still need a Slop Score if I use a design skill like Impeccable, Hallmark, or unslop?** They work well together. Design skills (including free Claude skills named unslop) are rules your coding agent follows while it builds. A Slop Score checks the live site from the outside, in a real browser, and lists the AI design tells that still made it onto your first screen with the points each one cost, so you can see whether the rules worked. It works with any builder and needs no install.
- **Is Unslop Me the same as the free unslop Claude skill?** No. Unslop Me is this website: paste any public URL, get a Slop Score from a real-browser scan, one free redesigned first screen, and an optional $15 redesign pack. Free skills named unslop are installable prompts for Claude Code or similar agents that rewrite UI in your repo. Use a skill while you build; use Unslop Me to audit the live site afterward. Before/after workflow: https://unslop-me.vercel.app/guides/score-your-site-before-and-after-unslop
- **Is Unslop Me free?** Yes. Scan + one redesigned first screen is free, no signup. Full redesign pack is $15 one time.
- **How long does a scan take?** Usually 5-15 seconds. It opens the page in a real browser, captures the first screen on desktop and mobile, scores it, and shows the free redesign.
- **Which builders are supported?** Any live, public URL works, whether it was built with Lovable, Bolt, v0, Replit, Base44, Cursor, Claude Code, Codex or by hand. The pack's prompts paste into whichever tool you use.
- **Will the prompts break my app?** No. They only change how it looks, not how it works.
- **Is my Slop Score public?** Yes, free scores go on the public Slop Leaderboard (one entry per site). Remove any site from its score page or https://unslop-me.vercel.app/remove?slug=<slug>; paid packs are never published.

## Facts
- Free scan, no signup. Full pack: $15 one time (Stripe).
- Scans only public http/https sites. Scan results kept about 7 days. Every free website scan is auto-listed on the public Slop Leaderboard (scans made through the MCP server are not). Anyone can remove a site from its score page or at https://unslop-me.vercel.app/remove?slug=<slug>. Paid packs are never published.
- Full text of all guides: https://unslop-me.vercel.app/llms-full.txt


# Full guides

# How to make a Lovable app look professional (without hiring a designer)

URL: https://unslop-me.vercel.app/guides/how-to-make-a-lovable-app-look-professional

A practical, prompt-by-prompt way to take a Lovable app from "obviously generated" to "someone designed this": tokens, type, layout, copy and the badge.

Lovable is very good at getting a working app in front of you. It is also very consistent about how that app looks: a centered hero, an indigo-to-purple gradient, Inter everywhere, a row of three rounded cards with Lucide icons, and a glassy navbar. None of those choices is bad on its own. Together, they read as "default", and people have learned to spot it.

The good news is that this look comes from defaults, not from limits. Lovable will build something with character if you tell it exactly what character you want. This guide is the order we'd do it in, with prompts you can paste.

## 1. Decide on three things before you prompt anything

Vague prompts like "make it modern and clean" are what produce the default look, because "modern and clean" *is* the default look. Before touching Lovable, write down:

- **One display font and one text font.** For example Fraunces + Inter Tight, Instrument Serif + IBM Plex Sans, or Space Grotesk + IBM Plex Mono. See [best fonts for vibe-coded apps](/guides/best-fonts-for-vibe-coded-apps) for pairings that work.
- **Five colors as hex values.** Background, ink (text), muted text, one accent, one line/border color. Avoid stock Tailwind indigo (#6366f1) and slate. [This palette guide](/guides/color-palettes-that-dont-look-ai) has starting sets.
- **A radius.** Pick 0, 2, 4 or 6px. Not "rounded-2xl on everything".

That's your design system. It fits on a sticky note, and it's the part AI tools can't invent for you because they don't know your product.

## 2. Install the tokens first, in one prompt

Paste this into Lovable, with your own values:

```
Change only styling. Do not change routes, data fetching, state or component logic.

Set up a design system and apply it everywhere:
- Fonts: load "Fraunces" (weights 400, 700, 800) and "Inter Tight" (400, 500, 600) from Google Fonts. Headings use Fraunces, body and UI use Inter Tight. Remove Inter.
- Colors (add as CSS variables and Tailwind theme colors, and replace every indigo/violet/purple/slate class):
  --paper #f4f0e8 (page background), --ink #16130f (text, primary buttons), --muted #6b6459, --accent #ff4d1c (one highlight per screen, links on hover), --line #d9d2c4 (borders)
- Border radius: 4px on buttons, inputs and cards. No pill buttons.
- Remove all gradients and backdrop-blur. Surfaces are solid with a 1.5px --ink or --line border.
- Shadows: none, except an optional hard offset shadow (6px 6px 0 var(--ink)) on one featured element.
```

Check the result in the preview, then publish. Don't combine this with layout changes; if something breaks, you want to know which prompt did it.

## 3. Fix the hero, which is where people decide

The centered stack of badge, giant headline, subheading and two buttons is the most recognisable AI layout there is. Try an asymmetric one:

```
Change only the hero section layout and styling.
- Left-align everything. Two columns on desktop: 7/12 text, 5/12 a real product screenshot (use the existing dashboard component rendered at small scale, or a placeholder image I will replace).
- Remove the pill badge above the headline. Replace it with a small uppercase monospace label, e.g. "FOR INDEPENDENT BOOKKEEPERS".
- Headline: Fraunces 800, 72px desktop / 44px mobile, line-height 0.95, letter-spacing -0.03em. Max 8 words.
- One primary button (--ink background, --paper text). The secondary action is a plain underlined text link, not a second button.
- Stack to one column under 900px; screenshot goes below the text.
```

## 4. Break the three-card grid

Feature grids of identical cards with an icon in a circle are the second-biggest tell. Replace them with something that has hierarchy:

```
Replace the features grid with a numbered list layout:
- A left column with the section heading (Fraunces 700, 48px).
- A right column with features as rows: large italic numeral in --accent (01, 02, 03), feature title in Fraunces 600 24px, one sentence of description. 1px --line border between rows.
- Remove all icons from this section.
- If there's a 4th or 5th feature, keep them in the same list; don't make a second grid.
```

If one feature matters more than the others, give it its own section with a screenshot instead.

## 5. Rewrite the copy in plain words

Lovable fills gaps with phrases like "Unlock your potential" and "Seamlessly streamline your workflow". Your visitors have read those exact sentences on hundreds of sites. You can ask Lovable to rewrite, but you'll get a better result writing three lines yourself:

- **Headline:** what it is, for whom. "Invoices for freelance translators."
- **Subhead:** the outcome plus one concrete detail. "Send a branded invoice in under a minute, get paid by card or bank transfer, and see who's late at a glance."
- **Button:** the action. "Create an invoice", not "Get started".

There's a longer list of phrases to cut in [landing page copy that doesn't sound AI](/guides/landing-page-copy-that-doesnt-sound-ai).

## 6. Replace emoji and generic icons

Rocket, lightning bolt and sparkles emoji in headings are an instant giveaway. Either remove icons entirely (often the best option) or ask for one consistent set:

```
Remove all emoji from headings, buttons and cards. Where an icon is genuinely useful, use Phosphor icons (regular weight, 20px) consistently. Do not use icons inside circles or colored squares.
```

## 7. Check mobile at 390px

AI builders often leave something that overflows horizontally on phones, like a wide table, a long URL or a fixed-width image. Open the published site on an actual phone, or in your browser at 390px wide, and scroll sideways. If the page moves, ask Lovable: "Find and fix any element wider than the viewport at 390px. Add overflow-wrap:anywhere to long text and make tables scroll inside their own container."

## 8. Remove the badge and polish the details

- Hide the "Edit with Lovable" badge (Project settings, on paid plans).
- Add a real favicon and a proper `<title>` and description.
- Add an Open Graph image so your link previews don't show a blank card.
- Use a custom domain if you can. A `.lovable.app` URL is fine for testing but tells people what you built it with.

## Measure it

Run your published URL through the [free Slop Score scanner](/) before and after. It checks for the exact tells above (gradients, stock palette, font stack, card grids, emoji, glass, badges, mobile overflow) and gives you fix prompts written for Lovable. The [leaderboard](/leaderboard) shows how other Lovable, Bolt and v0 apps score, which is a useful sense check. For a final pass before launch, use the [pre-launch design checklist](/guides/pre-launch-design-checklist).

## FAQ

**Can Lovable make a site that doesn't look AI-generated?**
Yes. Lovable follows instructions well when they are specific. The default look comes from vague prompts. Give it exact fonts, hex values, a radius scale and a layout description and the output changes a lot.

**Should I remove the "Edit with Lovable" badge?**
On a paid plan you can hide it in project settings. It's the single fastest tell to fix, and visitors who spot it tend to assume the rest is a template too.

**Will redesign prompts break my app logic?**
Not if you scope them. Start every prompt with "Change only styling and layout. Do not change data fetching, routes, state or component names."

---

# Score your site before and after running the unslop skill

URL: https://unslop-me.vercel.app/guides/score-your-site-before-and-after-unslop

The unslop Claude skill rewrites AI-looking UI. Get a free Slop Score before you run it, re-scan after, and see exactly which AI design tells are left.

unslop is a free skill for Claude Code and Codex that redesigns vibecoded UI. It's good at the fixing. This guide adds the measuring: a Slop Score before, the same scan after, and a short list of whatever is still giving you away.

If you've seen the [unslop](https://github.com/heydamir/unslop) skill going around on X, you've seen the pitch: point it at a dashboard or landing page that looks vibe coded, and it turns it into something with its own character. It's made by Damir Sokolovsky ([@heydamir](https://x.com/heydamir)), it's free, and it's licensed CC BY 4.0. Unslop Me is a separate website with a similar name. We're not affiliated with the skill or its author.

The two do different jobs, and they work well together. The skill changes your code. Unslop Me scans the live site in a real browser and gives it a number. If you run a scan before the skill and another one after, you can see how much it helped, and what's still left.

## What the unslop skill does

According to [its README](https://github.com/heydamir/unslop#readme), unslop is a skill for Claude Code (`/unslop`) and Codex (`$unslop`). It:

- **Audits** the screen and lists every sign of slop it finds, like purple gradients, glows, emoji labels, shouty copy and uneven spacing, along with where each one lives.
- **Sets a direction** from your product (character, colour moments, a signature detail) and proposes it before it edits anything, so you can steer.
- **Fixes the screen in passes**: spacing, colour, icons, copy, type, layout, details, visuals and motion, in that order.
- Works across Next.js, React, Vue, Svelte, Tailwind or plain HTML/CSS, and can work from a live link (it uses Playwright to snapshot a live site).
- Can optionally generate hero visuals through an image service and make a short "story" video of the screen unslopping itself.

If a screen is already good, the README says it will tell you so and suggest small refinements instead of a redesign. That's a sensible default.

## What it doesn't give you: a number to compare

The skill's audit is a list written by your agent, inside your coding session. That's useful for deciding what to fix. It's harder to use for "did this get better, and by how much?", especially across several runs, several screens, or when someone else on your team asks.

That's the gap a Slop Score fills. Unslop Me opens your public URL in a headless browser at 1440px and 390px, reads the computed styles and DOM, and checks [13 AI design tells](/guides/ai-website-design-tells-checklist). It starts at 100 and subtracts points for each tell it finds on your first screen: up to −20 for a purple/indigo gradient, up to −16 for generic AI copy, −12 for an Inter-only type setup, and so on. The same checks run every time, so the before and after numbers can be compared.

- **60+**: already looks designed.
- **35–59**: a few giveaways are showing.
- **Under 35**: lots of room to improve.

## The before/after workflow

### 1. Scan the live site first

Paste your deployed URL into the [free scanner](/#scan). Write down the score and the tells it lists, or take a screenshot. That's your baseline.

[Get your free Slop Score →](/#scan) Free · no signup · about 20 seconds

### 2. Run unslop (or Impeccable, Hallmark, or your own rules)

Install the skill as its README describes, then run it on the screen you scanned:

```
/unslop the hero of https://your-app.lovable.app
```

A useful trick: paste the tells from your scan into the same chat, so the skill's audit starts from what a browser actually rendered. For example:

```
/unslop this landing page.
An external scan flagged these, fix them first:
- Purple/indigo gradient on the hero background
- Inter / system font for over 90% of text
- Uniform 3-card icon grid under the hero
Keep all copy, routes and functionality.
```

The same works with other design skills or a [Cursor rules file](/guides/cursor-rules-for-ui-design). The scan doesn't care which tool made the change.

### 3. Deploy and re-scan

The score comes from the live page, so push your changes and scan the same URL again. Compare:

- **The score.** Did it move into the next band?
- **Which tells are gone** and which are still listed, each with the evidence the scanner found (the gradient, the stock colours, the font names, the exact AI phrases).
- **Mobile.** Redesigns often add a wide element; the scan checks for horizontal overflow at 390px.

Free scans are listed on the public [Slop Leaderboard](/leaderboard), one page per site, and the latest scan wins. So your public score page shows the "after" once you re-scan. (You can remove your page any time.)

### 4. Handle what's left

A good skill run usually clears the loud tells on the screen you pointed it at. What often remains is everything else: the pricing page, the dashboard, the settings screen, the copy on page three. You can run the skill again, screen by screen. Or, if you'd rather have one consistent system for the whole app, the [$15 redesign pack](/#pricing) crawls your home page plus up to 5 linked pages and gives you:

- A **design-system.md** with colour tokens, a font pairing, a type scale, spacing, radius and component rules.
- A **redesign of each page** as HTML, with before, after and mobile previews.
- **Prompts in build order** for Lovable, Cursor, Bolt and v0: one setup step, then one prompt per page.
- A **Lovable Knowledge file** and a **Cursor rules file** (.mdc). You can also hand the design-system.md to your agent as the direction before running a skill.

It's a one-time payment through Stripe, and it downloads as a .zip. Then re-scan once more to check.

## How to check if your site looks vibe coded (without any tool)

If you'd rather eyeball it first, look for: a purple-to-blue gradient hero, the same default font for headings and body, a centered headline over three identical icon cards, emoji standing in for icons, frosted-glass navbars, and rounded corners on everything. Our [13-point checklist](/guides/ai-website-design-tells-checklist) has a 30-second DevTools check for each one, and [why AI-built apps look the same](/guides/why-ai-built-apps-look-the-same) explains where those defaults come from.

[Get your free Slop Score →](/#scan) Free · no signup · about 20 seconds

## FAQ

**Is Unslop Me the same as the unslop Claude skill?**
No. unslop is a free skill by Damir Sokolovsky (@heydamir) that you install in Claude Code or Codex to redesign UI in your project. Unslop Me is a separate website, not affiliated with it: paste a public URL and get a 0-100 Slop Score from a real-browser scan, one free redesigned first screen, and an optional $15 redesign pack.

**Does the unslop skill score my site?**
Its README describes an audit that lists every sign of slop and where it lives, then fixes the screen in passes. It doesn't describe a numeric score. If you want a number you can compare before and after, run a free Slop Score on the live URL before and after the skill.

**How do I measure the unslop skill's before and after?**
Scan your live URL on Unslop Me and save the score and result link. Run the skill, deploy, and scan the same URL again. Compare the score and the list of tells that are still flagged, including the mobile overflow check.

**How can I check if my site looks vibe coded?**
Look for a purple/indigo gradient hero, Inter or a system font everywhere, a centered hero over identical icon cards, emoji icons, glassmorphism and rounded-2xl on everything. A free Slop Score checks all 13 tells in a real browser and shows the evidence for each.

**Can I use the scan results as input for the skill?**
Yes. Paste the tells and evidence from your scan into the chat when you run the skill, and ask it to fix those first. It works the same with Impeccable, Hallmark, a Cursor rules file or a plain prompt.

**What does the $15 pack add if I already used the skill?**
Coverage and consistency. The pack crawls your home page plus up to 5 linked pages and gives you one design system (design-system.md), a redesign of each page with before, after and mobile previews, prompts in build order for Lovable, Cursor, Bolt and v0, and a Lovable Knowledge file and Cursor rules file. It's a one-time payment.

---

# Why AI-built apps all look the same (the 13 tells, explained)

URL: https://unslop-me.vercel.app/guides/why-ai-built-apps-look-the-same

The specific visual patterns that make Lovable, Bolt, v0 and Cursor sites look generated, where each comes from, and what to do instead.

If you've browsed a few launch directories lately, you've seen it: different products, same website. A soft gradient, a centered headline that says something about "your workflow", three rounded cards with icons, a frosted navbar. This isn't a coincidence and it isn't laziness. It's what you get when every tool starts from the same parts and nobody overrides the defaults.

We built the [Slop Score scanner](/) around 13 specific tells. Here's what each one is, why it happens, and the fix.

## Where the sameness comes from

Most AI builders generate React + Tailwind CSS, usually with shadcn/ui components and Lucide icons. Those are good tools. But they ship with defaults (Tailwind's indigo-500, shadcn's radius, Lucide's 24px stroke-2 icons, Inter as the font everyone pairs them with), and language models were trained on thousands of sites that kept those defaults. Ask for "a modern SaaS landing page" and the most statistically likely answer is the average of all of them.

So the fix is never "use a different builder". It's "make decisions the model can't guess", and write them into your prompt.

## The tells

### 1. Purple and indigo gradients
`from-indigo-500 to-purple-600` is probably the most generated CSS class string on the internet. Gradients aren't banned, but a gradient as your whole brand is a tell. **Instead:** commit to one flat accent color and use a gradient once, if at all.

### 2. The default Tailwind palette
Even without gradients, sites built on stock `slate-900`, `gray-50`, `indigo-600` and `emerald-500` feel familiar because they are. **Instead:** define five custom hex tokens. See [color palettes that don't look AI](/guides/color-palettes-that-dont-look-ai).

### 3. Inter (or system fonts) for everything
Inter is a great text face. When it's the only face, with headings just set bolder, there's no voice. Geist, Poppins, DM Sans, Manrope and Plus Jakarta Sans have become the same signal. **Instead:** pair a characterful display face with a readable text face ([pairings here](/guides/best-fonts-for-vibe-coded-apps)).

### 4. Emoji as icons
🚀 Fast. ⚡ Powerful. 🔒 Secure. Emoji render differently on every OS and read as placeholder. **Instead:** no icons, or one consistent icon set.

### 5. Glassmorphism
`backdrop-blur` on navbars and cards. It costs performance, often hurts contrast, and has become shorthand for "template". **Instead:** solid surfaces with a clear border.

### 6. The uniform icon-card grid
Three (or six) identical cards, each with an icon in a tinted circle, a two-word heading and a sentence. This layout says "I had features and didn't know which mattered". **Instead:** lead with your most important feature, give it a screenshot, and list the rest.

### 7. rounded-2xl on everything
Buttons are pills, cards are 16-24px rounded, inputs are rounded, images are rounded. When everything is soft, nothing has edges, and the page looks inflated. **Instead:** pick one small radius (0-6px) and use it consistently.

### 8. The centered-everything hero
Badge, headline, subhead, two buttons, all centered. **Instead:** left-align, use two columns, and show the product.

### 9. Generic AI copy
"Unlock", "supercharge", "seamless", "elevate", "empower", "effortless", "all-in-one", "in seconds", "take your X to the next level". These words describe nothing. **Instead:** say what it does and for whom. [More on copy](/guides/landing-page-copy-that-doesnt-sound-ai).

### 10. Default Lucide icons everywhere
Lucide is lovely, but 30 stroke-2 icons on a landing page is a fingerprint. **Instead:** use far fewer icons, or a set with a different personality (Phosphor, Tabler at a different weight, or custom glyphs).

### 11. The builder badge
"Edit with Lovable", "Made with Bolt", "Built with v0". It's free advertising for the builder and a cue to the visitor to look for the other tells. **Instead:** remove it before launch.

### 12. Flat type scale
A 40px headline over 18px body text is a 2.2x ratio, which looks timid. Designed sites usually go 3.5x or more on the hero. **Instead:** make the display size dramatic and the body size comfortable.

### 13. Mobile horizontal overflow
Something on the page is wider than a phone and the whole page wiggles sideways. Builders preview on desktop. **Instead:** test at 390px and fix anything that overflows.

## What the data says

We scanned public showcase apps built with Lovable, Bolt and v0 for the [Slop Leaderboard](/leaderboard). The most common tells there are typography and layout defaults rather than colour. That's useful, because fonts and layout are cheap to change with one prompt each. Purple gradients get the attention, but the type stack is the quieter tell that turns up nearly everywhere.

## How to fix it in an afternoon

1. Write down fonts, five hex colours and a radius before prompting. Our [Lovable guide](/guides/how-to-make-a-lovable-app-look-professional) walks through the exact prompts.
2. Apply those tokens in one styling-only prompt.
3. Rework the hero and the feature grid.
4. Rewrite the headline, subhead and buttons yourself.
5. Remove emoji, glass and the badge.
6. Check mobile at 390px.
7. [Scan it](/) and compare scores.

If you use Cursor or Claude Code, add a rules file so the model stops reintroducing defaults: see [Cursor rules for UI design](/guides/cursor-rules-for-ui-design).

## FAQ

**Why do AI app builders all produce similar designs?**
They share the same building blocks (Tailwind, shadcn/ui, Lucide, Inter) and they were trained on a web full of SaaS templates built from those blocks. With a vague prompt, the model picks the most common answer, which is the same answer for everyone.

**Is looking AI-generated actually a problem?**
It depends on your audience. For an internal tool, not really. For anything where trust or taste matters (paid products, agencies, consumer apps), visitors increasingly read the default look as low effort.

**What's the single biggest tell?**
In our scans, Inter/system-font-only typography and the uniform icon-card grid show up most often. A purple or indigo gradient is the one people notice fastest.

---

# AI website design tells: a 13-point checklist (with how to check each one)

URL: https://unslop-me.vercel.app/guides/ai-website-design-tells-checklist

A printable checklist of the 13 visual tells that make a site look AI-generated, the point weight of each, and a 30-second way to check it yourself in DevTools.

The exact 13 checks behind the Slop Score, heaviest first. Each comes with what counts as a hit and a quick way to check it yourself, no tools needed beyond your browser.

"It looks AI-generated" is a feeling. This page turns it into a list. These are the 13 tells our [Slop Score scanner](/) looks for, in order of how many points each one costs. Score your own site by hand with it, or use it as a review checklist before you launch.

## How to score yourself

Start at **100**. For each tell you find, subtract up to its points. Our scanner scales some deductions by how strongly a tell shows up; for a hand check, subtract the full amount. If your site uses custom typography *and* no stock Tailwind palette, multiply your total deductions by 0.6. When the fundamentals are yours, the smaller tells matter less. Then read the result: **60+** already looks designed, **35–59** has a few giveaways, and **under 35** has lots of room to improve.

Open your site, then open DevTools (F12, or Cmd+Option+I on a Mac). Most checks take seconds.

## The checklist

### 1. Purple/indigo gradient: −20

**Hit if:** any background gradient uses purple, indigo or violet hues.  
**Check:** in the Console, run `[...document.querySelectorAll('*')].filter(e=>getComputedStyle(e).backgroundImage.includes('gradient')).length`. If it's above 0, inspect those elements for purple.  
**Fix:** a flat brand colour, with a gradient used for one moment at most.

### 2. Generic AI copy: −16

**Hit if:** the page uses words like unlock, supercharge, seamless, elevate, empower, effortless, revolutionize, all-in-one or "in seconds".  
**Check:** Ctrl+F each word.  
**Fix:** say what it does, for whom, in plain words.

### 3. Default Tailwind palette: −14

**Hit if:** three or more stock Tailwind colours (indigo-500, slate-900, gray-50…) or heavy purple accents.  
**Check:** inspect a few elements and look for class names like `bg-slate-900` or `text-indigo-600`, or computed colours like `rgb(99, 102, 241)` (indigo-500).  
**Fix:** five custom hex tokens. [Palettes here](/guides/color-palettes-that-dont-look-ai).

### 4. Inter / system-font only: −12

**Hit if:** over 90% of text is set in Inter, system-ui, Geist, Poppins, DM Sans, Manrope or similar defaults.  
**Check:** inspect the h1 and a paragraph and look at the computed `font-family`. If the heading and body use the same default face, it's a hit.  
**Fix:** pair a characterful display face with a readable text face. [12 pairings](/guides/best-fonts-for-vibe-coded-apps).

### 5. Emoji used as icons: −12

**Hit if:** two or more emoji stand in for icons in headings, cards or buttons.  
**Check:** just look, especially at feature cards and buttons.  
**Fix:** one consistent icon set, or none.

### 6. Uniform icon-card feature grid: −12

**Hit if:** there are rows of 3, 4 or 6 identical cards, each with an icon and a heading.  
**Check:** scroll to "Features".  
**Fix:** one lead feature with a real screenshot, varied sizes, and the rest as a list.

### 7. Glassmorphism: −10

**Hit if:** any surface uses `backdrop-filter: blur()`.  
**Check:** `[...document.querySelectorAll('*')].filter(e=>getComputedStyle(e).backdropFilter.includes('blur')).length`  
**Fix:** solid surfaces with a clear border or shadow.

### 8. Builder badge left on: −10

**Hit if:** an "Edit with Lovable", "Made with Bolt" or "Made with v0" badge is visible.  
**Check:** open the live URL in a private window and look at the corners.  
**Fix:** remove it before you share the link.

### 9. rounded-2xl everything: −8

**Hit if:** more than 45% of boxed elements (cards, buttons, inputs, images) have a radius of 12px or more.  
**Check:** inspect a card, a button and an input and read `border-radius`.  
**Fix:** a deliberate radius scale (2–4px works) used consistently.

### 10. Default Lucide icons: −8

**Hit if:** there are four or more stroke-2, 24px Lucide-style SVG icons.  
**Check:** `document.querySelectorAll('svg.lucide, svg[stroke-width="2"]').length`  
**Fix:** fewer icons. When you do use them, pick a distinctive set or custom glyphs.

### 11. Mobile horizontal overflow: −8

**Hit if:** the page is wider than a 390px phone viewport.  
**Check:** turn on device mode at 390px wide, then run `document.documentElement.scrollWidth > innerWidth`.  
**Fix:** find the element that overflows (usually a wide image, a table or a long unbroken string) and constrain it.

### 12. Centered-everything hero: −6

**Hit if:** the h1 is `text-align: center`.  
**Check:** `getComputedStyle(document.querySelector('h1')).textAlign`  
**Fix:** left-align the hero and give it an asymmetric layout.

### 13. Low type-scale contrast: −6

**Hit if:** the h1 is less than 2.6x the body font size.  
**Check:** `parseFloat(getComputedStyle(document.querySelector('h1')).fontSize)/parseFloat(getComputedStyle(document.body).fontSize)`  
**Fix:** a dramatic scale, with display text at least 3.5x the body size.

## Which tells are most common?

Across the 30 sites on our public [Slop Leaderboard](/leaderboard) (29 Lovable, Bolt and v0 showcase apps, plus linear.app as a reference), the most common tells as of 2026-10-17 are:

Default Lucide icons**77%**

Builder badge left on**73%**

Uniform icon-card grid**70%**

Inter / system-font only**63%**

Glassmorphism**60%**

Centered-everything hero**43%**

Generic AI copy**43%**

Default Tailwind palette**40%**

Share of the 30 scanned sites showing each tell. Average score: 46. Source: unslop-me.vercel.app/leaderboard.

Notice that the purple gradient doesn't make that top-eight list, even though it costs the most points. It's rarer than people think, but when it shows up it drags the score down hard. The tells that are almost everywhere are the quiet ones: icons, the badge, the card grid and the font.

## Turning the checklist into fixes

Fix in this order for the best score-per-minute: the badge (one setting), emoji, fonts, colours and gradient, glass and radius, then the hero, the card grid and the copy. If you're in Cursor or Claude Code, put the checklist in a rules file so the model stops reintroducing defaults (see [Cursor rules for UI design](/guides/cursor-rules-for-ui-design)). You can also connect our free MCP server, which exposes this exact list as `unslop_tells()`. Details are on the [agents page](/agents).

For a full launch QA beyond the visual tells (meta tags, favicon, trust details), use the [30-point pre-launch checklist](/guides/pre-launch-design-checklist).

## FAQ

**How can you tell if a website was made with AI?**
Look for stacked defaults: a purple or indigo gradient, Inter as the only font, three identical icon cards, frosted glass panels, everything heavily rounded, a centered hero, words like 'seamless' and 'supercharge', and a 'Made with' badge. One alone means little; five or six together is a strong signal.

**Is there a tool that checks for AI design tells automatically?**
Yes. Unslop Me's free scanner runs these 13 checks on any public URL and returns a 0–100 Slop Score, the evidence for each tell and fix prompts for Lovable, Bolt, v0 and Cursor.

**Which AI design tell costs the most?**
The purple/indigo gradient, at up to 20 points, followed by generic AI copy at 16 and the default Tailwind palette at 14.

**What score should I aim for?**
60 or above reads as designed. Under 35 means several defaults are stacking up.

---

# How to make a Lovable app not look AI-generated (a tell-by-tell audit)

URL: https://unslop-me.vercel.app/guides/how-to-make-a-lovable-app-not-look-ai-generated

Why Lovable apps get spotted as AI-built, the exact tells our scanner checks for, and the prompts to remove each one without breaking your app.

People don't spot a Lovable app because of one thing. They spot six or seven small defaults stacked together. Here's how to find them on your own site and remove them one prompt at a time.

Lovable is good at building working apps fast. What it hands you on the first pass is the *average* of every React + Tailwind + shadcn/ui site the model has seen. That average is easy to recognise: a gradient hero, Inter everywhere, a row of identical icon cards, frosted panels, and a small "Edit with Lovable" badge in the corner.

This guide is an audit, not a redesign tutorial. (For the full prompt-by-prompt redesign, see [how to make a Lovable app look professional](/guides/how-to-make-a-lovable-app-look-professional).) Work through the tells below in order. They're the same checks our [Slop Score scanner](/) runs, listed with the points each one costs.

## How the Slop Score works, briefly

Every site starts at **100**, which means it looks designed. Each tell we detect subtracts up to its weight, and the score can't go below 0. If you already use custom typography and no stock Tailwind palette, deductions are multiplied by 0.6, because the rest of the page reads as intentional. **60+** already looks designed, **35–59** has a few giveaways, and **under 35** has lots of room to improve.

## What we see on Lovable sites

The public [Slop Leaderboard](/leaderboard) includes 12 Lovable showcase apps (as of 2026-10-17). They average **50** (median 48). Five already score 60+ and four are under 35. So a Lovable app can look designed. The ones that do just overrode more defaults. In 6 of those 12, the builder badge is one of the two biggest tells listed. It's also the easiest tell to fix.

> Source: scores on unslop-me.vercel.app/leaderboard, 2026-10-17. A small sample of public showcase apps, so read it as a pattern rather than a statistic.

## The audit, cheapest fix first

### 1. The "Edit with Lovable" badge (up to −10)

It's free advertising for Lovable and a cue to the visitor to start looking for the other tells. Turn it off in your project settings if your plan allows it, or ask Lovable to remove it. Then check the published URL in a private window, because your logged-in view can differ.

### 2. Emoji standing in for icons (up to −12)

🚀 Fast. ⚡ Powerful. 🔒 Secure. We flag two or more emoji used as icons in headings, cards or buttons. Lovable often adds them to feature lists and empty states.

```
Remove every emoji used as an icon in headings, cards, buttons and lists.
Where an icon genuinely helps, use one consistent icon set at one size.
Otherwise use no icon. Do not change any text or functionality.
```

### 3. Inter or system fonts for everything (up to −12)

We flag pages where over 90% of the text is set in Inter, system-ui, Geist, Poppins, DM Sans, Manrope or similar defaults. Swapping fonts is the cheapest big change you can make, because it touches every line on the page.

```
Change typography only. Load "Fraunces" (headings) and "Inter Tight" (body)
from Google Fonts. Use Fraunces for h1–h3, Inter Tight for everything else.
Make the h1 at least 3.5x the body size on desktop. Do not change layout.
```

Want other pairings? See [12 free font pairings that aren't Inter](/guides/best-fonts-for-vibe-coded-apps).

### 4. Purple/indigo gradient (up to −20, the heaviest tell)

Any background gradient with purple, indigo or violet hues. This is the single biggest deduction we make, and it's the one people notice first. On the leaderboard, every app with a purple gradient among its top two tells scored 50 or below.

```
Replace all purple/indigo/violet gradients with flat surfaces.
Background: #F4F0E8. Text: #16130F. One accent: #FF4D1C, used only
for the primary button and links. No gradients anywhere.
```

Swap in your own five colours. [Here are eight palettes](/guides/color-palettes-that-dont-look-ai) that don't read as default.

### 5. The stock Tailwind palette (up to −14)

Three or more stock Tailwind colours (`indigo-500`, `slate-900`, `gray-50`…) or heavy purple accents. Removing the gradient doesn't remove this tell. You need named tokens.

```
Define CSS variables --bg, --surface, --ink, --muted, --accent with the
hex values above and replace every stock Tailwind colour class with them.
```

### 6. Glassmorphism (up to −10)

Any surface using `backdrop-filter: blur()`. Lovable likes frosted navbars and cards. Ask for "solid surfaces with a 1.5px border, no backdrop blur anywhere".

### 7. The uniform icon-card grid (up to −12)

Rows of 3, 4 or 6 identical cards, each with an icon and a heading. This is the hardest tell to prompt away, because it's a content decision. Pick your one most important feature, give it a screenshot and half the width, and turn the rest into a plain list.

### 8. rounded-2xl on everything (up to −8)

We flag pages where more than 45% of boxed elements have a radius of 12px or more. Pick one radius (2–4px works well) and ask Lovable to apply it to buttons, cards, inputs and images.

### 9. Default Lucide icons (up to −8)

Four or more stroke-2, 24px Lucide-style SVGs. It's the most common tell on the whole leaderboard, showing up on 77% of the sites. Use far fewer icons, or a set with a different weight.

### 10. Centered hero and a flat type scale (up to −6 each)

If the h1 is `text-align:center`, that's a tell. So is an h1 less than 2.6x the body size. Left-align the hero, put the product screenshot beside it, and make the headline big.

### 11. Generic AI copy (up to −16)

Unlock, supercharge, seamless, elevate, empower, effortless, revolutionize, all-in-one, "in seconds". Rewrite the headline, subhead and buttons yourself: say what it does and who it's for. More in [landing page copy that doesn't sound AI-written](/guides/landing-page-copy-that-doesnt-sound-ai).

### 12. Mobile horizontal overflow (up to −8)

If the page is wider than a 390px phone, the whole thing wiggles sideways. Open your published URL on a phone, or in DevTools at 390px, and ask Lovable to fix whichever element overflows.

## Order matters: one prompt per tell

Don't paste all of this at once. Lovable handles one focused, styling-only change better than a giant redesign prompt, and a narrow prompt is easier to roll back. A good order is: badge, emoji, fonts, colours, glass, radius, hero, grid, copy, mobile. Re-scan after the fonts and colours. Those two usually move the score the most, because they touch every element.

## Check your work

Run your published URL through the [free scanner](/) before and after. Each tell comes with the evidence we found (the class name, the font stack, the word), so you can confirm a fix actually landed rather than guessing.

## FAQ

**Can you tell if a site was built with Lovable?**
Often, yes. The badge is the obvious giveaway, but even without it the combination of Inter, a purple gradient hero, frosted surfaces and a three-card icon grid is a recognisable fingerprint. Each one is fixable on its own.

**Will these prompts break my Lovable app?**
They shouldn't. Each one is scoped to styling and explicitly says not to change functionality. Make one change at a time so it's easy to revert if something shifts.

**What's the fastest single fix?**
Removing the badge, then changing the fonts. The badge is one setting, and a new font pairing changes every line of text on the page.

**Do I need to leave Lovable to fix this?**
No. Every tell here can be fixed with prompts inside Lovable.

---

# Why does my v0 or Bolt site look generic? (and how to fix it)

URL: https://unslop-me.vercel.app/guides/why-does-my-v0-bolt-site-look-generic

v0 and Bolt sites look alike because they share defaults: shadcn/ui, Tailwind colours, Inter and Lucide. Which ones give you away, and what to change.

You didn't do anything wrong. Your site looks like everyone else's because it was built from the same parts, with the same defaults, by a model that picks the most likely answer. Here's how to stop it.

You type "a modern landing page for my app" into v0 or bolt.new, and you get something clean, responsive and… familiar. A dark or soft-gradient hero. A centered headline. Three cards with Lucide icons in tinted circles. A pill-shaped button. It looks fine. It also looks like the last twenty sites you scrolled past on a launch directory.

## The short answer: shared defaults plus a vague prompt

v0 generates React with Tailwind CSS and shadcn/ui. Bolt generates a wider range of stacks but usually lands on Tailwind and Lucide too. Those are good tools, and they ship with defaults: Tailwind's `indigo-500` and `slate-900`, shadcn's radius and card component, Lucide's 24px stroke-2 icons, and Inter as the font everything gets paired with.

A language model fills every gap you leave with the most common choice. If your prompt doesn't name a font, a palette, a radius and a layout, you get the defaults for all four. So does everyone else, and that's where the sameness comes from.

## What our scans show

The public [Slop Leaderboard](/leaderboard) (as of 2026-10-17) includes 11 Bolt showcase apps and 6 v0 apps. Scores run from 0 to 100, where 100 means it looks designed:

- **Bolt:** average 35, median 43. Two score 60+ and five are under 35.
- **v0:** average 52, median 56. Three score 60+ and two are under 35.
- "Inter / system-font only" is one of the top two tells for 7 of the 11 Bolt apps and 4 of the 6 v0 apps.
- Seven of these 17 apps have a purple/indigo gradient among their top two tells. All seven scored 50 or below, and six of them scored 23 or below.

> Source: unslop-me.vercel.app/leaderboard, 2026-10-17. Each app shows its top two tells, and the samples are small, so treat these as patterns, not benchmarks.

The good news is in the same data. The best v0 site on the board scores 94, and the best Bolt site scores 66. Same tools, different decisions.

## The tells that make v0 and Bolt sites look generic

These are the checks our [scanner](/) runs, with the maximum points each one costs:

1. **Purple/indigo gradient, −20.** The `from-indigo-500 to-purple-600` hero. It's the heaviest deduction we make.
2. **Generic AI copy, −16.** Unlock, supercharge, seamless, elevate, empower, effortless, revolutionize, all-in-one, "in seconds".
3. **Default Tailwind palette, −14.** Three or more stock colours like `slate-900`, `gray-50`, `indigo-600`.
4. **Inter / system-font only, −12.** Over 90% of text in Inter, system-ui, Geist, Poppins, DM Sans, Manrope and friends.
5. **Uniform icon-card grid, −12.** Rows of 3, 4 or 6 identical icon + heading cards.
6. **Emoji as icons, −12.** Two or more emoji doing an icon's job.
7. **Glassmorphism, −10.** `backdrop-blur` on navbars and cards.
8. **Builder badge, −10.** "Made with Bolt" or "Built with v0" left on.
9. **rounded-2xl everything, −8.** Most boxes with a 12px+ radius.
10. **Default Lucide icons, −8.** Four or more stroke-2, 24px icons.
11. **Mobile overflow, −8.** Wider than a 390px phone.
12. **Centered hero, −6.** The h1 is centered.
13. **Flat type scale, −6.** The h1 is less than 2.6x the body size.

The full reasoning behind each one is in [why AI-built apps all look the same](/guides/why-ai-built-apps-look-the-same).

## The fix: make the decisions before the model does

You don't need a different builder. You need a prompt that leaves no gaps. Put this at the top of your next v0 or Bolt prompt, with your own values:

```
Design constraints (apply to every component):
- Fonts: "Fraunces" for headings, "Inter Tight" for body. No other fonts.
- Colours (CSS variables only, no stock Tailwind colour classes):
  --bg #F4F0E8, --surface #FFFFFF, --ink #16130F, --muted #6B6459, --accent #FF4D1C
- No gradients. No backdrop-blur. No emoji. Max 4 icons on the page.
- Border radius: 2px everywhere. 1.5px solid borders instead of shadows.
- Hero: left-aligned, two columns, product screenshot on the right.
  h1 at least 3.5x body size.
- Features: one lead feature with a screenshot, then a plain list. No card grid.
- Copy: no "unlock / seamless / supercharge / elevate / effortless".
  Say what it does and for whom.
- Remove any "Made with" / "Built with" badge.
```

### v0-specific

Most of the default look comes from shadcn's theme variables. Change `--radius`, `--primary` and the font in one go, and every component follows. [Our v0 design system prompts](/guides/v0-design-system-prompts) and [shadcn restyle guide](/guides/replace-shadcn-defaults) have the exact variables.

### Bolt-specific

Bolt is more willing to regenerate whole files, so keep styling prompts narrow ("change only colours, do not touch layout or logic"), and check the published bolt.host URL on a phone afterwards. More in [Bolt app design tips](/guides/bolt-app-design-tips).

## Measure it

Scan your site before you change anything, then again after the fonts and colours. Those two usually move the score most. The scanner shows the evidence for each tell, so you'll know exactly which ones are left.

## FAQ

**Why do all v0 sites look the same?**
v0 builds on shadcn/ui and Tailwind, and most prompts don't override their default theme, fonts or layout. The model fills the gaps with the most common choices, which are the same for everyone.

**Is Bolt or v0 better for design?**
On our small public leaderboard, the v0 apps averaged higher (52 vs 35), but both produced sites scoring 60+. The prompt and the decisions you make matter more than the builder.

**Should I stop using shadcn/ui?**
No. Keep the components and change the theme: radius, colours, fonts and shadows. That's most of what makes it recognisable.

**What's the quickest way to look less generic?**
Change the font pairing and replace the stock palette with five custom colours. Those two touch every element on the page.

---

# Bolt app design tips: 9 changes that make a bolt.new site look designed

URL: https://unslop-me.vercel.app/guides/bolt-app-design-tips

Specific prompts and settings to take a Bolt app past the template look, from tokens and fonts to layout, icons, copy and publishing.

Bolt gets you from idea to deployed app faster than almost anything. Its default output also has a recognisable look: a dark or white page with a blue-to-purple gradient headline, Inter, Lucide icons in tinted squares, and a hero with two rounded buttons. Here are nine changes, in order of impact, with prompts that work in Bolt's chat.

## 1. Edit the Tailwind theme, not individual classes

Bolt projects nearly always have a `tailwind.config.js` (or `.ts`) and an `index.css`. If you change colours component by component, Bolt will reintroduce `indigo-600` the next time it generates something. Change the theme once:

```
Edit tailwind.config so the theme has these custom colors and remove reliance on default palette colors:
colors: { paper: '#f3f1ea', ink: '#14211b', muted: '#5d675f', accent: '#1f6f4a', soft: '#d9e6d3', line: '#cfd3c6' }
Then replace every bg-indigo-*, bg-purple-*, bg-blue-*, text-slate-*, text-gray-*, from-*/to-* gradient class in the project with the new tokens. Do not change any logic.
```

That palette is the "ledger" green we use for finance tools. Swap in your own.

## 2. Change the font in two places

Fonts live in `index.html` (the Google Fonts link) and in `tailwind.config` (`fontFamily`). Ask for both explicitly:

```
Add Google Fonts "Instrument Serif" (400, italic) and "IBM Plex Sans" (400, 500, 600) to index.html. In tailwind.config set fontFamily.display = ['Instrument Serif', 'serif'] and fontFamily.sans = ['IBM Plex Sans', 'sans-serif']. Use font-display on h1, h2 and h3. Remove Inter.
```

More pairings: [best fonts for vibe-coded apps](/guides/best-fonts-for-vibe-coded-apps).

## 3. Kill the gradient headline

`bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600` is a Bolt signature. Replace it with solid ink and, if you want emphasis, one italic word in the accent colour:

```
In the hero, remove the gradient text effect. The headline is solid text-ink. Wrap the single most important word in <em> styled italic, font-weight 400, text-accent.
```

## 4. Give the hero a real layout

```
Rebuild the hero as a left-aligned two-column layout on desktop (text left, product screenshot right, screenshot has a 1px ink border and no rounded corners). Headline 64px desktop / 40px mobile, tight leading. One primary button; the secondary action becomes a text link with an underline. Remove the badge pill above the headline.
```

If you don't have a screenshot yet, take one of your own app's main screen. A real UI beats any illustration.

## 5. Swap icon squares for something quieter

Bolt loves `<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"><Zap/></div>`. Ask it to remove the containers and most of the icons:

```
In the features section, remove the colored icon containers. Keep at most one small icon per feature, inline before the title, 18px, stroke-width 1.5, color text-muted. Remove icons entirely where the title already says it.
```

## 6. Vary the section rhythm

Generated pages are often a stack of identically padded sections, each a centered heading plus a grid. Mix it up: a full-bleed band in the accent colour for the call to action, a two-column section with the heading on the left, a single wide screenshot. Ask for one change at a time and look at the preview between prompts.

## 7. Write the words yourself

Bolt's placeholder copy ("Transform your workflow with AI-powered insights") gets shipped surprisingly often. Write your headline, subhead and button labels, then paste them in:

```
Replace the hero copy with exactly this text, no other changes:
Headline: Bookkeeping for people who hate bookkeeping
Subhead: Connect your bank, snap receipts, and get a clean monthly report your accountant will actually thank you for.
Button: Connect your bank
```

## 8. Check the published site, not just the preview

Publish to `*.bolt.host` and test on a phone. Things that look fine in the preview pane often overflow at 390px. Also remove the "Made with Bolt" badge if your plan allows it, set a favicon and `<title>`, and add an Open Graph image.

## 9. Save your rules so Bolt keeps them

Create a `DESIGN.md` at the project root with your tokens, fonts, radius and the banned list (no gradients, no glass, no emoji icons, no pill buttons). Then start UI prompts with "Follow DESIGN.md." The [Cursor rules guide](/guides/cursor-rules-for-ui-design) has a full template you can reuse for Bolt.

## A quick before/after

Here's a typical Bolt hero for a meal-planning app, and what the prompts above turn it into.

**Before:** dark slate background, "Revolutionize Your Meal Planning" in a blue-to-purple gradient, centered, two rounded buttons ("Get Started" and "Learn More"), and below it three cards with a Utensils, Clock and Heart icon in light-blue squares.

**After:** cream background (`#eef0e8`), headline "Dinner, planned by Sunday night." in Fraunces, left-aligned, with "Sunday" in terracotta italic. Subhead: "Pick five recipes, get one shopping list sorted by aisle, and cook without checking your phone." One ink button, "Plan this week", and a text link "See a sample week". On the right, a screenshot of the actual weekly plan with a 1.5px border. Features become a numbered list with no icons.

Same app, same code, about six prompts. Nothing about the product changed except how much it looks like someone cared.

## Check your score

[Scan your bolt.host URL](/) to see which tells remain, with fix prompts for each. You can also see how other Bolt apps score on the [Slop Leaderboard](/leaderboard), and run through the [pre-launch design checklist](/guides/pre-launch-design-checklist) before you share the link anywhere.

## FAQ

**Does Bolt use Tailwind?**
Usually, yes. Most Bolt projects are Vite + React + Tailwind, often with Lucide icons. That's why changing the Tailwind theme config is the highest-leverage edit.

**How do I stop Bolt from undoing my design changes?**
Put your design rules in the project's prompt/knowledge settings or a DESIGN.md file at the repo root and tell Bolt to read it before every UI change.

**Can I edit the code directly instead of prompting?**
Yes, and for tokens it's often faster. Open tailwind.config and index.css in the code view and edit the values yourself.

---

# v0 design system prompts that stop the shadcn default look

URL: https://unslop-me.vercel.app/guides/v0-design-system-prompts

Copy-paste v0 prompts to set up a real design system (tokens, type, radius, components) so your v0 projects stop looking like every other shadcn/ui site.

v0 is built on Next.js, Tailwind and shadcn/ui. That's a strong foundation, and it's also why so many v0 sites look identical: shadcn's default theme (neutral greys, 0.5rem radius, Inter or Geist, a primary that's near-black or indigo) ships unchanged. The fix is to treat the theme as the first thing you build. Here are the prompts we use, in order.

## Prompt 1: the token sheet

shadcn/ui reads colours from CSS variables in `globals.css`. Replace them all in one go:

```
Update app/globals.css. Replace the shadcn theme variables in :root with this palette (convert to the same format the file already uses, hsl or oklch):
background #f6efe4, foreground #221a14, card #fffaf3, card-foreground #221a14,
primary #d2421f, primary-foreground #fffaf3, secondary #efd9c4, secondary-foreground #221a14,
muted #efe6d8, muted-foreground #76685b, accent #efd9c4, accent-foreground #221a14,
border #dccab6, input #dccab6, ring #d2421f.
Set --radius to 0.25rem. Remove the .dark block for now; this site is light only.
Do not change any components.
```

That's our "atelier" palette, warm paper and a brick-red accent, which suits creative tools. The point is that every value is chosen, not inherited.

## Prompt 2: fonts with next/font

```
In app/layout.tsx load two fonts with next/font/google:
- DM Serif Display (weight 400) as --font-display
- Work Sans (weights 400, 500, 600) as --font-sans
Apply both variables on <html>. In globals.css set body to var(--font-sans) and h1, h2, h3 to var(--font-display) with letter-spacing -0.02em. Remove Geist/Inter imports.
```

See [best fonts for vibe-coded apps](/guides/best-fonts-for-vibe-coded-apps) for other pairings that hold up in product UI.

## Prompt 3: a type scale with contrast

Default v0 heroes are often `text-4xl md:text-5xl` over `text-lg`, a ratio of about 2.5. That's what makes them feel polite and forgettable.

```
Define a type scale in globals.css and use it everywhere:
display: clamp(48px, 7vw, 96px), line-height 0.95
h2: clamp(32px, 4vw, 52px), line-height 1.05
h3: 22px, body: 17px / 1.55, small: 13px
Apply display to the hero h1 only.
```

## Prompt 4: component overrides

shadcn components inherit tokens, but a few defaults are worth changing directly:

```
Adjust shadcn components (edit the files in components/ui):
- Button: remove rounded-md, use the --radius variable; default variant has no shadow; add a 'link' style that is underlined with 2px offset.
- Card: border 1.5px solid var(--border), no shadow, padding 28px.
- Badge: uppercase, 11px, letter-spacing 0.1em, monospace font, square corners.
Don't change props or exports.
```

## Prompt 5: layout rules

```
Layout rules for every page:
- Max content width 1200px, 32px side padding (20px under 640px).
- Hero is left-aligned in a 7/5 two-column grid with a real product screenshot on the right.
- No section may be a grid of three identical cards with icons. Use numbered lists, a lead feature with a screenshot, or a two-column text layout instead.
- Section dividers are 1.5px foreground borders, not background color changes.
```

## Prompt 6: the banned list

v0 sometimes drifts back to defaults as you iterate. A short "never" list keeps it honest:

```
From now on in this project, never use: gradient backgrounds or gradient text, backdrop-blur, emoji as icons, rounded-full buttons, indigo/violet/purple Tailwind classes, Lucide icons inside colored circles, the words "seamless", "unlock", "supercharge", "elevate" or "effortless".
```

Re-paste it whenever you start a new chat on the project.

## Order matters

Run the prompts in this order and check the preview after each one. Tokens first, because every later change depends on them. Fonts second. Then the type scale, then component overrides, then layout. If you start with layout, v0 will build the new layout with default tokens and you'll be fighting the same defaults twice.

If a prompt changes more than you asked, say so in the next message: "You changed the navbar structure, revert that and only apply the colour changes." v0 handles corrections well when they're specific.

## A quick example

For a project-management tool called Tally, the full set of choices might be: Space Grotesk + IBM Plex Sans, paper `#f5f2ec`, ink `#1a1714`, accent ultramarine `#2f4bd8`, radius 2px, a hero that shows the actual board view, and a features section that's a single wide screenshot with three annotated callouts. That's an afternoon in v0, and nobody will mistake it for the default template.

## Keep it as a v0 project instruction

v0 supports project-level instructions. Paste the token values, fonts, scale and banned list there so every generation starts from your system instead of shadcn's. If you also work locally in Cursor, the same content becomes a rules file: see [Cursor rules for UI design](/guides/cursor-rules-for-ui-design).

## Before you ship

Deploy to Vercel, then [run the free scan](/) on the `*.vercel.app` URL. It flags anything still on defaults (palette, fonts, card grids, glass, badges) and gives you a v0-ready prompt for each. Compare with other v0 projects on the [Slop Leaderboard](/leaderboard), and go through the [pre-launch design checklist](/guides/pre-launch-design-checklist).

## FAQ

**Can v0 use custom fonts?**
Yes. Ask it to load fonts with next/font/google in app/layout.tsx and expose them as CSS variables, then reference those variables in your Tailwind config or globals.css.

**Where does v0 put theme colors?**
Typically in app/globals.css as CSS variables (--background, --foreground, --primary, etc.) consumed by shadcn/ui. Changing those variables restyles every component at once.

**Should I stop using shadcn/ui?**
No. shadcn/ui is a good component base. The tell is shipping its default tokens unchanged, not using it.

---

# Best fonts for vibe-coded apps (12 free pairings that aren't Inter)

URL: https://unslop-me.vercel.app/guides/best-fonts-for-vibe-coded-apps

Free Google Fonts pairings that make Lovable, Bolt, v0 and Cursor apps look designed, with what each suits and the exact prompt to install them.

Typography is the cheapest way to make an AI-built app look designed, and the most overlooked. In our scans, "Inter / system font only" is one of the most common tells on the [Slop Leaderboard](/leaderboard). The fix is a single prompt.

The rule of thumb: **one face with character for headings, one quiet face for text.** Here are twelve free pairings we'd actually ship, grouped by the kind of product they suit.

## Editorial and warm

These suit consumer apps, content tools, anything where you want to feel human.

1. **Fraunces + Inter Tight.** Fraunces is a soft, slightly wonky serif with an optical size axis, so it looks right at 96px and at 24px. Inter Tight keeps the familiarity of Inter with tighter spacing. (This site uses it.)
2. **Instrument Serif + Inter.** Instrument Serif is elegant and condensed, and only comes in one weight, so use it big. It's perfect for a single dramatic headline.
3. **Newsreader + Manrope.** A text-optimised serif with real italics, over a friendly geometric sans. Good for long reading.
4. **DM Serif Display + Work Sans.** High contrast and confident. Works for studios, portfolios and creative tools.

## Technical and precise

For dev tools, data products, APIs and anything with "agent" in the name.

5. **Space Grotesk + IBM Plex Mono.** Grotesk headings with quirky details, mono body text for a terminal feel. Use the mono for UI labels too.
6. **JetBrains Mono + Inter.** Mono headings at large sizes look deliberate. Keep body in Inter for readability.
7. **Bricolage Grotesque + IBM Plex Sans.** Bricolage has a variable width axis and lots of personality at display sizes; Plex is calm underneath.
8. **Archivo + Archivo Narrow.** One family, two widths. Compact and industrial, good for dashboards.

## Calm and trustworthy

For finance, health, legal, B2B.

9. **Instrument Serif + IBM Plex Sans.** Serif authority with an engineered, slightly corporate text face. Our default for finance tools.
10. **Source Serif 4 + Source Sans 3.** A matched pair designed together. Very hard to get wrong.
11. **Literata + Figtree.** A warm book serif with a friendly sans. Good for health and wellbeing.
12. **Libre Caslon Text + Karla.** Classic and slightly old-fashioned, in a good way. Suits legal, editorial and premium products.

## How to install a pairing (any builder)

Lovable, Bolt and most Vite projects:

```
Add Google Fonts: "Fraunces" (opsz 9..144, weights 400, 700, 800, plus italic 400) and "Inter Tight" (400, 500, 600) via a <link> in index.html.
Set the Tailwind theme fontFamily: display = ['Fraunces', 'Georgia', 'serif'], sans = ['Inter Tight', 'system-ui', 'sans-serif'].
Use font-display for h1, h2, h3 and the logo. Everything else uses font-sans. Remove Inter.
```

v0 / Next.js:

```
In app/layout.tsx load Fraunces and Inter Tight with next/font/google as CSS variables --font-display and --font-sans, apply both on <html>, and use them in globals.css (headings: display, body: sans). Remove Geist.
```

## Make the fonts do work

Installing a font isn't enough. These settings are what make it look intentional:

- **Big contrast.** Hero headline at 3.5 to 5 times your body size. A 17px body suggests a 64-88px headline on desktop.
- **Tight display leading.** `line-height: 0.95` to `1.05` for big headings. Default 1.5 leading on a 72px headline looks broken.
- **Negative tracking on display sizes.** `letter-spacing: -0.02em` to `-0.035em`.
- **Use italics.** One italic word in the accent colour gives a headline a voice. Serif italics are much more distinctive than sans italics.
- **Monospace for small labels.** Uppercase 11-12px mono with wide tracking makes kicker labels and metadata feel designed.

## Fonts to think twice about

These aren't bad, but they're so common in generated apps that they no longer read as a choice: Inter alone, Geist, Poppins, Plus Jakarta Sans, DM Sans, Manrope alone, Outfit, Sora. If you love one of them, keep it for body text and add a display face.

## A worked example

Say you've built a booking tool for yoga studios in Lovable and it's Inter everywhere. Here's how we'd choose:

1. **Name the feeling in two words.** "Calm, warm." Not "modern", because everything is modern.
2. **Pick the group.** Calm and warm sits between the editorial and trustworthy groups above, so Literata + Figtree or Fraunces + Inter Tight are good candidates.
3. **Test with your real headline.** Type "Class booking for small yoga studios" in both pairings at 72px. Fraunces feels friendlier; Literata feels more bookish. Go with Fraunces.
4. **Set the weights.** Headline in Fraunces 600 rather than 800, because calm doesn't shout. One italic word, "small", in the accent colour.
5. **Keep the UI in the text face.** Buttons, form labels, nav and tables all use Inter Tight. Display faces in small UI text are the most common way a good pairing goes wrong.

Total time: about fifteen minutes, one prompt, and the site no longer looks like the other 400 booking tools built that week.

## Common mistakes

- **Loading too many weights.** Each weight is a download. Two or three per family is plenty.
- **Display face in body text.** Serifs with personality get tiring in paragraphs. Keep them for headings.
- **Forgetting the fallback.** Always end the stack with a generic family (`serif`, `sans-serif`) so the page doesn't flash Times New Roman.
- **Mixing two characterful faces.** Two personalities fight. One loud, one quiet.

## Check it

After you switch fonts, [scan your site](/). If more than about 90% of your text is still in a default sans, the scanner will flag it, which usually means a component library is overriding your heading font. The [v0 design system prompts](/guides/v0-design-system-prompts) and [Cursor rules](/guides/cursor-rules-for-ui-design) guides show how to make the change stick, and [colour palettes that don't look AI](/guides/color-palettes-that-dont-look-ai) is the natural next step.

## FAQ

**Is Inter bad?**
No, Inter is an excellent text face. The problem is Inter as the only face, with headings that are just bold Inter. Pair it with a display face and it stops reading as default.

**How many fonts should a site use?**
Two is the sweet spot: one display face for headings and one text face for everything else. A third, monospace, is fine for code, numbers or labels.

**Are these fonts free for commercial use?**
Every font on this list is on Google Fonts under the SIL Open Font License, which allows commercial use.

---

# Color palettes that don't look AI-generated (with hex codes)

URL: https://unslop-me.vercel.app/guides/color-palettes-that-dont-look-ai

Eight ready-to-use five-color palettes for SaaS and indie apps, why indigo and slate read as default, and how to apply custom tokens in Tailwind.

There's a palette that's become the house style of AI-generated sites: white or near-black backgrounds, `slate-900` text, `indigo-500` buttons, and a purple-to-pink gradient somewhere in the hero. It's not ugly. It's just everyone's.

Choosing your own colours is a ten-minute job, and it changes how a site feels more than almost anything else. Here are eight palettes to start from, each with five tokens.

## The five tokens

Every palette below uses the same roles:

- **paper**: page background
- **ink**: text and primary buttons
- **muted**: secondary text
- **accent**: one highlight colour (links on hover, one key button, a single word)
- **line**: borders and dividers

The accent should be rare. If it's on every button and every icon, it stops being an accent.

## Eight palettes

**1. Off-white and ink, orange-red accent.** paper `#f4f0e8`, ink `#16130f`, muted `#6b6459`, accent `#ff4d1c`, line `#d9d2c4`. Warm, confident, editorial. (Ours.)

**2. Ledger.** paper `#f3f1ea`, ink `#14211b`, muted `#5d675f`, accent `#1f6f4a`, line `#cfd3c6`. A bottle green on cream. Built for finance and money tools.

**3. Terminal.** paper `#101210`, ink `#eceee6`, muted `#9aa196`, accent `#c6f432`, line `#2c312b`. Dark without being slate, with an acid-lime accent. For dev tools.

**4. Clinic.** paper `#eef0e8`, ink `#1d2a24`, muted `#5e6b63`, accent `#c4532d`, line `#c9d0c1`. Sage and terracotta, calm but not sterile. Health, food, wellbeing.

**5. Atelier.** paper `#f6efe4`, ink `#221a14`, muted `#76685b`, accent `#d2421f`, line `#dccab6`. Warm paper with brick red. Creative tools and studios.

**6. Editorial blue.** paper `#f5f2ec`, ink `#1a1714`, muted `#6b645a`, accent `#2f4bd8`, line `#d6cfc2`. A true ultramarine instead of indigo, on warm paper. Very different from `blue-600` on white.

**7. Night garden.** paper `#14110f`, ink `#f1e9dc`, muted `#a39887`, accent `#e8a33d`, line `#2e2822`. Warm dark mode with an amber accent. Good for media and entertainment.

**8. Aubergine.** paper `#f7f3ef`, ink `#2a1626`, muted `#7a6874`, accent `#7b2d6b`, line `#e0d5d8`. Proof that purple can be fine. It just has to be a specific purple.

## Why these work

A few patterns separate chosen palettes from default ones:

- **Warm or tinted neutrals.** Pure white (`#ffffff`) and Tailwind greys are cool and clinical. A background with a little warmth (`#f4f0e8`) or a tint towards your accent instantly reads as chosen.
- **Ink, not black.** `#16130f` is softer than `#000` and pairs with the paper.
- **One accent, used sparingly.** Generated sites often use three or four bright colours for icon backgrounds. Pick one.
- **Flat, not gradient.** A flat accent looks committed. If you want a gradient, use it once, on one thing.

## Apply it in Tailwind

```
Add these as CSS variables in index.css (:root) and map them in tailwind.config theme.extend.colors:
paper #f4f0e8, ink #16130f, muted #6b6459, accent #ff4d1c, line #d9d2c4.
Then replace every default palette class in the project (indigo, violet, purple, blue, slate, gray, zinc, emerald) with these tokens: backgrounds -> paper or ink, text -> ink or muted, borders -> line, primary buttons -> bg-ink text-paper with hover:bg-accent.
Remove all gradient classes. Do not change logic.
```

For shadcn/ui projects (v0), set the same values on the `--background`, `--foreground`, `--primary` variables instead. The [v0 prompts guide](/guides/v0-design-system-prompts) has the full mapping.

## Check contrast

Before you ship, check text contrast. Muted text on paper should be at least 4.5:1 for body copy. Every palette above passes for ink on paper; check your muted colour at small sizes, and never put muted text on the accent.

## How to pick from scratch

If none of the eight fits, build your own in four steps:

1. **Start with the accent.** Pick one colour that means something for your product or audience: green for money, terracotta for food, ultramarine for print and editorial. Avoid the exact Tailwind 500 shades; nudge the hue or saturation so it's yours.
2. **Derive the paper from the accent.** Take the accent's hue and drop saturation to 10-25% with lightness around 93-96%. That's why the Ledger cream feels slightly green and the Atelier paper feels slightly red.
3. **Make the ink a very dark version of the same hue.** Lightness 7-12%. Pure black looks harsh next to tinted paper.
4. **Muted and line sit between them.** Muted around 40% lightness for readable secondary text, line around 80-85% for borders.

Then test it on your real screens, not a palette preview. Tables, forms and empty states are where palettes fall apart.

## Dark mode without the slate

Dark versions of generated sites usually land on `slate-900` or `zinc-950` with indigo. For a dark theme that feels chosen, use a warm or tinted near-black (`#14110f`, `#101210`), slightly off-white ink (`#f1e9dc`), and an accent with enough lightness to pass contrast (amber, lime, coral). Keep borders visible: dark UIs without lines turn into soup.

## Next steps

Pair your palette with a font that has character ([12 pairings](/guides/best-fonts-for-vibe-coded-apps)), then [scan your site](/) to confirm the stock palette tell is gone. See which palettes other builders used on the [Slop Leaderboard](/leaderboard).

## FAQ

**Why does indigo look AI-generated?**
Tailwind's indigo-500 (#6366f1) and its violet neighbours were the default accent in countless templates and component libraries. Models learned that "button colour" means indigo.

**How many colors does a palette need?**
Five covers most sites: background, ink (text), muted text, one accent, and a line/border colour. Add a soft tint of the accent if you need a highlight background.

**Can I still use purple?**
Yes, if it's a specific purple you chose and it isn't paired with a gradient and glass. A deep aubergine on warm paper reads very differently from indigo-to-fuchsia on white.

---

# Cursor rules for UI design: a .cursor/rules file that stops generic UI

URL: https://unslop-me.vercel.app/guides/cursor-rules-for-ui-design

A complete, copy-paste Cursor project rule (and CLAUDE.md equivalent) that keeps AI-written UI on your design system instead of drifting back to Tailwind defaults.

Cursor and Claude Code write excellent UI code, and then quietly reintroduce `rounded-2xl`, `bg-gradient-to-r from-indigo-500` and a grid of Lucide icons the moment you ask for a new page. They aren't ignoring you; they just don't know your design system unless it's in the context every time. A rules file fixes that.

Here's the one we use, then how to adapt it.

## The rule file

Save as `.cursor/rules/ui-design.mdc`:

```
---
description: Visual design system. Apply to any UI, styling, component or page change.
globs: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.html", "tailwind.config.*"]
alwaysApply: false
---
# Design system (follow exactly)

## Tokens (use these, never Tailwind default palette colors)
- paper #f4f0e8 (background), ink #16130f (text, primary buttons), muted #6b6459,
  accent #ff4d1c (one highlight per screen), line #d9d2c4 (borders)
- Defined in src/index.css as CSS variables and in tailwind.config as colors.paper/ink/muted/accent/line.

## Type
- Display: Fraunces (headings, logo). Text: Inter Tight. Labels/meta: JetBrains Mono, 12px, uppercase, tracking 0.12em.
- Hero h1: clamp(46px, 6.6vw, 92px), line-height 0.95, tracking -0.035em, weight 800.
- h2: clamp(36px, 4.4vw, 60px), line-height 1. Body 17px / 1.55.

## Shape
- Radius: 0 on cards and sections, 2px max on inputs. No rounded-full buttons.
- Borders: 1.5px solid ink for structure, 1px line for dividers.
- Shadows: none, except a hard offset (10px 10px 0 ink) on at most one featured element per page.

## Layout
- Left-aligned heroes, asymmetric grids (7/5, 5/7). Show real product UI, not illustrations.
- Never a row of 3/4/6 identical icon cards. Use numbered rows, a lead feature + list, or two-column text.
- Section separators are 1.5px ink top borders. Generous vertical padding (96px desktop, 64px mobile).
- Must not overflow horizontally at 390px.

## Never
- Gradients (backgrounds or text), backdrop-blur/glass, emoji as icons, icons inside colored circles/squares,
  indigo/violet/purple/slate/gray classes, the builder badge.
- Copy words: unlock, supercharge, seamless(ly), elevate, empower, effortless, revolutionize, game-changer,
  cutting-edge, all-in-one, "in seconds", "take your X to the next level".

## Copy
- Headlines say what it is and for whom, max ~8 words. Buttons are verbs ("Create an invoice").

## Before finishing a UI change
- Re-read this file and check the diff against "Never".
```

## Why it's written this way

- **Values, not adjectives.** "Make it elegant" means nothing to a model. `#16130f` and `line-height 0.95` do.
- **A "Never" list.** Models are better at avoiding a named pattern than at inventing an alternative. Naming the defaults (indigo, glass, emoji, pill buttons) is what stops them.
- **Globs, not alwaysApply.** Scoping to UI files keeps the rule out of backend work and saves context. If you find Cursor ignoring it, switch `alwaysApply` to true.
- **A final self-check.** The last line nudges the agent to review its own diff before it says it's done.

## Claude Code version

Claude Code reads `CLAUDE.md` from the repo root. Either paste the same content (without the frontmatter) or keep it in `DESIGN.md` and add one line to `CLAUDE.md`:

```
For any UI or styling work, read and follow DESIGN.md exactly. Check your diff against its "Never" list before finishing.
```

## Pair it with a scanner your agent can call

Rules prevent drift; a check catches what slips through. Unslop Me runs as an MCP server, so Cursor or Claude Code can scan the deployed site and read back the tells and fix prompts directly. Add it to `.cursor/mcp.json`:

```
{
  "mcpServers": {
    "unslop": { "url": "https://unslop-me-production.up.railway.app/mcp" }
  }
}
```

Then ask: "Run unslop_tells and check our landing page against it" while building, or "Run unslop_scan on https://myapp.vercel.app and fix the top three tells" after deploying. Full setup, including Claude Code, is on the [agents page](/agents).

## Testing that the rule works

Rules files fail silently, so test yours:

1. Open a fresh chat and ask for something that would normally produce defaults: "Add a pricing section with three tiers."
2. Check the diff. You should see your tokens (`bg-paper`, `text-ink`), no gradients, no `rounded-2xl`, no icon circles.
3. If defaults appear, check that the file's globs match the file being edited, then try `alwaysApply: true`.
4. If one rule keeps getting ignored, move it into the "Never" list with the exact class name (`never use rounded-2xl`). Specific bans work better than general guidance.

## Common additions

Depending on your project, these lines are worth adding:

- `Use the existing components in src/components/ui before creating new ones.` Stops duplicate buttons with slightly different styles.
- `Images: real product screenshots in /public/shots. Never generate placeholder illustrations.`
- `Numbers in tables use tabular-nums and right alignment.`
- `Empty states have one sentence and one action, no illustration.`

## Adapting the file

Swap the tokens and fonts for your own (see [colour palettes](/guides/color-palettes-that-dont-look-ai) and [font pairings](/guides/best-fonts-for-vibe-coded-apps)). Keep the structure: tokens, type, shape, layout, never, copy, self-check. If you're on v0 or Bolt, the same text works as a project instruction; the [v0 prompts guide](/guides/v0-design-system-prompts) shows where it goes.

When you're done, [scan the result](/) and compare against the [leaderboard](/leaderboard).

## FAQ

**Where do Cursor rules live?**
Project rules live in .cursor/rules/ as .mdc files with a small frontmatter block (description, globs, alwaysApply). Older projects may use a single .cursorrules file at the root, which still works.

**Does this work in Claude Code?**
Yes. Put the same content in CLAUDE.md at the repo root (or reference a DESIGN.md from it). Claude Code reads CLAUDE.md automatically.

**How long should a rules file be?**
Short enough that the model actually follows it. Concrete values and a banned list beat paragraphs of philosophy. Aim for under 80 lines.

---

# Pre-launch design checklist for AI-built apps (30 checks)

URL: https://unslop-me.vercel.app/guides/pre-launch-design-checklist

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](/guides/color-palettes-that-dont-look-ai))
- [ ] **Not Inter-only.** There's a display face for headings. ([Fonts](/guides/best-fonts-for-vibe-coded-apps))
- [ ] **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](/guides/landing-page-copy-that-doesnt-sound-ai))
- [ ] **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](/leaderboard), and if you build with Cursor or Claude Code, wire the scanner into your agent via [MCP](/agents) 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.

---

# How to restyle shadcn/ui so it doesn't look like every other site

URL: https://unslop-me.vercel.app/guides/replace-shadcn-defaults

The exact shadcn/ui variables, component files and Tailwind settings to change so your Lovable, v0 or Cursor app stops looking like the default shadcn theme.

Most AI builders, including Lovable, v0 and plenty of Cursor projects, use shadcn/ui. It's a fine choice: accessible, composable and yours to edit. But its default theme is so widespread that "neutral greys, 8px radius, black primary button, Inter" now reads as "made with a builder". You don't need a new component library. You need about six edits.

## 1. Replace the theme variables

shadcn components read colours from CSS variables, usually in `app/globals.css` (Next.js / v0) or `src/index.css` (Vite / Lovable). Replace the whole `:root` block with your palette. Here's a warm, editorial one, converted to the HSL triplet format shadcn uses:

```
:root {
  --background: 40 33% 93%;      /* #f4f0e8 paper */
  --foreground: 30 19% 7%;       /* #16130f ink */
  --card: 40 50% 97%;
  --card-foreground: 30 19% 7%;
  --primary: 30 19% 7%;          /* ink buttons */
  --primary-foreground: 40 33% 93%;
  --secondary: 38 26% 81%;
  --secondary-foreground: 30 19% 7%;
  --muted: 38 26% 88%;
  --muted-foreground: 34 7% 39%;
  --accent: 14 100% 55%;         /* #ff4d1c */
  --accent-foreground: 0 0% 100%;
  --border: 38 26% 81%;
  --input: 38 26% 81%;
  --ring: 14 100% 55%;
  --radius: 0.125rem;
}
```

If your file uses `oklch()` values (newer shadcn versions), ask your builder to convert the hex values into that format instead.

## 2. Change the radius on purpose

`--radius: 0.5rem` is the default and it's everywhere. Pick a direction: sharp (`0`), crisp (`0.125rem`) or soft (`0.75rem`) and apply it consistently. Sharp corners with 1.5px borders feel editorial; soft corners with no borders feel friendly. The default in-between is what reads as generic.

## 3. Swap the fonts

shadcn doesn't choose a font, but nearly every template pairs it with Inter or Geist. Add a display face for headings ([12 pairings](/guides/best-fonts-for-vibe-coded-apps)) and set it on `h1, h2, h3` in your global CSS.

## 4. Edit Button

`components/ui/button.tsx` defines the variants with `cva`. Useful changes:

- Remove `shadow` / `shadow-sm` from the default variant.
- Increase padding (`h-11 px-6`) for a more confident button.
- Make the `link` variant underlined with an offset: `underline underline-offset-4 decoration-2`.
- Add a hover that changes colour rather than opacity: `hover:bg-accent hover:text-accent-foreground`.

Prompt:

```
Edit components/ui/button.tsx only. Default variant: bg-primary text-primary-foreground, no shadow, hover:bg-accent hover:text-accent-foreground, h-11 px-6, font-semibold. Outline variant: border-[1.5px] border-foreground bg-transparent. Link variant: underline underline-offset-4 decoration-2. Keep all props and exports.
```

## 5. Edit Card, Badge and Input

- **Card:** replace `shadow-sm` with a 1.5px border in `--foreground` or `--border`; increase padding to 28px. Cards without shadows look much less templated.
- **Badge:** default badges are rounded-full pills. Make them square, uppercase, 11px monospace with letter-spacing 0.1em; they become labels instead of pills.
- **Input:** a 1.5px border and a bigger height (48px) make forms feel deliberate.

## 6. Check what else uses the defaults

Search the codebase for classes that bypass your tokens: `bg-white`, `text-gray-`, `text-slate-`, `bg-indigo-`, `from-`, `backdrop-blur`, `rounded-xl`, `rounded-2xl`, `rounded-full`. Replace them with token classes (`bg-background`, `text-muted-foreground`, `border-border`).

```
Search the project for bg-white, text-gray-*, text-slate-*, bg-indigo-*, bg-violet-*, bg-purple-*, gradient classes, backdrop-blur, rounded-xl, rounded-2xl and rounded-full. Replace each with the theme token equivalent (bg-background, bg-card, text-foreground, text-muted-foreground, border-border, rounded-[var(--radius)]). Remove gradients and blur. Change styling only.
```

## What it looks like when it's done

A useful test: take a screenshot of your landing page and of the shadcn docs site and put them side by side. If they look like siblings, keep going. Things that usually make the biggest visible difference, in order:

1. Background that isn't pure white or zinc-950.
2. A display font on headings.
3. Borders instead of shadows on cards.
4. Primary buttons that aren't the default black or indigo with rounded-md.
5. Badges as square labels instead of pills.

You can usually get through all five in under an hour. Keep the component APIs exactly as they are, so nothing in the app's logic needs to change.

## Keep it from drifting back

Put the rules somewhere your builder reads every time: v0 project instructions, a Lovable knowledge file, or a [Cursor rules file](/guides/cursor-rules-for-ui-design). Then [scan your deployed site](/) to confirm the stock palette and font tells are gone, and compare with real builds on the [Slop Leaderboard](/leaderboard). The [v0 design system prompts](/guides/v0-design-system-prompts) guide covers the same ground step by step for v0.

## FAQ

**Is it safe to edit files in components/ui?**
Yes. shadcn/ui copies components into your project on purpose so you own them. Edit them freely; just remember that re-running the CLI's add command for a component can overwrite your changes.

**What's the fastest single change?**
The CSS variables in globals.css (or index.css). Changing --background, --foreground, --primary, --border and --radius restyles every component at once.

**Do I need to support dark mode?**
Only if your users want it. Shipping one considered light theme is better than two default ones.

---

# Landing page copy that doesn't sound AI-written (and the words to cut)

URL: https://unslop-me.vercel.app/guides/landing-page-copy-that-doesnt-sound-ai

The phrases that make AI-built landing pages sound generated, a simple formula for headlines and subheads, and before/after rewrites you can copy.

Visitors decide in a few seconds whether a page was made with care. Design gets most of the attention, but copy gives a site away just as fast. "Unlock the power of seamless collaboration" is a sentence nobody has ever said out loud, and readers can tell.

## The words to cut

Our scanner flags these because they appear on a huge share of generated landing pages:

> unlock, supercharge, seamless / seamlessly, elevate, revolutionize, empower, effortless / effortlessly, game-changer, cutting-edge, next-level, all-in-one, transform your, unleash, harness the power, streamline, in seconds, AI-powered, take your ... to the next level, boost your, reimagine

None of them is wrong. They're just empty. Each one stands in for a specific claim you could make instead.

## A formula that works

**Headline: what it is + who it's for.** Under eight words. Plain nouns.

**Subhead: the outcome + one concrete detail.** One or two sentences. This is where the specifics go.

**Button: the first action, as a verb.** What happens when I click?

## Before and after

**A scheduling tool**

- Before: *"Supercharge your productivity with AI-powered scheduling."*
- After: *"Scheduling for physiotherapy clinics."* Subhead: *"Patients book and reschedule themselves, reminders go out by SMS, and no-shows dropped 30% for our first ten clinics."* Button: *"Set up your clinic"*.

**A habit tracker**

- Before: *"Unlock your full potential. Build better habits effortlessly."*
- After: *"A habit tracker that doesn't nag."* Subhead: *"One tap a day, a weekly summary on Sunday, and no streaks to lose when life happens."* Button: *"Start tracking"*.

**A dev tool**

- Before: *"Revolutionize your workflow with seamless API monitoring."*
- After: *"Know when your API breaks before your users do."* Subhead: *"Synthetic checks every 30 seconds from six regions, alerts in Slack, and a public status page you don't have to build."* Button: *"Add your first endpoint"*.

Notice that the "after" versions are less impressive-sounding and more convincing. Specifics do the persuading.

## Feature sections

The default AI feature block is three cards: "Lightning Fast", "Secure by Default", "Easy to Use". Every product claims those, so they carry no information. Instead:

- Name the feature the way a user would ask for it ("Export to Xero", not "Seamless Integrations").
- Follow with what it saves them ("No more copying invoices by hand at month-end").
- Show it. A cropped screenshot is worth more than an icon.

## Social proof

Fake testimonials are worse than none. If you have three users, quote one of them with their permission and first name. If you have none, show the product working instead, or write a short, honest "why I built this" from the founder.

## Getting AI to write better copy

If you draft with a model, give it raw material and constraints:

```
Write 5 landing page headline options and 3 subheads for this product.
Customer: independent physiotherapy clinics with 1-5 practitioners.
Their problem, in their words: "We lose an hour a day on the phone moving appointments" and "No-shows kill us."
What it does: online self-booking, SMS reminders, a waitlist that auto-fills cancellations.
Rules: headlines under 8 words, plain words, no metaphors. Never use: unlock, supercharge, seamless, elevate, empower, effortless, streamline, revolutionize, all-in-one, AI-powered, "in seconds", "next level".
Subheads must include one specific number or detail.
```

Then pick one and edit it yourself. The last 10% is where it starts sounding like you.

## A five-minute copy audit

Open your landing page and do this, in order:

1. **Read the headline out loud to someone** who hasn't seen the product. Ask them what it does. If they can't say, rewrite it.
2. **Search for the banned words** above. Replace each with the specific claim it was standing in for.
3. **Count the adjectives** in your hero. More than two is usually too many.
4. **Check every button label.** Does it say what happens next? "Get started" doesn't. "Create your workspace" does.
5. **Find one number.** A real one: a time saved, a price, a count of users, a response time. Put it in the subhead.
6. **Delete one section.** Most generated pages have a section that repeats the one above it. Removing it makes everything else land harder.

## Check the rest of the page

Copy is one of 13 tells. [Run a free scan](/) to see the others on your site (it quotes the exact phrases it found), read [why AI-built apps all look the same](/guides/why-ai-built-apps-look-the-same), and run the [pre-launch design checklist](/guides/pre-launch-design-checklist) before you post anywhere.

## FAQ

**Can I use ChatGPT or Claude to write landing page copy?**
Yes, but give it facts, not vibes. Paste who the customer is, the problem in their words, and three specific features. Then ban the filler words and ask for five headline options under eight words.

**How long should a headline be?**
Usually under eight words. If it needs a comma, the subhead should probably carry the second half.

**Is "AI-powered" bad to say?**
It's not wrong, it's just not a benefit. Say what the AI does for the user instead ("drafts the reply for you").

---

# Agents, API and MCP

Unslop Me has a free public JSON API and a remote MCP server, so AI coding agents like Cursor, Claude Code, Windsurf and Claude Desktop can check how designed a site looks (and which AI tells to fix) without leaving the editor.

## MCP server

**Endpoint:** `https://unslop-me-production.up.railway.app/mcp` (streamable HTTP, stateless, no auth). Also reachable at `https://unslop-me.vercel.app/mcp`.

Tools:

- **`unslop_scan(url)`**: scans a public URL (about 20 seconds) and returns the Slop Score (0-100, where 100 = looks designed and each tell subtracts), each tell with evidence and a fix, copy-paste fix prompts for Cursor/Claude Code and for Lovable/Bolt/v0, a suggested design system, before/after screenshot links, and a link to the full $15 redesign pack.
- **`unslop_tells()`**: returns the checklist of 13 AI design tells with how each is detected, its weight and its fix. Instant. Good as a pre-flight check while building UI.

### Cursor

Add to `.cursor/mcp.json` in your project (or `~/.cursor/mcp.json` for all projects):

```
{
  "mcpServers": {
    "unslop": {
      "url": "https://unslop-me-production.up.railway.app/mcp"
    }
  }
}
```

Then in Agent chat: *"Use unslop_scan on https://myapp.vercel.app and fix the top three tells in this codebase."*

### Claude Code

```
claude mcp add --transport http unslop https://unslop-me-production.up.railway.app/mcp
```

Then: *"Run unslop_tells and check src/pages/Landing.tsx against it."*

### Claude Desktop, and clients that only speak stdio

Use the `mcp-remote` bridge:

```
{
  "mcpServers": {
    "unslop": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://unslop-me-production.up.railway.app/mcp"
      ]
    }
  }
}
```

Or run the zero-dependency stdio server from the repo (`mcp/index.mjs`, Node 18+), which proxies to the same API:

```
{
  "mcpServers": {
    "unslop": {
      "command": "node",
      "args": [
        "/path/to/unslopme/mcp/index.mjs"
      ]
    }
  }
}
```

### VS Code, Windsurf and others

Any client that supports remote MCP servers over streamable HTTP can point at `https://unslop-me-production.up.railway.app/mcp` with no headers.

## JSON API

Base URL: `https://unslop-me-production.up.railway.app`. OpenAPI spec: [`/openapi.json`](https://unslop-me-production.up.railway.app/openapi.json). No key needed.

### POST /api/scan

```
curl -s -X POST https://unslop-me-production.up.railway.app/api/scan \
  -H 'content-type: application/json' \
  -d '{"url":"https://myapp.lovable.app"}'
```

Returns `id`, `url`, `score`, `verdict`, `tells[]` (`key`, `name`, `points`, `evidence`, `fix`), `fonts`, `before`/`after`/`mobile` screenshot URLs, `redesign` (HTML of the redesigned hero), `prompts` (`system`, `palette`, `fonts`, `lovable`, `cursor`) and `seconds`.

Errors: `400` bad or private URL, `429` rate limited, `502` the site failed to load, `504` it took longer than 30 seconds.

### GET /api/scan/{id}

```
curl -s https://unslop-me-production.up.railway.app/api/scan/0123456789
```

Fetches a previous result. Results are kept for about 7 days.

### GET /api/tells

The checklist and scoring weights as JSON.

### GET /api/public

Every public score page on the [leaderboard](/leaderboard), as JSON.

## Limits and fair use

- **10 scans per hour per IP**, shared between the API and the MCP `unslop_scan` tool. Over the limit you get HTTP 429 (or an MCP tool error saying so).
- Up to 2 scans run at once; extra requests queue.
- Only public `http(s)` URLs. Private, local and internal addresses are refused.
- Scans are not published anywhere unless someone presses "Share your score" in the web app.
- Need more volume? Get in touch: unslopme@tutamail.com.

## Also

- [`/llms.txt`](https://unslop-me.vercel.app/llms.txt) and [`/llms-full.txt`](https://unslop-me.vercel.app/llms-full.txt) for LLM-friendly docs
- [`/.well-known/ai-plugin.json`](https://unslop-me.vercel.app/.well-known/ai-plugin.json) and [`/.well-known/mcp.json`](https://unslop-me.vercel.app/.well-known/mcp.json)
- [Cursor rules for UI design](/guides/cursor-rules-for-ui-design): pairs well with the MCP server.


---

# Slop Leaderboard data

- Agentic AI Waitlist (v0-waitlist-page-design-sigma.vercel.app): 94/100, Already looks designed. Tells: Glassmorphism (backdrop blur). https://unslop-me.vercel.app/s/v0-waitlist-page-design-sigma-vercel-app
- Target Range (gunsvszombies.lovable.app): 80/100, Already looks designed. Tells: Emoji used as icons, Builder badge left on. https://unslop-me.vercel.app/s/gunsvszombies-lovable-app
- Puzzlebox (puzzlesbox.lovable.app): 79/100, Already looks designed. Tells: Builder badge left on, Low type-scale contrast, Default Lucide icons. https://unslop-me.vercel.app/s/puzzlesbox-lovable-app
- Linear (linear.app): 78/100, Already looks designed. Tells: Uniform icon-card feature grid, Glassmorphism (backdrop blur), Default Tailwind palette. https://unslop-me.vercel.app/s/linear-app
- Penumbra (v0-ai-service-website-seven.vercel.app): 73/100, Already looks designed. Tells: Uniform icon-card feature grid, Glassmorphism (backdrop blur), Default Lucide icons. https://unslop-me.vercel.app/s/v0-ai-service-website-seven-vercel-app
- 名付け (sakura-name-sparkle.lovable.app): 73/100, Already looks designed. Tells: Builder badge left on, Glassmorphism (backdrop blur), rounded-2xl everything. https://unslop-me.vercel.app/s/sakura-name-sparkle-lovable-app
- RENEW.org (renew-app-page.bolt.host): 66/100, Already looks designed. Tells: Inter / system-font only, Builder badge left on, Centered-everything hero, Low type-scale contrast. https://unslop-me.vercel.app/s/renew-app-page-bolt-host
- Free v0 Templates (v0-premium-templates.vercel.app): 64/100, Already looks designed. Tells: Generic AI copy, Inter / system-font only, Default Lucide icons. https://unslop-me.vercel.app/s/v0-premium-templates-vercel-app
- Luna Vos (luna-vos.lovable.app): 64/100, Already looks designed. Tells: Emoji used as icons, Builder badge left on, Glassmorphism (backdrop blur), Centered-everything hero, Generic AI copy. https://unslop-me.vercel.app/s/luna-vos-lovable-app
- Meet and Make (meetnmake.lovable.app): 64/100, Already looks designed. Tells: Emoji used as icons, Builder badge left on, Default Lucide icons, Low type-scale contrast. https://unslop-me.vercel.app/s/meetnmake-lovable-app
- SOC.Workflows (soc-workflows-ai-cyb-tstb.bolt.host): 63/100, Already looks designed. Tells: Emoji used as icons, Builder badge left on, Uniform icon-card feature grid, Glassmorphism (backdrop blur). https://unslop-me.vercel.app/s/soc-workflows-ai-cyb-tstb-bolt-host
- Nexal (template-premium-saas-dashboard-lp.bolt.host): 59/100, A few AI giveaways showing. Tells: Inter / system-font only, Uniform icon-card feature grid, Builder badge left on, Default Lucide icons. https://unslop-me.vercel.app/s/template-premium-saas-dashboard-lp-bolt-host
- CurryClub (thecurryclub.lovable.app): 55/100, A few AI giveaways showing. Tells: Uniform icon-card feature grid, Builder badge left on, rounded-2xl everything, Glassmorphism (backdrop blur), Default Lucide icons, Generic AI copy. https://unslop-me.vercel.app/s/thecurryclub-lovable-app
- Red Mage AI Explorer (redmage-interact.bolt.host): 54/100, A few AI giveaways showing. Tells: Inter / system-font only, Uniform icon-card feature grid, Builder badge left on, Default Lucide icons, Glassmorphism (backdrop blur). https://unslop-me.vercel.app/s/redmage-interact-bolt-host
- Vantage (template-vantage-dashboard.bolt.host): 50/100, A few AI giveaways showing. Tells: Purple/indigo gradient, Builder badge left on, Default Lucide icons, Glassmorphism (backdrop blur), Low type-scale contrast. https://unslop-me.vercel.app/s/template-vantage-dashboard-bolt-host
- Hirow (v0-hirow-landing-page-build.vercel.app): 48/100, A few AI giveaways showing. Tells: Inter / system-font only, Emoji used as icons, Generic AI copy, Uniform icon-card feature grid, Default Lucide icons. https://unslop-me.vercel.app/s/v0-hirow-landing-page-build-vercel-app
- PromptVault (promptvault29.bolt.host): 43/100, A few AI giveaways showing. Tells: Inter / system-font only, Uniform icon-card feature grid, Builder badge left on, rounded-2xl everything, Centered-everything hero, Default Lucide icons, Generic AI copy. https://unslop-me.vercel.app/s/promptvault29-bolt-host
- AILaunch (maker-gem-finder.lovable.app): 41/100, A few AI giveaways showing. Tells: Inter / system-font only, Generic AI copy, Uniform icon-card feature grid, Glassmorphism (backdrop blur), Default Lucide icons, Centered-everything hero. https://unslop-me.vercel.app/s/maker-gem-finder-lovable-app
- InsightAI (insights-ai-dashboard.lovable.app): 39/100, A few AI giveaways showing. Tells: Default Tailwind palette, Inter / system-font only, Uniform icon-card feature grid, Builder badge left on, Default Lucide icons, Low type-scale contrast. https://unslop-me.vercel.app/s/insights-ai-dashboard-lovable-app
- AgentVision (agent-vision-dashboard.lovable.app): 34/100, Lots of room to glow up. Tells: Default Tailwind palette, Inter / system-font only, Builder badge left on, Uniform icon-card feature grid, rounded-2xl everything, Default Lucide icons, Low type-scale contrast. https://unslop-me.vercel.app/s/agent-vision-dashboard-lovable-app
- ASC2 (asc2.lovable.app): 30/100, Lots of room to glow up. Tells: Inter / system-font only, Default Tailwind palette, Builder badge left on, Glassmorphism (backdrop blur), Uniform icon-card feature grid, Default Lucide icons, Centered-everything hero, Low type-scale contrast. https://unslop-me.vercel.app/s/asc2-lovable-app
- PermitPal (permit-guide-ai.lovable.app): 26/100, Lots of room to glow up. Tells: Inter / system-font only, Uniform icon-card feature grid, Glassmorphism (backdrop blur), Builder badge left on, rounded-2xl everything, Generic AI copy, Default Lucide icons, Centered-everything hero. https://unslop-me.vercel.app/s/permit-guide-ai-lovable-app
- Build. Automate. (v0 waitlist) (v0-waitlist-landing-page-psi.vercel.app): 23/100, Lots of room to glow up. Tells: Purple/indigo gradient, Inter / system-font only, Default Tailwind palette, Glassmorphism (backdrop blur), Uniform icon-card feature grid, Emoji used as icons, Centered-everything hero, Default Lucide icons. https://unslop-me.vercel.app/s/v0-waitlist-landing-page-psi-vercel-app
- Aura (ai-product-landing-p-hwum.bolt.host): 21/100, Lots of room to glow up. Tells: Inter / system-font only, Uniform icon-card feature grid, Default Tailwind palette, Builder badge left on, rounded-2xl everything, Generic AI copy, Default Lucide icons, Glassmorphism (backdrop blur), Centered-everything hero. https://unslop-me.vercel.app/s/ai-product-landing-p-hwum-bolt-host
- ToolHub Central (toolhub-central-comp-w3tm.bolt.host): 19/100, Lots of room to glow up. Tells: Purple/indigo gradient, Default Tailwind palette, Inter / system-font only, Builder badge left on, Uniform icon-card feature grid, rounded-2xl everything, Default Lucide icons, Centered-everything hero. https://unslop-me.vercel.app/s/toolhub-central-comp-w3tm-bolt-host
- VizLeads (vizleads.lovable.app): 15/100, Lots of room to glow up. Tells: Purple/indigo gradient, Default Tailwind palette, Inter / system-font only, Builder badge left on, Uniform icon-card feature grid, Default Lucide icons, Glassmorphism (backdrop blur), Centered-everything hero, Generic AI copy. https://unslop-me.vercel.app/s/vizleads-lovable-app
- Sakay (sakayph-app-landing-xzzp.bolt.host): 12/100, Lots of room to glow up. Tells: Purple/indigo gradient, Inter / system-font only, Default Tailwind palette, Builder badge left on, Uniform icon-card feature grid, Glassmorphism (backdrop blur), rounded-2xl everything, Default Lucide icons, Generic AI copy. https://unslop-me.vercel.app/s/sakayph-app-landing-xzzp-bolt-host
- OptimizeAI (v0-optimize-ai-landing-page.vercel.app): 10/100, Lots of room to glow up. Tells: Purple/indigo gradient, Inter / system-font only, Uniform icon-card feature grid, Default Tailwind palette, Glassmorphism (backdrop blur), rounded-2xl everything, Default Lucide icons, Centered-everything hero, Generic AI copy. https://unslop-me.vercel.app/s/v0-optimize-ai-landing-page-vercel-app
- BizFlow AI (bizflow-ai-landing-p-y58u.bolt.host): 0/100, Lots of room to glow up. Tells: Purple/indigo gradient, Default Tailwind palette, Inter / system-font only, Generic AI copy, Uniform icon-card feature grid, Builder badge left on, rounded-2xl everything, Default Lucide icons, Centered-everything hero. https://unslop-me.vercel.app/s/bizflow-ai-landing-p-y58u-bolt-host
- kuttiai (kuttiai.bolt.host): 0/100, Lots of room to glow up. Tells: Purple/indigo gradient, Inter / system-font only, Uniform icon-card feature grid, Default Tailwind palette, Glassmorphism (backdrop blur), Builder badge left on, rounded-2xl everything, Default Lucide icons, Centered-everything hero, Generic AI copy. https://unslop-me.vercel.app/s/kuttiai-bolt-host