如何用五項設計決策，讓 AI 生成的網站避免模板感

Open ten sites built with Lovable, Bolt, Cursor or Claude and you'll often see the same page ten times: a centered hero on a purple gradient, three rounded icon cards, Inter at one weight, and a fade-up on every section.

The tools aren't the problem. They're very good at building exactly what they're told, and "make me a modern landing page" tells them almost nothing. So they fill every gap with the statistical average, and the average is what people now call AI slop.

The fix is not a longer prompt. It's a prompt that makes five specific decisions the model would otherwise make for you.

1. Type as a system, not a font name

"Use a nice modern font" gets you Inter. Name a pairing and give it sizes and weights:

Typography: headlines in Fraunces, weight 600, 72px on desktop / 44px on mobile,
tight letter-spacing (-0.02em). Body in Inter 16px, line-height 1.6, max width 62ch.
Labels and nav in Inter 13px uppercase, letter-spacing 0.08em.

A strong contrast between a display face and a quiet body face does more for "designed" than any gradient.

2. Color with names and one rule

Give the builder four or five named colors and a rule for the accent:

Colors: ink #0E0E10 (text), paper #F4F1EA (background), stone #D9D4C7 (borders),
accent #FF5A1F. Use the accent ONLY on the primary button and one highlighted word
in the headline. No gradients.

The "only" is the important word. Without it, the accent ends up on every icon, badge and hover state.

3. Layout described structurally

"A clean hero section" produces a centered stack. Describe position on a grid instead:

Hero: 12-column grid, 1200px container. Headline and subcopy left-aligned in
columns 1-7. Product screenshot in columns 7-12, bleeding 80px off the right edge,
slightly overlapping the headline column. Primary and secondary buttons inline,
not stacked.

Then say what you don't want. Builders respond well to explicit bans:

Do not: center the hero, use three identical feature cards, use emoji as icons,
add decorative blobs.

4. One motion moment, with timing

Asking for "smooth animations" gets you a fade-up on every block, which reads as template. Pick one moment and spec it like a designer would:

Motion: one moment only. On load, the hero screenshot scales from 1.05 to 1 and
fades in over 900ms, cubic-bezier(0.16, 1, 0.3, 1). Everything else is static.
Respect prefers-reduced-motion.

Restraint is what makes the one animation feel intentional.

5. Real assets over placeholders

Generic stock illustrations and abstract gradients are the other big tell. Tell the builder what the visuals actually are, even if you swap them later:

Visuals: use a real product screenshot (placeholder at /hero.png, 16:10, with a
1px stone border and 12px radius). No illustrations. Section dividers are thin
1px lines, not waves.

Before and after

Before:

Build a modern landing page for my SaaS that helps freelancers send invoices.
Make it look clean and professional with smooth animations.

After (paste sections 1 to 5 above, then):

Page: freelancer invoicing SaaS. Sections in order: hero, a single wide
screenshot of the invoice editor, three short benefit rows (text left, small
screenshot right, alternating), pricing with two plans, FAQ, footer.
Copy tone: plain, specific, no buzzwords.

Same builder, same model. The second prompt removes most of the decisions the model would have averaged out, so the result looks like someone chose it.

A reusable template

Keep this in Lovable's Knowledge, a CLAUDE.md, or a Cursor rules file so every new page starts from it:

TYPE: [display font, weight, sizes] / [body font, size, line-height]
COLOR: [4-5 named hex values] + rule for the accent
LAYOUT: [grid, container width, where each hero element sits]
MOTION: [one moment, duration, easing] + reduced-motion
ASSETS: [what the real visuals are]
DO NOT: [the defaults you want to ban]

After the first build, take a screenshot and compare it against the prompt line by line. When something drifted, quote the exact line back to the builder instead of saying "make it look better".

Disclosure: I work on MotionSites, which publishes AI website prompts written in this format for Lovable, Bolt, Cursor and Claude. This post was written with AI assistance and edited by hand.