Make your v0 or Cursor app stop looking AI-built in 10 minutes
If you've built a landing page with v0, Cursor, Lovable or Bolt, you've probably had this moment: you put it next to someone else's and it's the same page. Purple-to-blue gradient, centred headline, one font, three feature cards with an icon in a circle, a pricing table, and a "Get started" button that does nothing you can see. Nothing on that page is broken. It's the average of every landing…
When you create a landing page using platforms like v0, Cursor, Lovable or Bolt, it is likely to look similar to other pages. This is because these templates use a standard design with a gradient, centered headline, one font size, icons in a circle, a pricing table and a button labeled "Get started" that doesn't do anything. Visitors can recognize this page within seconds, and some may question the thought put into the product.
Here are five signs to look out for and how to fix each one in a Next.js App Router project with Tailwind CSS v4.
1. Gradient for a brand colour: Replace the gradient background with three colours. In Tailwind v4, the colour palette is defined in CSS, and you can use Tailwind utility classes for the different colours. For example, you can define colors like --color-ink (#0a0a0d), --color-paper (#f3f1ea), and --color-volt (#c6ff3d) and apply them to the background using bg-ink, text-paper and bg-volt classes.
2. One font at one weight: Pick a display face for headings and a mono font for numbers and small labels. Import the fonts from Google Fonts and set the custom font variables in the `@theme` section of your `app/globals.css` file. This way, you can use different font families and weights for different elements on your page.
3. Move the hero off centre: A centered hero layout is the default because it rarely looks broken. Instead, use a left-aligned hero with a width limit on the headline. This will create the impression that someone deliberately placed the hero element, making the page look more intentional.
4. Show the product: Generated hero images often feature generic icons or shapes. Replace these with a screenshot of your product's best screen at 2x resolution. Import the image using the `next/image` component, which sets the width and height, ensuring nothing shifts when it loads. Additionally, you can use your real screen as a placeholder while developing the product.
5. Make every button respond: Visitors can sense when a button doesn't respond properly. Add a loading state that turns into a confirmation when clicking a button. Utilize the free Toast Stack component for this, which you can install using the shadcn CLI and add to your layout file. This way, users will know their clicks have been registered.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
