The Anti-Slop Prompt Template: Exactly What to Tell Claude, GPT-5, and Gemini to Avoid Generic Output (2026)

If your prompt does not explicitly forbid Tailwind blue, three-card grids, and rounded-2xl, nothing in the request stops your model from producing them.

The model makers say so themselves. Anthropic's own prompting guide for frontend work opens with it: "Claude can generate high-quality frontends, but without guidance it tends toward generic, conservative designs," and "without guidance, Claude often defaults to simplistic designs with white and purple backgrounds." The system prompt it suggests tells the model: "You tend to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic" (Claude Cookbook, "Prompting for frontend aesthetics," Prithvi Rajasekaran, 21 October 2025). OpenAI's GPT-5 prompting guide goes the other way and recommends the stack itself for new apps: Next.js, Tailwind CSS, shadcn/ui, Lucide, Inter or Geist (OpenAI cookbook). Put the two together and the default is no mystery.

This article is a working manual for steering away from it: nine levers, a master prompt, specialized prompts by use case, and the audit that catches what the prompt misses. An earlier version presented it as the result of a 1,200-prompt study across nine models, with tables of results. We hold no record of that study, so its figures are gone; the method stays, with the sources that support it.

This is not a list of clever tricks. It is a structural method for talking to a frontier LLM so that it stops producing the same hero section, the same pricing table, and the same dashboard it produces for everyone else. Read it once. Copy the template at the bottom. Audit your output with a tool like Sailop. Iterate.

TL;DR — The Master Prompt You Can Paste Right Now

Here is the prompt. Paste it as a system prompt in Claude Projects, a custom instruction in ChatGPT, a Gemini Gem, or as the first message in Cursor or Claude Code. We will decode every line in the next sections, but if you only read one section, read this one.

You are a senior frontend engineer and art director with a strong personal style.
You refuse to produce generic AI-generated SaaS layouts.

Hard constraints:
- Visual archetype: pick ONE among [Bauhaus grid, brutalist editorial, Swiss minimal,
  terminal/HUD, atelier/craft, art deco, riso print]. Commit to it for the whole output.
- Palette: do NOT use the default Tailwind blue/purple/indigo gradient family.
  Pick a palette anchored on ONE of: clay/ochre/terracotta, ink/bone/mustard,
  charcoal/lime, oxblood/cream, navy/copper, monochrome with one accent.
- Typography: do NOT use Inter as your only font. Pair two faces from
  [Space Mono, Space Grotesk, IBM Plex Mono, IBM Plex Sans, Fraunces, Migra,
  Reckless, JetBrains Mono, Söhne, Domaine, Recoleta]. Use one mono in the UI.
- Layout: forbid 3-equal-card grids, hero-with-floating-screenshot, gradient mesh hero,
  rounded-2xl on every container, generic shadow-md, blob SVG decorations, centered-everything.
  Use asymmetric 60/40 or 70/30 splits. Distribute visual weight unevenly.
- Detail layer: include at least 3 of [corner brackets, scan lines, ASCII rules,
  hairline tickers, rotated labels, monospace metadata, low-opacity grid, hand-drawn arrows].
- Voice: skeptical, technical, opinionated. No "empower", "leverage", "seamless",
  "robust", "harness", "delve", "tapestry", "revolutionize", "in today's fast-paced".
- Microcopy: include at least one specific number, one date, one named tool.

Process:
1. Before writing code, describe the chosen archetype in 3 lines.
2. Describe palette and type in 3 lines, with hex codes.
3. Build the component.
4. After writing, audit yourself: list 3 ways the output could still look AI-generated.
5. Fix those 3 issues in a second pass before returning final output.

Return: chosen archetype, palette, type, final component, self-audit, fixes applied.

That prompt is about 1,870 characters. Each clause targets one default. Without the typography clause, nothing stops Inter. Without the palette clause, nothing stops blue. Without the asymmetry clause, nothing stops the three-card grid. Without the self-audit, nothing catches the drift.

The rest of this article explains why.

1. Why Your Prompt Produces Slop

Most teams blame the model. The model is rarely the problem. The prompt is. Take five prompts that any agency, freelancer, or product team writes during a normal week, and look at what they leave open. Whatever is left open gets filled with the most common answer, which is why the results below are so predictable.

1.1 "Build a landing page for a SaaS"

What you typically get: a centered hero with an h1 between 48 and 72 pixels, a one-line subheadline in slate-500, a primary button in blue-600, a secondary button in white with a thin border, a 3D mockup of a fake dashboard floating to the right, a "Trusted by" row of five gray logos, a three-card features section using grid-cols-3 and rounded-2xl, a pricing table with three tiers (the middle one labeled "Most Popular"), a testimonial slider with circular avatars, an FAQ accordion in space-y-2, and a footer with four columns. The font is Inter or, on a brave day, Plus Jakarta Sans. The background is white or slate-50. There are blob SVGs behind the hero, set to 20% opacity. There may be a gradient mesh from from-indigo-500 via-purple-500 to-pink-500.

This is not a SaaS landing page. It is the median of every SaaS landing page the model has seen between 2021 and 2025. The model is doing exactly what was asked. The prompt did not ask for a specific identity. The prompt asked for the average.

1.2 "Create a portfolio website"

Output, on first try: a giant centered name in text-7xl font-bold, the words "Designer & Developer" or "Building beautiful experiences" underneath, a horizontal scrolling row of project thumbnails in a 3:2 ratio with rounded corners and a subtle hover lift, an "About" section with a photo on the left and three paragraphs on the right, a "Selected work" grid of six tiles in grid-cols-2 lg:grid-cols-3, a "Let's work together" CTA in 80% viewport height, an Instagram and X icon row in the footer. Everything is centered. Everything has whitespace tuned to "feel premium". The mood is interchangeable with countless Awwwards-influenced portfolios from 2022 to 2024.

1.3 "Make a hero section"

Output: 60vh to 80vh tall, centered text, an oversized headline, a 16-pixel subheadline below, two buttons side by side with gap-4, a small social proof line ("Used by 2,500+ teams"), and either a screenshot mockup, a Lottie animation, or a 3D iso illustration on the right. The background is a slow gradient or a dot grid. The headline contains the words "build", "scale", "ship", or "future". The subheadline starts with "An all-in-one platform for".

1.4 "Design a pricing page"

Output: three columns. Free, Pro, Enterprise. The middle column has a different border, a "Most Popular" ribbon or badge, a slightly elevated shadow, a bolder background. Each column has a price in a large font, a billing period in a smaller font, a horizontal rule, a list of features with checkmark icons (Lucide check, almost always), a CTA button, and a tiny "Cancel anytime" line at the bottom. Below the table, a comparison grid with the same features expanded. Below that, an FAQ. Below that, a CTA banner with a gradient background.

1.5 "Build a dashboard"

Output: left sidebar 240 to 280 pixels wide, top navbar with a search field in the center and an avatar on the right, four KPI cards in a row at the top of the main content (each one with a metric, a percentage delta in green or red, a sparkline), a chart taking 60% of the width and a list taking 40%, a table at the bottom with rows of h-12, status badges as pills with bg-{color}-100 text-{color}-800, pagination at the bottom right. The whole thing is in p-6 gap-6. The font is Inter. The accent color is blue or, on rare occasion, violet.

1.6 The Pattern Behind the Pattern

In each of these five cases, the slop is not a failure of the model. It is the model returning the centroid of its training data. The model has seen tens of millions of these layouts. It has been fine-tuned on them. It has been RLHF-tuned to consider them "safe and helpful". When you ask for a generic thing, you get the average generic thing. The averaging itself is the slop.

To break the average, the prompt has to push the model away from the centroid. That is what the next nine sections are about. For a deeper anatomy of these patterns, see /blog/ai-slop-2026-state-of-the-ai-generated-web and /blog/tailwind-blue-purple-gradient-ai-signature-2026.

2. The 9 Levers of an Anti-Slop Prompt

Each lever answers a specific default. None of them is decorative: take one out and the default it was holding back has nothing in its way. Anthropic's guide groups the same idea into three strategies ("Guide specific design dimensions," "Reference design inspirations," "Call out common defaults"); the nine levers below break those into concrete instructions.

Here is the table that summarizes the nine levers. Each one gets a dedicated H3 below.

The "expected effect" column is an editorial judgment, not a measurement: how much each lever changes what a senior designer would call "AI-looking." We give no numbers, because we have none to give.

2.1 Lever 1 — Impose a Non-Default Visual Constraint

The default visual constraint of every frontier LLM in 2026 is "blue, purple, indigo, white, slate gray". This is the centroid of the Tailwind documentation, of every Vercel template, of every shadcn example. To escape it, you do not write "no blue". A bare negative leaves the neighboring shades (cyan, sky, indigo) wide open.

You write a positive constraint, and you anchor it on a non-digital reference. Concrete options that work:

• Tannery / atelier: "Palette anchored on a tannery workshop: undyed leather (#D9C9A8), oxblood (#5B1A1A), bone (#F1ECDD), iron oxide (#7E3F23), graphite (#1F1B17)."
• Coastal / seasalt: "Palette anchored on a Cornish fishing village: weathered teal (#3E5C5A), rope (#C9B89A), sea spray (#E9EDEA), buoy red (#B2342B), shadow (#1B1F1E)."
• Riso print: "Palette inspired by two-color riso prints: fluorescent pink (#FF4F8B), midnight blue (#162B5A), paper (#F4F0E6), no other colors."
• Charcoal HUD: "Charcoal background (#0E0F0D), bone text (#E6E2D6), one accent in lime (#C7F25E)."
• Arte povera: "Earth tones only: hessian (#A89070), umber (#5C3F2A), unbleached linen (#E2DBC8), one accent in vermillion (#C24A2C)."

Notice that each of these is more specific than "earthy" or "muted". The model needs material anchors because materials are not in its training data as design choices. They are in its training data as descriptions of physical objects. When you cite "iron oxide", the model retrieves a different cluster than when you cite "rust accent".

For more on the Tailwind blue/purple/indigo signature and how to identify it across the web, see /blog/tailwind-blue-purple-gradient-ai-signature-2026.

2.2 Lever 2 — Impose Specific Typography

Inter is the default. It is the native font of LLMs the same way Helvetica was the native font of every corporate identity from 1995 to 2010. It is everywhere. When you do not specify a font, you get Inter. When you write "modern sans-serif", you also get Inter. When you write "clean and minimal", you get Inter. To break it, name two specific faces.

Pairs worth trying (and rotating: Anthropic's own prompt warns that Claude "still tend[s] to converge on common choices (Space Grotesk, for example) across generations"):

• Space Mono + Space Grotesk (terminal, technical, slightly off-kilter)
• IBM Plex Mono + IBM Plex Sans (institutional, brutalist-friendly)
• JetBrains Mono + Söhne (developer-tool, sharp)
• Fraunces + Söhne (editorial with personality)
• Migra + Reckless Neue (luxury editorial)
• Söhne + Domaine Display (high-end agency)
• Recoleta + Inter Tight (warm-tech, used by some good 2024-2026 products)
• Tiempos Headline + GT America (news outlet, serious)
• PP Editorial New + PP Neue Montreal (Pangram, contemporary editorial)

Two principles. First, name a body face and a display face. Do not let the model pick. Second, allow one mono face inside the UI for metadata, labels, code-like elements. The mono in the UI is one of the strongest single visual signals against slop because slop never includes it organically. For why Inter specifically flattens a brand, see /blog/typography-problem-why-inter-is-killing-your-brand.

2.3 Lever 3 — Explicitly Ban Patterns

This is the lever that surprises people. Negative constraints work, but only when they are extremely concrete. Vague negatives ("don't be generic") fail because "generic" is not in the model's vocabulary as an actionable concept. Specific negatives (specific class names, specific layout patterns) work because they collide with the model's pattern recognition at the right level.

A working ban list:

Forbidden:
- 3-equal-column card grid (grid-cols-3 with identical cards)
- rounded-2xl on every container
- shadow-md as default elevation
- gradient-to-br with from-purple-500 via-pink-500 to-red-500
- centered hero with screenshot floating to the right
- "Trusted by" bar with 5 gray logos
- Pricing with 3 tiers and a "Most Popular" middle column
- Footer with 4 equal columns labeled Product / Company / Resources / Legal
- Lucide check icons in feature lists
- Avatar circles in testimonials with name and role below
- Slate-500 secondary text on white background
- Inter as the only font
- Blob SVG decorations behind a hero
- Lottie animations of abstract shapes
- "Built with [stack logos]" row
- Number counters that animate on scroll

The point is not to forbid all of these and leave the model with nothing. The point is that, by naming each one, you force the model to retrieve and reject specific tokens. The next-best alternative is then less likely to be the default. Anthropic's guide recommends the same move under "Call out common defaults." The first ban on that list matters most: the three-card grid is so reflexive that it survives almost every vague instruction. We unpack why it persists, and what to replace it with, in /blog/card-grid-problem-why-3-identical-cards-kill-conversion.

2.4 Lever 4 — Impose a Visual Archetype

This is the single highest-leverage instruction. One word changes the entire generation: "brutalist", "Swiss", "Bauhaus", "atelier", "terminal", "art deco", "riso", "editorial", "newsprint".

Each of these archetypes maps to a coherent cluster in the model's representation. Once you commit the model to one, the rest of the output aligns. A "Bauhaus grid" prompt produces strict grids, primary colors, geometric headlines, German-tinged microcopy. A "terminal" prompt produces monospace, ASCII, scan lines, low-saturation greens or ambers. A "riso" prompt produces overprinted color, halftone textures, two-color palettes.

The trick is to commit. Half-archetypes ("a bit brutalist, but still clean and professional") give the model room to slide back to the centroid. Full archetypes leave less room. If you want a mostly brutalist output with editorial restraint, say so explicitly: "Brutalist as a base, with editorial restraint in typography hierarchy, never softened by rounded corners or shadows."

The reasoning is simple. Left alone, a model returns the generic SaaS layout, because that is the middle of what it has seen. A named archetype points it at a different, smaller part of what it has seen. It is the cheapest intervention you can make.

2.5 Lever 5 — Provide a Reference

References anchor the model in a specific cluster. They are most powerful when they are non-obvious. Generic references ("like Stripe") collapse the model toward what it thinks Stripe is, which is itself a centroid. Specific, weird references push it to a niche.

References worth trying:

• Are.na: triggers editorial-grid layouts, mono captions, restrained color.
• Craigslist + Space Mono: triggers raw, dense, information-first layouts with intentional ugliness as a feature.
• brutalist-website.com: triggers bordered everything, high-contrast type, minimal decoration.
• siteinspire.com (selected examples): editorial agency style.
• The New York Times homepage as designed in 2002: text-dense, hierarchical, no images-first.
• The Whole Earth Catalog: dense, captioned, mixed-typeface, manual feel.
• Eames office printed materials: restrained color, geometric, captioned diagrams.
• A 1972 Lufthansa brochure: Müller-Brockmann grid, sharp.
• The Wirecutter (in its newsprint era): comparative tables, footnote-heavy, mono accents.

You can paste a screenshot too, if your tool supports it (v0, Bolt and Lovable all accept images or design files). Visual references compound with text references: a screenshot of an Are.na block alongside "lay out this article like an Are.na block: small mono captions, large image, no shadow, hairline rules" gives the model both a picture and the rules to read it by.

2.6 Lever 6 — Impose Editorial Voice

If your prompt does not specify voice, the model returns a voice that is helpful, balanced, and forgettable. It will write headlines like "Build the future of work" and body copy like "Streamline your team's workflow with our intuitive platform." This is the verbal equivalent of Tailwind blue.

Voice constraints that work:

• Skeptical-technical: "Voice: skeptical and technical. Sentences are short and declarative. Hedge nothing. Make claims and back them with one number or one example. Never use 'empower', 'leverage', 'seamless', 'robust', 'harness', 'delve', 'tapestry'."
• Conversational: "Voice: a senior engineer talking to a peer at lunch. Use contractions. Drop articles where it sounds natural. Use 'we', not 'you'. Examples are concrete and slightly self-deprecating."
• Editorial: "Voice: a long-form magazine writer. Each paragraph carries one idea. No bullet lists for content (only for actual enumerations). Sentences vary in length. The piece is signed and dated."
• Wry / dry: "Voice: dry, mildly amused. Treat the reader as smart. Avoid exclamation marks entirely. One quiet joke per 500 words."

These voice instructions target the most identifiable LLM tells: balanced bothsidesism, tricolons, "in today's fast-paced world", abstract nouns ending in "-ization".

2.7 Lever 7 — Force Asymmetries

LLMs default to symmetry. Symmetric grids, equal columns, centered text, balanced compositions. This is partly a training-data artifact (most templates are symmetric) and partly a safety preference (symmetric layouts rarely fail). To break it:

Layout rules:
- Hero: 60/40 split. Title and intro on the left at 60%.
  Right 40% holds metadata: a small heading, a date, a number, an author block,
  a vertical line of mono labels.
- Section after hero: 30/70. A short marginalia note in mono on the left.
  The main body on the right.
- Image placements: never centered. Always either flush left or flush right with text wrap.
- Visual gravity: the page should not balance. The eye should be pulled to one side.
- Use one rotated element (a label rotated -90deg, a stamp rotated 4deg).

These are concrete spatial instructions, which leave the model little room to fall back on a centered layout. The asymmetry is itself a strong anti-slop signal because slop is, structurally, symmetric.

2.8 Lever 8 — Demand Rare Visual Artifacts

Slop has no texture, no marks, no traces of process. It is dimensionally flat. To add depth, request specific artifacts that are almost never present in default outputs:

• Corner brackets: small L-shaped marks at the corners of a region, in the style of a HUD or a film viewfinder.
• Scan lines: a fixed repeating-linear-gradient overlay at low opacity to evoke a CRT.
• ASCII rules: dividers made of =, -, *, or ┄ characters in mono font.
• Hairline tickers: a thin row at the top or bottom showing scrolling metadata: a date, a status, a version number, a count.
• Rotated labels: small text rotated 90 or -90 degrees in margins, like the labels on a vinyl sleeve.
• Monospace metadata: dates, versions, IDs, counts always set in mono.
• Low-opacity grid: a 12px or 16px background grid at 4% opacity, visible only in motion.
• Hand-drawn arrows: SVG arrows with wobble, used to point to a specific UI region.
• Stamp marks: rotated rectangles labeled DRAFT, TESTED 2026-04-12, or INTERNAL.
• Footnote markers: superscript numbers that link to a footnotes block.
• Tape marks: rotated rectangles of paper-tape texture, used as accents.
• Photo crops: tight asymmetric crops of a photo, with negative space on one side.

Requesting three or more of these artifacts in a single prompt asks for something that a default rendering never contains, which is why this lever tends to change the output most visibly.

The artifacts are cheap in code. Two of the most effective ones — corner brackets and scan lines — are pure CSS, no library, no SVG:

/* Corner brackets: four L-marks framing a region */
.bracketed {
  position: relative;
}
.bracketed::before,
.bracketed::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #c7f25e; /* lime accent, not Tailwind blue */
}
.bracketed::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracketed::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Scan lines: CRT overlay at low opacity */
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.06) 3px
  );
}

Paste that into the prompt as a "here is the artifact contract" block, and the model has exact selectors to use instead of inventing approximations.

2.9 Lever 9 — Close With Self-Audit

The single most underused lever. After the model produces an output, ask it to critique itself:

After producing the component, do not stop. Run a self-audit:
1. List 3 ways the output could still look AI-generated.
2. For each, propose a concrete fix (specific class change, specific element to add or remove).
3. Apply all 3 fixes.
4. Return the revised output, with a one-line note for each fix applied.

The audit step works because it puts the model in a critical mode. The model knows what AI slop looks like; it has seen the same web we have. It just does not produce slop-conscious output by default. Anthropic documents the same pattern in its prompting guide: "The most common chaining pattern is self-correction: generate a draft → have Claude review it against criteria → have Claude refine based on the review" (Claude prompting best practices).

The audit is not infallible: a model can misjudge what looks generic, and a "fix" can break something that worked. Read the second pass before you accept it.

3. The Master Anti-Slop System Prompt, Decoded

The TL;DR prompt at the top of this article is the master template. Below, every clause, decoded.

You are a senior frontend engineer and art director with a strong personal style.
You refuse to produce generic AI-generated SaaS layouts.

The first two lines set role and refusal. "Senior frontend engineer and art director" frames the persona to combine technical feasibility with visual judgment. "Strong personal style" is a soft instruction to commit to an identity. "Refuse to produce generic AI-generated SaaS layouts" is the explicit refusal: it names the default instead of hoping the model infers it, which is what Anthropic's guide means by calling out common defaults.

Hard constraints:
- Visual archetype: pick ONE among [Bauhaus grid, brutalist editorial, Swiss minimal,
  terminal/HUD, atelier/craft, art deco, riso print]. Commit to it for the whole output.

Lever 4. The list of seven archetypes is intentional: each maps to a clean cluster, none of them is "modern SaaS". Asking the model to pick one (rather than dictating) lets it choose the archetype best suited to the context, while still committing.

- Palette: do NOT use the default Tailwind blue/purple/indigo gradient family.
  Pick a palette anchored on ONE of: clay/ochre/terracotta, ink/bone/mustard,
  charcoal/lime, oxblood/cream, navy/copper, monochrome with one accent.

Lever 1. Negative ban on the default, then six positive options anchored on material descriptors.

- Typography: do NOT use Inter as your only font. Pair two faces from
  [Space Mono, Space Grotesk, IBM Plex Mono, IBM Plex Sans, Fraunces, Migra,
  Reckless, JetBrains Mono, Söhne, Domaine, Recoleta]. Use one mono in the UI.

Lever 2. Negative ban on Inter-only, positive list of pairs, mandatory mono in UI.

- Layout: forbid 3-equal-card grids, hero-with-floating-screenshot, gradient mesh hero,
  rounded-2xl on every container, generic shadow-md, blob SVG decorations, centered-everything.
  Use asymmetric 60/40 or 70/30 splits. Distribute visual weight unevenly.

Levers 3 and 7. Specific bans, then explicit asymmetry guidance.

- Detail layer: include at least 3 of [corner brackets, scan lines, ASCII rules,
  hairline tickers, rotated labels, monospace metadata, low-opacity grid, hand-drawn arrows].

Lever 8. Mandatory minimum of three rare visual artifacts.

- Voice: skeptical, technical, opinionated. No "empower", "leverage", "seamless",
  "robust", "harness", "delve", "tapestry", "revolutionize", "in today's fast-paced".

Lever 6. Voice direction plus explicit ban list of common LLM verbal tells.

- Microcopy: include at least one specific number, one date, one named tool.

A small but powerful sub-lever. Specific numbers, dates, and tool names break the abstraction that LLM output drifts toward by default. "Used by 2,500+ teams" is generic. "Reduced p95 latency from 380ms to 190ms after migrating to Bun on 2026-01-15" is specific.

Process:
1. Before writing code, describe the chosen archetype in 3 lines.
2. Describe palette and type in 3 lines, with hex codes.
3. Build the component.
4. After writing, audit yourself: list 3 ways the output could still look AI-generated.
5. Fix those 3 issues in a second pass before returning final output.

Lever 9. The five-step process forces the model into a more deliberate mode. The pre-build description (steps 1 and 2) anchors the model in the chosen identity before generation. The post-build audit (steps 4 and 5) catches drift.

Return: chosen archetype, palette, type, final component, self-audit, fixes applied.

A return contract. Models perform better when they know what shape the answer must take.

That is the entire prompt. About 1,870 characters, a few hundred tokens. Cheap to include, even on long sessions.

4. Specialized Prompts by Use Case

The master prompt is general. Specialized prompts add use-case constraints on top of the master. Each one names the default layout for its use case and offers structural alternatives.

4.1 Hero Section Anti-Slop

[Master prompt above]

Specific request: design a hero section for a product called <PRODUCT>.
The product does <ONE-SENTENCE DESCRIPTION>.

Hero rules:
- Forbid: centered hero, floating screenshot, gradient mesh, "Trusted by" logo bar,
  giant single-word headline, "Build the future of <X>" headline.
- Required: asymmetric layout (text on one side, sparse on the other),
  one piece of metadata in mono (date, version, location, count),
  one rare visual artifact (corner brackets OR rotated label OR ASCII rule).
- Headline: maximum 9 words, no abstract nouns, must contain one specific noun
  (e.g., "frontend code", not "experiences").
- Subheadline: one sentence, must include one number or named tool.
- CTA: one primary action, label in imperative form, no secondary "Learn more".

The kind of output this prompt asks for, for example:

• A 65/35 split with the title flush-left, a single mono line of metadata along the top edge ("v2.4 — released 2026-04-22 — 1,832 installs this week"), and one corner bracket in the right-side region.
• A full-width title spanning two lines, set in PP Editorial New, with a thin horizontal rule below labeled "Manifesto / 04.2026" and one CTA in oxblood on bone.
• A terminal-styled hero with scan lines, IBM Plex Mono throughout, and a blinking cursor at the end of the title.

For a catalog of hero compositions that are not the centered-with-floating-screenshot default, see /blog/hero-section-anti-slop-21-compositions-2026.

4.2 Pricing Page Anti-Slop

[Master prompt above]

Specific request: design a pricing page for <PRODUCT>.

Pricing rules:
- Forbid: 3-tier card layout with "Most Popular" middle column, gradient on the
  highlighted tier, monthly/yearly toggle as a pill switch, comparison table with
  green checkmarks.
- Required: one of these structural choices:
  (a) flat horizontal table — tiers as rows, features as columns, monospace numbers, hairlines instead of cards;
  (b) calculator-first — let the user pick parameters, show price computed below, no fixed tiers in view;
  (c) one-tier — argue against multi-tier in copy, show one price, explain rationale;
  (d) editorial — frame pricing as a manifesto, paragraphs first, table at the end.
- All prices in monospace. Currency symbol in a smaller weight than the number.
- Microcopy: one sentence per tier explaining trade-off. Avoid feature lists with checkmarks.

Each of these four structures is worked out in full in /blog/pricing-page-anti-slop-15-layouts-2026.

4.3 Footer Anti-Slop

[Master prompt above]

Specific request: design a footer.

Footer rules:
- Forbid: 4-column grid labeled Product / Company / Resources / Legal,
  social icon row, newsletter signup with a single email field and "Subscribe" button,
  oversized brand mark.
- Required: one of these structural choices:
  (a) marginalia footer — only metadata in mono: copyright, build hash, date, location, contact;
  (b) editorial footer — a paragraph signed by the team, one link list, no columns;
  (c) terminal footer — a fake terminal showing a `whoami` block with team info;
  (d) sitemap footer — every page on the site as a flat list, no hierarchy, no decoration.
- One asymmetric element. One mono block. Hairline rule above. Date stamp visible.

4.4 Blog / Article Layout Anti-Slop

[Master prompt above]

Specific request: design an article layout.

Article rules:
- Forbid: cover image full-width followed by centered title, "x min read" pill,
  author card with circular avatar and Twitter handle, social share floating sidebar,
  related posts grid below in 3 columns.
- Required: one structural choice:
  (a) editorial — title flush-left, byline in mono below, one column of body, marginalia in left margin for footnotes and pull quotes;
  (b) wide-margins — body column at 580px max, generous left margin holding metadata, dates, and section markers;
  (c) newsprint — multi-column body for desktop, narrow column for mobile, drop caps on first paragraph, hairline rules between sections.
- Body type at 18-20px, line-height 1.6 to 1.7. Body face MUST be a serif or a humanist sans.
  Inter and Geist are forbidden for body.
- One pull quote per ~800 words, set apart with a vertical rule and a different face.
- Footnotes block at the end. Real footnotes, not "References".

4.5 Dashboard Anti-Slop

[Master prompt above]

Specific request: design a dashboard.

Dashboard rules:
- Forbid: left sidebar 280px + top navbar with search center + 4 KPI cards with
  green/red percentage deltas + chart-60-list-40 + table with status pills.
- Required: one structural choice:
  (a) terminal dashboard — full-width mono layout, sections separated by ASCII rules,
      data in tables not cards, one tiny graph in mono characters;
  (b) editorial dashboard — one main metric framed like a magazine cover number,
      supporting metrics as a structured table below, chart inline at body width;
  (c) workshop dashboard — cards with hand-drawn-feel borders, mono labels, paper-color
      background, one accent color, status as text not pills.
- Forbid: shadcn DataTable defaults, recharts default colors, lucide-react default icons
  used unmodified.
- Numbers in mono. Currency in smaller weight than number. Deltas as raw arrows
  (^ or v) and not green/red Lucide arrows.

4.6 Marketing Site Anti-Slop

[Master prompt above]

Specific request: design a full marketing site (home + features + pricing + about + contact).

Site rules:
- Forbid: identical hero pattern across all 5 pages, identical section spacing,
  identical CTA component, identical footer, "Trusted by" repeating on every page.
- Required: each page has one distinct structural identity:
  - Home: editorial manifesto.
  - Features: a structured table of capabilities, no card grid.
  - Pricing: one of the structures from section 4.2.
  - About: timeline + team in marginalia, no avatar grid.
  - Contact: a printed form aesthetic, mono labels, hairline borders.
- Shared: palette, typography, voice. Distinct: layout DNA per page.

4.7 Portfolio Anti-Slop

[Master prompt above]

Specific request: design a portfolio site for a designer/developer/agency.

Portfolio rules:
- Forbid: "Hi, I'm <Name>" giant centered hero, horizontal scroll of project thumbnails,
  "Selected work" 2-3 column grid, "About" with photo on left and three paragraphs
  on right, "Let's work together" CTA at 80vh.
- Required: one structural identity:
  (a) catalog — a numbered, dense list of projects, mono metadata per row,
      an image preview as a small inline thumbnail, no hover lift;
  (b) ledger — projects displayed as a financial ledger: date, name, role, outcome,
      indexed by year, mono throughout;
  (c) zine — a cover, an editorial intro spread, projects as 2-page features
      with mixed layouts, a colophon page at the end.
- Photos: no soft shadows, no rounded-2xl. Either tight crops or contained in
  hairline-bordered frames.
- Microcopy: include real years and real client names placeholders if no real data.

5. Differences Across Models

Models differ, and each release changes them, so this article does not publish a per-model table of "signatures" we cannot back. What the vendors document is more useful than any such table:

• Anthropic names the defaults to call out for Claude: "Overused font families (Inter, Roboto, Arial, system fonts)," "Clichéd color schemes (particularly purple gradients on white backgrounds)," "Predictable layouts and component patterns." Its model-specific prompting pages also flag "design and frontend defaults" as one of the things that change between Claude releases (Claude prompting best practices).
• OpenAI's GPT-5 prompting guide recommends a stack for new frontends: "Next.js (TypeScript), React, HTML"; "Tailwind CSS, shadcn/ui, Radix Themes"; icons from "Material Symbols, Heroicons, Lucide"; "Motion" for animation; and fonts including "Inter, Geist, Mona Sans, IBM Plex Sans, Manrope" (OpenAI cookbook, now marked as archived). That is a description of the AI look, from a model maker, as a recommendation.

Practical consequences:

• Read your model's own prompting guide before you write constraints; it often tells you which defaults it reaches for.
• Re-check after a model update. A prompt tuned on one release can behave differently on the next.
• Test the same prompt on the models you actually use. The master prompt is a starting point; your audit tells you what to add.

For the broader picture of how these biases produce a recognizable AI-generated web, see /blog/ai-slop-2026-state-of-the-ai-generated-web.

6. How to Phrase Constraints Without Killing Creativity

Negative constraints feel safer because they are direct. They are also less effective than positive constraints. Here is the cognitive reason.

When you write "no blue", the model has to do two things at once: retrieve the concept of blue (so it can avoid it) and retrieve a different color (to use instead). The first step activates the blue cluster. The activation is a real signal in the model. The model is now in a state where blue is salient. It will then either avoid blue in the literal sense (and pick cyan, sky, indigo, navy — all neighbors) or it will pick a non-blue color that is the most generic non-blue color in its training data (gray, slate, neutral). Either way, you do not get a strong color identity.

When you write "earthy palette anchored on a tannery workshop: undyed leather, oxblood, bone, iron oxide", the model has to retrieve a different cluster entirely. The cluster activated is "tannery / craft / leather / earthy". This cluster is not a centroid. It is a niche. The output color identity is correspondingly distinct.

This generalizes. Compare:

• "Don't use Inter" vs "Pair Space Mono with Recoleta"
• "Avoid card grids" vs "Use a numbered list with mono metadata per row"
• "No gradient mesh" vs "Solid charcoal background with one corner bracket in lime"
• "Don't be generic" vs "Commit to a brutalist editorial style"
• "Avoid AI tells" vs "Include corner brackets, scan lines, mono metadata, and rotated labels"

In each pair, the right column produces stronger output. The left column produces a hedged, defensive output that often re-centers to a different default.

A practical rule: if you are about to write a negative constraint, ask whether you can add a positive replacement. If you can, do. If you cannot, keep the negative — it still helps — but recognize that you are leaving creative latitude that will be filled by the model's defaults.

The exception: extremely specific class-level negatives ("no rounded-2xl", "no shadow-md") work well because they collide with concrete tokens, not concept clusters. A specific class name is a token in the model's vocabulary; the model can suppress it directly.

7. The Iterative Anti-Slop Loop

A single prompt is rarely enough. The most reliable workflow is a loop of generate → audit → correct, run for three to five turns. Here is what one full session looks like.

flowchart LR
    A[Prompt with master template] --> B[First generation]
    B --> C{Audit by you}
    C -->|Issues found| D[Targeted correction prompt]
    D --> E[Second generation]
    E --> F{Audit by you}
    F -->|Issues found| G[Final correction prompt]
    G --> H[Third generation]
    H --> I{Audit by you}
    I -->|Clean| J[Ship / refine in code]
    I -->|Still issues| K[Discard, change archetype, restart]
    C -->|Clean| J
    F -->|Clean| J

An example session, to show the shape of the loop (illustrative, not a transcript):

Turn 1. Prompt: master template + "Build a hero for a developer-tools product called Quill that helps teams write better incident postmortems." Output: brutalist hero, IBM Plex Mono + IBM Plex Sans, charcoal background, lime accent, asymmetric 65/35, corner brackets, mono metadata. Strong start. Two issues: the title still uses an abstract noun ("clarity"), and the right-side region has a generic blob SVG.

Turn 2. Correction prompt: "The title uses an abstract noun. Rewrite using a concrete noun related to incidents — 'outages', 'pages', 'rollbacks'. The right-side region has a blob SVG. Replace with a small mono table showing three example incident IDs, dates, durations." Output: new title "Postmortems your team will actually re-read", right-side region replaced with a 3-row mono table with realistic incident IDs (INC-2026-0412-A) and durations. Cleaner. One issue: the CTA is "Get started for free", which is generic.

Turn 3. Correction prompt: "The CTA 'Get started for free' is generic. Replace with an imperative tied to the product (e.g., 'Open a postmortem') and a small mono label below saying 'No demo. Free for 1 team.'" Output: CTA is now "Open a postmortem". Mono label added. Done.

Three turns, each with one targeted correction. The cost is a few short prompts; the alternative is a designer starting from a blank file.

The audit at each turn is yours, not the model's (although the model's self-audit, lever 9, helps). The discipline is to be honest about what still looks AI-generated. If you feel it does, it does. The model will adjust if you tell it to.

8. For Claude Code, Cursor, Aider, and Codex

Most anti-slop advice focuses on visual output. Code agents — Claude Code, Cursor, Aider, Continue.dev, Codex — produce slop too, just at the structural level. Ask a code agent for a new frontend in an empty folder and the likely result is the stack OpenAI's guide recommends: a Next.js App Router project, with shadcn/ui, with Tailwind, with app/page.tsx containing a hero like the one described in section 1.3. The shadcn default is its own monoculture; we trace how it became the centroid in /blog/shadcn-ui-design-monoculture-2026.

To break the structural slop in code agents, you need a different prompt template, with different levers. Here is a template for it:

You are a senior frontend engineer. You build production-quality code that does not
look like it came out of a default Next.js + shadcn template.

Code constraints:
- Do not default to Next.js App Router unless explicitly required. Consider:
  Astro, Remix, Vite + React, SvelteKit, plain HTML+CSS for static, Eleventy.
- Do not default to Tailwind utility classes everywhere. Consider:
  CSS Modules, vanilla CSS with a small custom design-token file, Panda CSS,
  StyleX, or Tailwind with a heavy custom theme that overrides the defaults.
- Do not default to shadcn/ui components. If you need a button, write a button.
  If you need a dialog, consider a Radix primitive directly, styled by you.
- Do not import lucide-react reflexively. Consider hand-drawn SVG, geometric
  primitives, or text-based icons (e.g., "→" instead of an arrow component).
- Do not import recharts, react-table, react-hook-form unless the component
  warrants the weight. Prefer native HTML <table>, <form>, native validation.
- File structure: do not produce a flat /components folder with one file per
  component. Consider feature folders, co-located styles, route-colocated UI.

Design constraints (carry these in too):
[Insert master anti-slop prompt above]

Process:
1. Before writing code, propose the framework, styling layer, and component strategy.
2. Justify each choice in one sentence.
3. Write the code.
4. Self-audit: list 3 ways the code structure or styling still looks like a
   default scaffold. Fix them.

This template applies the same nine levers to code structure that the master prompt applies to visual style.

A few specific prompts for Claude Code and Cursor worth keeping:

Avoiding shadcn slop:

This project does not use shadcn/ui. We write our own primitives, with our own
styling, in CSS Modules. When you need a Button, Dialog, or Tooltip, build it
from Radix primitives styled with our tokens. Do not generate generic shadcn
boilerplate.

Avoiding Tailwind blue:

This project uses a custom Tailwind theme. The blue, indigo, purple, violet,
fuchsia, and pink scales are aliased to a single muted oxblood scale.
Do not use slate as your default neutral; use bone (#F1ECDD) for light
surfaces and graphite (#1F1B17) for dark surfaces. Do not generate shadow-md;
use a custom shadow defined in tokens called "shadow-paper".

Avoiding Next.js boilerplate:

This project is Astro 5 with React islands only on routes that need interactivity.
Do not propose Next.js App Router. Do not propose Server Components from React.
Do not propose tRPC. The data layer is plain `fetch` against a typed REST API.

For a deeper look at what the post-generation audit catches that the prompt missed, see /blog/de-ai-your-lovable-v0-bolt-site.

8.1 Where Each Tool Starts, and Where Your Constraints Go

Where each tool's starting point comes from, according to its documentation (read 17 October 2026):

The pattern: agents that work inside an existing repository inherit your conventions, slop or anti-slop. Builders that start from nothing bring their own starting point. When you bootstrap, fight the default scaffold explicitly, and put the constraint where the tool will read it every time. The builders one by one: v0, Bolt.new, Lovable.

9. 25 Ready-to-Use Prompts

This is a copy-paste table. Each row is a context. Each prompt is the master template, plus a context-specific specialization. Treat them as starting points and adjust them after your first audit.

10. A/B Before / After

Eight pairs. Each pair is the same brief written two ways: as most people write it, and with the anti-slop specification. "Typical default" describes what the bare brief usually yields; "Target output" describes what the anti-slop prompt asks for. They are illustrations of the method, not captured outputs, and the product details in them are invented placeholders.

10.1 SaaS landing — engineering team

Slop prompt: "Build a landing page for a SaaS that helps engineering teams ship faster."

Typical default: centered hero with "Ship faster. Build better." headline, gradient mesh background from indigo-500 via purple-500 to pink-500, two CTA buttons, "Trusted by 2,500+ teams" with five gray logos, three-column features section in grid-cols-3 with rounded-2xl cards and Lucide icons, three-tier pricing with the middle tier highlighted, footer with four columns. Inter throughout. Approximately one minute to write, approximately zero memorable elements.

Anti-slop prompt: master template + "Voice: skeptical. Archetype: terminal/HUD. Palette: charcoal/bone/lime. Type: IBM Plex Mono + IBM Plex Sans. Required artifacts: scan lines, mono metadata, ASCII rules. Microcopy: realistic incident IDs, build hashes."

Target output: charcoal background with a barely visible 16px grid; left side carries a flush-left headline ("Ship without re-reading the same incident report twice") in IBM Plex Sans Bold at 64px; right side carries a fake terminal block showing three real-looking incident IDs with statuses; a thin scan-line overlay across the whole hero; corner brackets at the four corners of the right-side terminal; one CTA labeled > open postmortem in lime; mono metadata strip at the top edge ("v2.4.1 — built 2026-04-22 — p95 318ms"); features section as a horizontal hairline-ruled table, not cards; pricing section as a single calculator (team size → price); footer as a whoami block.

10.2 Portfolio — independent designer

Slop prompt: "Create a portfolio website for a freelance designer."

Typical default: "Hi, I'm <Name>. I design beautiful experiences." giant centered text in text-7xl. Horizontal scroll of project thumbnails. About section with photo on left, three paragraphs on right. Selected work in grid-cols-3. "Let's work together" CTA at 80vh. Inter or Plus Jakarta Sans. Soft shadows. Rounded corners. Awwwards-circa-2022.

Anti-slop prompt: master template + "Voice: editorial. Archetype: catalog. Palette: bone/ink/mustard. Type: Migra + Söhne. Required: numbered project ledger, mono metadata per row, photos in hairline frames, colophon page."

Target output: hero is a single-column editorial intro at 580px max width, set in Migra Display, signed and dated at the end; below the intro, a numbered list of projects (01 to 14) with mono metadata (year, role, client, one-line outcome) on each row, no hover lift, no thumbnails inline; clicking a project opens a project page laid out as a printed editorial spread; an "Index" page lists every project flatly; a "Colophon" page at the end credits the typefaces, the writing tools, and the build stack.

10.3 Pricing page — productivity app

Slop prompt: "Design a pricing page for a productivity app."

Typical default: three columns. Free / Pro / Team. Middle one highlighted with gradient border and "Most Popular" ribbon. Each column has a price, a feature list with green check icons, a CTA. Below, a comparison table. Below that, an FAQ. Below that, a CTA banner. Generic.

Anti-slop prompt: master template + "Pricing rules: structural choice (a) — flat horizontal table with hairlines, mono numbers. No 'Most Popular' tier. Voice: skeptical. Each tier has a one-sentence trade-off explanation."

Target output: a single horizontal hairline-ruled table; rows are tiers (Solo, Studio, House), columns are constraints (price, max projects, max collaborators, support level); prices set in JetBrains Mono with the currency symbol in a smaller weight; below each price, one sentence explaining the trade-off ("Studio is for designers who already lost a Friday to a billing bug. Solo is for everyone else."); no checkmark icons; no comparison table after the main one; one short FAQ in mono; no CTA banner.

10.4 Hero section — mobile app

Slop prompt: "Make a hero section for a mobile habit-tracking app."

Typical default: centered hero with phone mockup floating to the right; gradient background; "Build better habits. One day at a time." headline; "Used by 1M+ people" social proof; App Store and Play Store badges; 80vh tall.

Anti-slop prompt: master template + "Hero rules: asymmetric 60/40, no floating phone mockup, no gradient. Phone displayed in a hairline frame, flush right. Headline maximum 9 words, must include a concrete noun. Microcopy: include real number, real date."

Target output: charcoal background, no gradient; left 60% holds the headline ("Two habits per week, tracked in one tap") in PP Neue Montreal at 56px; one mono line below the title ("Beta opened 2026-03-14 — 4,217 active users this week"); CTA "Open the beta" in vermilion; right 40% holds the phone screenshot inside a hairline frame, with one corner bracket at the top-right; no App Store badges; one rotated mono label on the right edge ("v0.9.4-beta").

10.5 Footer — devtools company

Slop prompt: "Design a footer for a devtools company."

Typical default: four columns labeled Product / Company / Resources / Legal; each with a short link list; social icons row (Twitter, LinkedIn, GitHub, YouTube); newsletter signup with one email field and "Subscribe" button; oversized brand mark; copyright line at the bottom.

Anti-slop prompt: master template + "Footer rules: terminal footer — fake terminal showing a whoami block with team info, location, build hash, last commit date. Hairline rule above. Mono throughout."

Target output: a terminal block reading something like:

$ whoami
team: 7 humans, 0 founders looking for an exit
location: Lyon, FR (UTC+2)
contact: hello@<domain>
last build: 2026.04.22 14:32 UTC
hash: a8f3c12

Below the terminal, a flat list of every page on the site as anchor links; one ASCII rule above the terminal; mono throughout; no social icons; no newsletter signup.

10.6 Dashboard — analytics tool

Slop prompt: "Build a dashboard for an analytics tool."

Typical default: left sidebar 280px, top navbar with search center, four KPI cards in a row at the top (each with a metric, a green-or-red percentage delta, a sparkline), a chart 60% / list 40% below, a table at the bottom with status pills. Inter, blue accent, soft shadows.

Anti-slop prompt: master template + "Dashboard rules: structural choice (a) — terminal dashboard, full-width mono, ASCII rules between sections, data in tables not cards, one mono character chart. Numbers in mono. No status pills."

Target output: full-width charcoal background; top section is a single-row mono table showing four metrics with raw arrow deltas (^ and v); ASCII rule below; middle section is a single graph rendered in mono characters (a sparkline made of ▁▂▃▄▅▆▇); ASCII rule below; bottom section is a real <table> with hairline borders, monospace numbers, status as plain text ("ok", "down", "slow"), no pills, no color-coded backgrounds.

10.7 Blog post — long-form essay

Slop prompt: "Lay out a blog post for a long-form essay about software craft."

Typical default: cover image full width; centered title in text-5xl; "x min read" pill; author card with circular avatar and Twitter handle; body in prose prose-slate at 720px max; floating share sidebar; related posts in grid-cols-3 at the bottom.

Anti-slop prompt: master template + "Article rules: editorial with marginalia. Body face Fraunces. Title flush-left. Footnotes in left margin. Drop cap on first paragraph. Real footnotes block at the end."

Target output: title flush-left at 56px in Fraunces; byline below in mono ("By <Author> — 2026.04.28 — Lyon, FR — 3,217 words"); no read-time pill; body column at 580px max with a 200px left margin holding marginalia (footnotes, dates, references); drop cap on first paragraph; pull quotes inline with vertical hairline rule; footnotes block at the end with real numbered footnotes; no related posts grid; one "Other essays" link list at the bottom.

10.8 Marketing site — small agency

Slop prompt: "Design a marketing site for a small creative agency."

Typical default: hero with "We help brands tell their story" centered, project carousel below, services grid in three columns, team grid with circular avatars and Twitter handles, contact form with name/email/message and a "Send message" button. Inter. Off-white background. Awwwards 2022.

Anti-slop prompt: master template + "Voice: opinionated. Archetype: brutalist editorial. Each page distinct DNA. Type: PP Editorial New + PP Neue Montreal. Palette: bone/ink/oxblood. Required: home as manifesto, services as a structured table, team as named entries with credentials and email addresses (no avatars), contact as a printed-form aesthetic."

Target output: home is a single-column manifesto signed and dated; services page is a hairline-ruled table with rows (services) and columns (deliverable, timeline, starting price); team page lists each member as a named entry with title, years of experience, three sentences of bio, and an email address — no avatars, no Twitter handles; contact page is a printed-form aesthetic with mono labels above each field, hairline-bordered inputs, and a submit button labeled "Send" in PP Neue Montreal; footer is a terminal-style whoami block.

11. Why Prompts Alone Aren't Enough

The nine levers above are the highest-leverage intervention you control before generation.

They are not sufficient.

Here is what they miss. A prompt encodes intent. A model approximates intent. The approximation has known failure modes:

• Class-name regression. The model commits to a non-Tailwind palette, then writes bg-blue-500 somewhere in a tooltip. You will not see it on the first scroll. It will ship.
• Subtle slop drift on long outputs. A long generation can drift: the early sections follow your prompt, later ones slide back toward defaults.
• Hidden Lucide imports. You banned Lucide. The model imports it for one icon ("just this one CheckCircle"). It is a regression.
• Hidden gradient residue. You banned gradients. The model writes a "subtle" gradient in a CSS module file. It compiles. It ships.
• Verbal slop in microcopy. You banned "leverage" and "seamless". The model writes "harness" and "intuitive" instead.
• Stack defaults reasserting themselves. You said no shadcn. The model writes a Button component that is structurally identical to a shadcn Button.

This is where post-generation auditing matters. Search the code for the class names you banned, read the rendered page, and run a scan: Sailop's free web scan checks a live page for eight common signatures (blue-family utilities, the blue-to-purple gradient, Inter or Geist as the page font, the three-column grid, fade-up motion, frosted glass, stock button copy, soft-shadow cards) and returns a fix kit. It catches residue the prompt could not eliminate.

For a deeper look at the specific tells that even a good prompt misses, see /blog/detect-ai-generated-site-30-seconds-21-signs-2026. For the workflow of de-AI-ing an output post-generation, see /blog/de-ai-your-lovable-v0-bolt-site.

The combination (a strong prompt template, an iterative loop, and a post-generation check) is what we recommend. The prompt does most of the work; the loop and the check catch what is left, and what is left is where the difference between "looks AI-generated" and "ships" lives.

12. Short Prompt vs Long Prompt: Is the Length Worth It?

A practical concern: the master prompt is about 1,870 characters, a few hundred tokens, and the specialized variants add more. Is it worth sending every time?

Three facts settle it. First, on the major model APIs, input tokens are billed at a lower rate than output tokens, and a few hundred tokens of instructions are small next to a full component's worth of output. Second, the prompt is the only part of the process that costs nothing to repeat: a design decision written once is applied to every generation. Third, the alternative is paying for the same corrections by hand, on every page.

So the useful question is not "is it too long?" but "does every line change the output?" If a clause never changes anything in your audits, cut it. If a default keeps coming back, add a line for it. The audit turns cost more than the prompt does; they are worth it on the pages that matter most.

13. FAQ

1. Can I use this with ChatGPT free?

Yes. Smaller and free-tier models follow long instruction lists less reliably than the largest ones, so keep the constraints you care about most near the top, and expect to run more audit turns. The method holds.

2. Does the prompt work with Claude Sonnet, or only Opus?

Both. Anthropic's frontend prompt is written for Claude in general, and its prompting guide notes where individual models differ, including "design and frontend defaults." Use the cheaper model for one-shot generations and the stronger one for sessions where you iterate on design-critical pages.

3. How do I stop Bolt or Lovable from giving me Tailwind blue?

Put the constraint where each tool reads it every time. In Bolt, that is project knowledge or an agents.md file (and a design system on Teams plans). In Lovable, answer its design questions instead of accepting the preselected options, and use project or workspace knowledge. Both tools keep their own instructions underneath yours, so audit the output and fix what returns; for larger projects, finish in Cursor or Claude Code under your master prompt.

4. Does the method change from one model family to another?

The levers are the same; the defaults they push against differ. Read the vendor's own prompting guide for the model you use, ban the specific defaults you see in your first audit by name, and keep those bans in your saved prompt.

5. What if my client wants the generic SaaS look?

Give it to them, but consciously. The point of this method is not "always be brutalist". The point is: choose. If your client wants the SaaS centroid, write a prompt that explicitly commits to "modern SaaS, Tailwind blue, Inter, three-card grid, soft shadows" and you will get a clean, intentional execution of that style. The slop is generated when the choice is unconscious, not when it is intentional.

6. Does the self-audit step actually work?

It is a documented pattern: Anthropic's prompting guide calls self-correction ("generate a draft → have Claude review it against criteria → have Claude refine based on the review") "the most common chaining pattern." It is not infallible: read the second pass, because a fix can break something that worked.

7. Why ban specific words like "delve" and "tapestry"?

These are LLM verbal tells. Researchers at Florida State University found a 6,697% increase in the use of "delves" in PubMed papers between 2020 and 2024, a figure the HTTP Archive's 2025 Web Almanac reports as an example of how models over-use certain words. Banning them is a cheap intervention.

8. Should I include hex codes in the prompt?

When you have a specific palette in mind, yes. Hex codes are concrete tokens; the model commits to them. When you want the model to choose, give it a material descriptor ("undyed leather, oxblood, bone") and let it pick. Both work.

9. Can I reuse the same prompt across my whole site?

Yes for tone and visual identity. You will want to specialize the structural rules per page (hero, pricing, dashboard) using the section 4 templates. The master prompt is the constant; the structural rules are the variable.

10. How long is too long for a prompt?

There is no fixed limit, but every clause competes for the model's attention. Keep the master prompt and its specialization as short as the audits allow, put the most important constraints first, and cut any line that never changes the output.

11. Does this work in non-English (French, German, etc.)?

Yes. Translate the prompt. The structural method is language-independent; a French version of the master prompt is in the annexes. Keep class names, font names and hex codes untranslated.

12. Does this work for non-web outputs (slides, posters, etc.)?

The method generalizes. For slides, replace "frontend engineer" with "art director" and add slide-specific structural constraints. For posters, replace with "graphic designer" and add print-specific constraints (paper, format, ink limits). The nine levers transfer.

13. Will the model push back if I forbid too many things?

Sometimes a model will note a tension between constraints and proceed. Push-back is most likely when the prompt contradicts itself ("brutalist but soft", "minimal but maximalist"); remove the contradiction rather than adding more rules.

14. Should I use this for non-public-facing internal tools too?

If the tool is used daily by your team, yes. Internal tools that look like the centroid produce the same fatigue as external sites. The method does not require visual sophistication from the user; it requires only that the output be distinct.

15. Where do I keep my master prompt?

In Claude Projects (per-project instructions), in a custom GPT (configuration), in a Gemini Gem, in a .cursor/rules file for Cursor, or in a CLAUDE.md file for Claude Code (Anthropic's own frontend prompt is meant to be appended "to your system prompt or CLAUDE.md file"). Keep it under version control. Iterate on it like you iterate on code.

14. Annexes

14.1 Master prompt — English (full)

You are a senior frontend engineer and art director with a strong personal style.
You refuse to produce generic AI-generated SaaS layouts.

Hard constraints:
- Visual archetype: pick ONE among [Bauhaus grid, brutalist editorial, Swiss minimal,
  terminal/HUD, atelier/craft, art deco, riso print]. Commit to it for the whole output.
- Palette: do NOT use the default Tailwind blue/purple/indigo gradient family.
  Pick a palette anchored on ONE of: clay/ochre/terracotta, ink/bone/mustard,
  charcoal/lime, oxblood/cream, navy/copper, monochrome with one accent.
- Typography: do NOT use Inter as your only font. Pair two faces from
  [Space Mono, Space Grotesk, IBM Plex Mono, IBM Plex Sans, Fraunces, Migra,
  Reckless, JetBrains Mono, Söhne, Domaine, Recoleta]. Use one mono in the UI.
- Layout: forbid 3-equal-card grids, hero-with-floating-screenshot, gradient mesh hero,
  rounded-2xl on every container, generic shadow-md, blob SVG decorations, centered-everything.
  Use asymmetric 60/40 or 70/30 splits. Distribute visual weight unevenly.
- Detail layer: include at least 3 of [corner brackets, scan lines, ASCII rules,
  hairline tickers, rotated labels, monospace metadata, low-opacity grid, hand-drawn arrows].
- Voice: skeptical, technical, opinionated. No "empower", "leverage", "seamless",
  "robust", "harness", "delve", "tapestry", "revolutionize", "in today's fast-paced".
- Microcopy: include at least one specific number, one date, one named tool.

Process:
1. Before writing code, describe the chosen archetype in 3 lines.
2. Describe palette and type in 3 lines, with hex codes.
3. Build the component.
4. After writing, audit yourself: list 3 ways the output could still look AI-generated.
5. Fix those 3 issues in a second pass before returning final output.

Return: chosen archetype, palette, type, final component, self-audit, fixes applied.

14.2 Master prompt — French (full)

Tu es un développeur front-end senior et un directeur artistique avec un style personnel fort.
Tu refuses de produire des mises en page SaaS génériques générées par IA.

Contraintes dures :
- Archétype visuel : choisis UN parmi [grille Bauhaus, brutalisme éditorial, suisse minimal,
  terminal/HUD, atelier/artisanat, art déco, impression riso]. Tiens-le sur tout le rendu.
- Palette : N'UTILISE PAS le bleu/violet/indigo Tailwind par défaut.
  Choisis une palette ancrée sur UN parmi : argile/ocre/terracotta, encre/os/moutarde,
  charbon/citron vert, sang-de-bœuf/crème, marine/cuivre, monochrome avec un accent.
- Typographie : N'UTILISE PAS Inter comme seule police. Associe deux fontes parmi
  [Space Mono, Space Grotesk, IBM Plex Mono, IBM Plex Sans, Fraunces, Migra,
  Reckless, JetBrains Mono, Söhne, Domaine, Recoleta]. Utilise une mono dans l'UI.
- Mise en page : interdiction des grilles de 3 cartes égales, du hero avec capture d'écran flottante,
  du mesh gradient en hero, du rounded-2xl sur tous les conteneurs, du shadow-md générique,
  des SVG en blob décoratifs, du tout-centré.
  Utilise des découpes asymétriques 60/40 ou 70/30. Répartis le poids visuel de manière inégale.
- Couche de détail : inclus au moins 3 de [crochets d'angle, scan lines, règles ASCII,
  bandeaux de métadonnées, étiquettes pivotées, métadonnées en mono, grille basse opacité,
  flèches dessinées à la main].
- Voix : sceptique, technique, opinionée. Pas de "empower", "leverage", "seamless",
  "robust", "harness", "delve", "tapestry", "revolutionize", "in today's fast-paced".
- Micro-copie : inclus au moins un chiffre précis, une date, un outil nommé.

Processus :
1. Avant d'écrire du code, décris l'archétype choisi en 3 lignes.
2. Décris la palette et la typographie en 3 lignes, avec des codes hexadécimaux.
3. Construis le composant.
4. Après l'écriture, auto-audite : liste 3 façons dont le rendu peut encore paraître généré par IA.
5. Corrige ces 3 problèmes en deuxième passe avant de renvoyer le rendu final.

Renvoie : archétype choisi, palette, typographie, composant final, auto-audit, corrections appliquées.

14.3 Visual archetype references

14.4 Glossary

• Archetype: a coherent visual identity cluster (brutalist, Swiss, terminal, etc.).
• ASCII rule: a horizontal divider made of repeated characters in mono font.
• Centroid: the statistical average of a model's training data; the default output without specific constraints.
• Corner bracket: an L-shaped mark at the corner of a region, typically in HUD or viewfinder aesthetics.
• Hairline rule: a horizontal line at 1px or less, often used as a divider in editorial layouts.
• Marginalia: small text in the margin of a page, used for footnotes, dates, references.
• Mono metadata: dates, versions, IDs, counts displayed in a monospace face.
• Riso print: a printing technique using two-color screens; produces fluorescent overprints and characteristic textures.
• Scan lines: a horizontal line overlay simulating a CRT display.
• Slop: AI-generated output that conforms to the centroid; structurally indistinguishable from other AI outputs.
• Self-correction: a prompting pattern where the model drafts, reviews its draft against criteria, then revises.

14.5 Quick checklist before shipping

• [ ] Did I commit to one visual archetype, end to end?
• [ ] Is the palette explicit, with hex codes?
• [ ] Did I specify two type faces, one of which is mono in the UI?
• [ ] Did I ban the specific patterns I want absent?
• [ ] Is my layout asymmetric somewhere?
• [ ] Did I include at least three rare visual artifacts?
• [ ] Did I specify voice and ban LLM verbal tells?
• [ ] Did the model self-audit and apply fixes?
• [ ] Did I run a post-generation scan to catch what the prompt missed?
• [ ] Did I review one full page, not just the hero, for drift?

Each unchecked box is a default left in place. Closing the last few usually takes minutes, not hours, and it is the highest-leverage editing pass you can run on AI-generated work.

The method is not new. The discipline of specifying intent precisely, then auditing the output, is older than software. What is new in 2026 is the cost of skipping it. Every week, more sites ship with the centroid signature. The web is being averaged in real time. The way out is not to stop using the tools. It is to use them with a strong hand. Tell the model what you want, in concrete terms. Forbid what you do not want, in concrete terms. Iterate. Audit. Ship.

The prompt at the top of this article is the place to start. Copy it. Modify it. Make it yours. The rest is practice.

15. The 60-Second Anti-Slop Audit (For Reviewing Your Own Output)

If you do not have a scanner, you can run a manual 60-second audit. The questions below catch the most common regressions. Use it before shipping.

• Color: Open the rendered output. Does any element use a Tailwind blue, indigo, violet, or purple? If yes, did you intend to? If not, replace.
• Font: Is Inter loaded? If yes, is it the only font, or is it paired with a display face and a mono? If alone, replace.
• Cards: Count the equal-card grids. If any section uses grid-cols-3 or grid-cols-4 with identical cards, ask whether that is the right structure or whether a table or list would carry the information better.
• Corners: Search the codebase for rounded-2xl, rounded-xl, rounded-3xl. Is there a default radius applied to almost every container? If yes, vary or reduce.
• Shadows: Search for shadow-md, shadow-lg, shadow-xl. Same question: is the elevation system varied or default?
• Gradients: Search for bg-gradient-. If present, is it intentional? If not, replace with solid.
• Icons: Are all icons from lucide-react? If yes, consider whether a non-icon-library mark would be more distinct in at least one prominent place.
• Hero centering: Is the hero centered with a floating mockup on the right? If yes, restructure.
• Pricing tiers: Three columns with a "Most Popular" middle tier? If yes, consider an alternative structure (table, calculator, single-tier, editorial).
• Footer: Four columns labeled Product / Company / Resources / Legal? If yes, consider a marginalia or terminal footer instead.
• Copy: Search for "empower", "leverage", "seamless", "robust", "harness", "delve", "tapestry". Replace each.
• Microcopy: Are there real numbers, dates, or named tools? If everything is generic, add specifics.
• Asymmetry: Is anything in the layout asymmetric? If everything is centered or equally divided, introduce one 60/40 or 70/30 split.
• Artifacts: Are there any rare visual artifacts (corner brackets, scan lines, mono metadata, ASCII rules)? If none, add at least three.
• Voice: Read three random paragraphs of body copy aloud. Do they sound like a person with opinions, or like a press release? If the latter, rewrite.

A clean output passes all 15 checks. Expect a first generation to fail several; each failure is a line to add to your saved prompt, so the next generation starts closer.

16. Anti-Slop Prompts for Specific LLM Surfaces

The master prompt works in any input field that accepts text. Where to put it, surface by surface:

16.1 Claude Projects (project instructions)

Use the master prompt verbatim in the project's instructions. Add: "These constraints apply to every message in this project unless explicitly relaxed by the user."

16.2 ChatGPT custom instructions

ChatGPT splits custom instructions into "What would you like ChatGPT to know about you?" and "How would you like ChatGPT to respond?". Put the role line ("You are a senior frontend engineer...") in the first slot. Put the constraints, process, and return contract in the second slot. The split lets you maintain other custom instructions without conflict.

16.3 ChatGPT custom GPT (configuration)

Paste the master prompt in the "Instructions" field. Add: "Conversation starters: Build a hero / Build a pricing page / Build a footer / Build a dashboard." This gives users one-click entry points that all carry the master prompt.

16.4 Gemini Gem

Gems accept long instructions. Paste the master prompt, and add by name any defaults you see in your first audit.

16.5 Cursor / Claude Code (rules file)

For Cursor, put the master prompt in a project rule under .cursor/rules (an .mdc file set to apply to every chat) or in AGENTS.md. For Claude Code, put it in CLAUDE.md at the repo root. Both tools load these files as context; Claude Code's documentation adds that it "treats them as context, not enforced configuration," which is why the audit still matters. Add a section "Code-specific constraints" with the section 8 code rules.

16.6 Aider (`.aider.conf.yml`)

Aider supports a system prompt via the conventions file. Paste the master prompt with the section 8 code rules. Aider's surgical-edit style means the prompt mainly governs new code, not existing code; this is fine.

16.7 v0

Every v0 chat starts from a Next.js app with shadcn/ui and Tailwind, and v0's docs warn it "may struggle" with customized shadcn components. Use custom instructions for the master prompt, and Design Systems 2.0 for anything you want applied every time. Audit, then refactor what returns.

16.8 Bolt.new and Lovable

Bolt: project knowledge or an agents.md file, plus a design system on Teams plans. Lovable: answer its design questions with your choices, and keep the master prompt in project or workspace knowledge. Both tools keep their own instructions underneath yours; audit and refactor.

16.9 Replit Agent

Paste the master prompt as the first message, or use Replit's agent customization so it applies to the project. Iterate.

16.10 Continue

Continue supports rules in its configuration. Add the master prompt as a rule, and the section 8 code rules per project.

17. The Most Common Mistakes When Writing Anti-Slop Prompts

Even with the master template, teams make a small number of recurring mistakes. Watch for these.

Mistake 1: Picking too many archetypes. "Brutalist editorial with Swiss minimal influences and a touch of HUD" collapses into incoherence. Pick one. Hold it.

Mistake 2: Specifying a palette without specifying a typography pairing. Color without type produces a half-distinct output. The output looks like it has a different palette but feels the same as default because the type carries half the identity.

Mistake 3: Banning patterns without proposing alternatives. "No 3-card grid" without "use a numbered list with mono metadata" leaves the model to invent an alternative, which often defaults to a 4-card grid or a 2-card grid. Be specific.

Mistake 4: Skipping the self-audit step to save tokens. The audit step is the cheapest, highest-leverage component. Skipping it loses more value than it saves.

Mistake 5: Treating the prompt as final on the first try. The prompt is a living document. After you run it 10 or 20 times, you will see patterns of failure specific to your domain. Update the prompt to address them. Each iteration of the prompt compounds.

Mistake 6: Letting the model pick the archetype every time. Letting the model pick is fine for variety, but if your brand requires consistency across pages, fix the archetype upfront. Otherwise you get a brutalist hero, an editorial pricing page, and a terminal footer in the same site.

Mistake 7: Using the master prompt for non-design tasks. The master prompt is calibrated for visual UI generation. For prose, copy, code architecture, or technical writing, you need different prompts with different levers. Do not assume one prompt fits all.

Mistake 8: Forgetting to update the verbal ban list. New buzzwords emerge constantly. "Empower" is old. "Effortless", "intelligent automation", "AI-native", "context-aware" are newer. Refresh your ban list every quarter.

Mistake 9: Not reading the model's pre-build description. If you skip ahead to the code, you miss the moment where the model commits to an archetype, palette, and type. Reading those three sections lets you intercept misinterpretations before they propagate into 1,000 lines of UI.

Mistake 10: Treating the post-generation check as optional. The prompt does most of the work. The audit, by hand or with a scan, catches the residue. Both are needed for shippable output.

Revision note

Updated on 17 October 2026. The earlier version framed this manual as the result of a study: five prompts sent "roughly 1,200 times" to nine models, an archetype frequency chart, a per-model signature table, before-and-after uniqueness scores, a cost table with slop rates, self-audit success rates and ten "field notes" from the batch. We hold no record of that study, so all of those figures and notes have been removed. The levers, the master prompt and the specialized prompts remain, now supported by Anthropic's and OpenAI's own published guidance. The before-and-after pairs are labeled as illustrations, and the master prompt's length is corrected to about 1,870 characters.

*Cross-references: State of the AI-generated web 2026 — De-AI your Lovable / v0 / Bolt site — The Tailwind blue / purple gradient AI signature — Detect an AI-generated site in 30 seconds: 21 signs.*