{"slug": "ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter", "title": "AI website prompts that don't look AI-generated: the 5 decisions that matter", "summary": "A developer who works on MotionSites published a guide arguing that AI website builders like Lovable, Bolt, Cursor and Claude produce generic \"AI slop\" pages not because of the tools but because vague prompts let models default to statistical averages. The guide recommends five specific prompt decisions — named typography pairings, a constrained color palette, grid-based hero layout, a single specified motion moment, and explicit visual assets — plus a reusable rules block for CLAUDE.md or Cursor rules files, and advises comparing screenshots against the prompt line by line to catch drift.", "body_md": "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.\n\nThe 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.\n\nThe fix is not a longer prompt. It's a prompt that makes five specific decisions the model would otherwise make for you.\n\n\"Use a nice modern font\" gets you Inter. Name a pairing and give it sizes and weights:\n\n```\nTypography: headlines in Fraunces, weight 600, 72px on desktop / 44px on mobile,\ntight letter-spacing (-0.02em). Body in Inter 16px, line-height 1.6, max width 62ch.\nLabels and nav in Inter 13px uppercase, letter-spacing 0.08em.\n```\n\nA strong contrast between a display face and a quiet body face does more for \"designed\" than any gradient.\n\nGive the builder four or five named colors and a rule for the accent:\n\n```\nColors: ink #0E0E10 (text), paper #F4F1EA (background), stone #D9D4C7 (borders),\naccent #FF5A1F. Use the accent ONLY on the primary button and one highlighted word\nin the headline. No gradients.\n```\n\nThe \"only\" is the important word. Without it, the accent ends up on every icon, badge and hover state.\n\n\"A clean hero section\" produces a centered stack. Describe position on a grid instead:\n\n```\nHero: 12-column grid, 1200px container. Headline and subcopy left-aligned in\ncolumns 1-7. Product screenshot in columns 7-12, bleeding 80px off the right edge,\nslightly overlapping the headline column. Primary and secondary buttons inline,\nnot stacked.\n```\n\nThen say what you don't want. Builders respond well to explicit bans:\n\n```\nDo not: center the hero, use three identical feature cards, use emoji as icons,\nadd decorative blobs.\n```\n\nAsking 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:\n\n```\nMotion: one moment only. On load, the hero screenshot scales from 1.05 to 1 and\nfades in over 900ms, cubic-bezier(0.16, 1, 0.3, 1). Everything else is static.\nRespect prefers-reduced-motion.\n```\n\nRestraint is what makes the one animation feel intentional.\n\nGeneric stock illustrations and abstract gradients are the other big tell. Tell the builder what the visuals actually are, even if you swap them later:\n\n```\nVisuals: use a real product screenshot (placeholder at /hero.png, 16:10, with a\n1px stone border and 12px radius). No illustrations. Section dividers are thin\n1px lines, not waves.\n```\n\nBefore:\n\n```\nBuild a modern landing page for my SaaS that helps freelancers send invoices.\nMake it look clean and professional with smooth animations.\n```\n\nAfter (paste sections 1 to 5 above, then):\n\n```\nPage: freelancer invoicing SaaS. Sections in order: hero, a single wide\nscreenshot of the invoice editor, three short benefit rows (text left, small\nscreenshot right, alternating), pricing with two plans, FAQ, footer.\nCopy tone: plain, specific, no buzzwords.\n```\n\nSame 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.\n\nKeep this in Lovable's Knowledge, a CLAUDE.md, or a Cursor rules file so every new page starts from it:\n\n```\nTYPE: [display font, weight, sizes] / [body font, size, line-height]\nCOLOR: [4-5 named hex values] + rule for the accent\nLAYOUT: [grid, container width, where each hero element sits]\nMOTION: [one moment, duration, easing] + reduced-motion\nASSETS: [what the real visuals are]\nDO NOT: [the defaults you want to ban]\n```\n\nAfter 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\".\n\nDisclosure: I work on [MotionSites](https://motionsites.org/free), 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.", "url": "https://wpnews.pro/news/ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter", "canonical_source": "https://dev.to/motionsites/ai-website-prompts-that-dont-look-ai-generated-the-5-decisions-that-matter-3d41", "published_at": "2026-10-21 10:08:06+00:00", "updated_at": "2026-10-21 10:09:51.799828+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "ai-products", "developer-tools"], "entities": ["Lovable", "Bolt", "Cursor", "Claude", "MotionSites", "Inter", "Fraunces"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter", "markdown": "https://wpnews.pro/news/ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter.md", "text": "https://wpnews.pro/news/ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter.txt", "jsonld": "https://wpnews.pro/news/ai-website-prompts-that-don-t-look-ai-generated-the-5-decisions-that-matter.jsonld"}}