You've been using Cursor or v0 for a few months. You can spin up a landing page in 20 minutes. The code works. The layout is solid. But every time you open it in the browser, something feels off.
It looks like every other AI-built site.
Same gradient. Same hero section. Same three cards below. Same button in the same position.
The tools aren't the problem. The prompts are.
Why AI sites all look the same
When you ask an AI to build a landing page, you probably write something like this:
Build a landing page for my project management SaaS tool.
Include a hero section, features section, and pricing table.
Use a modern design.
The AI does exactly what you asked. It builds a functional page with a hero, features, and pricing. "Modern design" means whatever is most common in its training data — which is the same layout everyone else is using.
The AI has no taste. It has frequency. It defaults to what it has seen the most, which is the median of all the sites ever built with AI.
You described functionality. You forgot to describe design.
What a designer actually decides before opening any tool
A designer doesn't think in sections. They think in systems.
Before writing a single line, they decide what feeling the site should give, what typography communicates that feeling, what color palette, what spacing rhythm, what layout personality. These aren't aesthetic preferences. They're decisions that make a site recognizable.
And the AI needs all of them explicitly, or it falls back to defaults.
The prompt that changes everything
Here's the same landing page, but with design direction baked in:
Build a landing page for a project management SaaS tool.
DESIGN SYSTEM:
- Style: Brutalist minimalism. Bold, direct, no decorative elements.
- Typography: Primary font stack: system-ui, "Segoe UI", sans-serif.
Headlines: 72px, weight 900, line-height 1.0, uppercase.
Body: 16px, weight 400, line-height 1.6.
- Colors: Background #0A0A0A (near black).
Text: #F5F5F0 (warm white).
Accent: #FF3300 (electric orange).
No gradients.
- Spacing: 8px base unit. Section padding: 120px vertical.
- Layout: Two-column asymmetric grid. Text left (40%), visual right (60%).
- Components: Buttons borderless with underline only. No rounded corners.
Cards: 1px border in accent color, no shadows.
- Mood: Confident, direct. Feels like a tool built by engineers, not marketers.
SECTIONS:
1. Hero: One strong statement headline (max 6 words), one sentence description, one CTA
2. Features: Three features, icon + title + one-line description each
3. Social proof: Three quotes, no photos, just initials and company
4. Pricing: Two tiers only, simple comparison
The result looks like something a designer built, because you gave the AI the same information a designer would start with.
Three things make the difference here. First: specific values over vague adjectives. "Modern design" is meaningless. "#0A0A0A background, no gradients, 1px borders" is not. The more concrete the decision, the less the AI has to guess.
Second: typography as personality. Font size, weight, and line-height together communicate as much as color does. Weight 900, uppercase, line-height 1.0 says something completely different from weight 300, mixed case, line-height 1.5.
Third: one sentence of mood. "Feels like a tool built by engineers, not marketers" gives the AI an editorial direction. It changes how it writes copy, not just how it styles components.
Platform matters
v0, Cursor, Bolt, and Lovable interpret prompts differently. v0 responds better to component-level descriptions and React-specific language. Cursor handles full-page context better, including file structure and component relationships. Bolt does well with explicit layout instructions.
A prompt that works in v0 might produce mediocre results in Cursor. The tools have different rendering logic, so the prompts need to account for that.
The shortcut
Writing a complete design system from scratch every time takes work. For each project you'd need to decide typography, color, spacing, layout personality, component styles, and mood before writing a single line.
That's what I built Code Bonito for. It's a library of design prompts, each encoding a complete visual system, tested and optimized per platform. You pick a style, copy the prompt for your specific tool, and paste it in.
The AI still builds the site. You just gave it the eye of a designer first.
First template is free.
Where to start
Take your current prompt and add a DESIGN SYSTEM block at the top. Even a rough version changes the output noticeably.
Start with three decisions: background color, headline font weight, and one sentence about the mood. That's enough to break out of the median.
The more specific you are about design, the more specific the AI can be in execution. Not magic. Just better instructions.
Top comments (0)