Anti-Slop Brand Contracts: Encoding Taste as Eval Criteria

Most agent-generated UI fails the brand in predictable ways. It reaches for purple gradients, floating glass cards, pill clusters, emoji as decoration, and headlines that could sit on any SaaS homepage after you remove the logo. Designers call that slop. Models produce it because those patterns are common, rewarded in generic demos, and cheap to sample when the brief is soft.

Teams try to fix slop with louder taste language: “make it premium,” “more editorial,” “less generic.” Soft language does not evaluate. An agent can claim success against an adjective. It cannot claim success against a contract that says: no purple-to-indigo hero gradients; no inset hero media cards on landing pages; semantic tokens only; maximum radius 8px; one composition in the first viewport; brand name at hero scale. Those statements are observable. Observable statements become eval criteria.

A brand contract for agents is the written and executable subset of taste: what must be true, what must never appear, which examples define the positive target, and which commands prove the cheap failures are absent. The remaining judgments — whether the hierarchy feels right, whether the copy earns trust — stay with humans. This article shows how to encode the first set so agent loops fail closed on slop before review.

Layer one is identity in concrete terms: name, audience, metaphor, and the few sentences that distinguish the brand from its category. Keep it short. Identity that reads like a mood board will be ignored under tool pressure. Layer two is the anti-slop ban list — explicit negatives for the failure modes you keep seeing. Layer three is positive exemplars: owned screenshots or code excerpts with captions that say what behavior to copy. Layer four is executable checks: lint, token audit, route probes, visual diff thresholds. Layer five is the human rubric for what the scripts cannot score.

If you only ship layer one, agents invent the rest. If you only ship bans without exemplars, agents avoid the banned patterns and invent new generic ones. If you only ship scripts, you catch token and a11y failures but miss layout soup. The stack is the point. The diagram below is the shape this school uses when writing DESIGN.md anti-pattern rules and the verify scripts that back them.

• Write bans as observables (“no purple gradient heroes”), not moods (“avoid looking AI”).
• Pair every ban with at least one positive example the agent can open.
• Attach a command to every ban that can be checked automatically.
• Keep the human rubric short enough to run in a five-minute review.

A useful ban names the artifact, the tell, and why it fails the brand. Useless: “Don’t make it look like Midjourney.” Useful: “Landing heroes must be full-bleed photographic or product planes; do not use inset rounded media cards, tiled collages, or floating screenshot stacks in the first viewport.” The second version can be checked by a reviewer — and often by a script that inspects the hero section’s DOM structure against allowed patterns.

Cluster bans by failure family so agents can load them as a checklist. Visual defaults: purple/indigo gradients, glow, blob backgrounds, emoji ornament. Layout defaults: uniform card grids, nested cards, stat strips in the hero, multi-CTA chaos. Motion defaults: decorative parallax, endless shimmer. Voice defaults: hype adjectives, fake social proof, urgency timers. Your brand will not need every family; it needs the ones your agents actually produce. Mine the last ten rejected diffs and write bans from evidence, not from the internet’s list of AI clichés.

Put the bans next to the tokens in DESIGN.md (or a dedicated `BRAND_CONTRACT.md` linked from AGENTS.md). Agents follow files that sit in the always-loaded or task-start path. A Notion page nobody pastes into the session is not a contract.

## Anti-Slop Contract (eval-ready)

### Visual bans
- No purple-to-indigo gradient themes on product or marketing surfaces.
- No decorative glow, blur blobs, or mesh gradients as the primary background idea.
- No emoji in UI chrome, empty states, or marketing headlines.

### Layout bans
- First viewport: brand, one headline, one supporting sentence, one CTA group, one dominant image.
- No cards in the hero. Cards only when they contain a user interaction.
- No inset hero media, side-panel heroes, or floating screenshot collages on landing pages.

### Token bans
- Semantic Tailwind tokens only (`bg-primary`, `text-muted-foreground`, `border`).
- No raw hex, no arbitrary palette colors (`bg-purple-500`, `text-[#4F46E5]`) in product UI.

### Voice bans
- No hype (“revolutionary”, “seamless”, “next-gen”) without a concrete mechanism in the same sentence.
- No invented testimonials, member counts, or partner logos.

Eval criteria are the machine-readable twin of the ban list. For each ban, define: id, severity, detection method, and pass condition. Severity keeps humans honest — P0 means the agent may not stop; P2 means log and continue to human review. Detection method is either static (regex/AST over the diff), rendered (DOM probe / screenshot hash), or rubric (LLM-as-judge only when you accept the variance and still require a human gate).

Prefer static and rendered checks for slop. Regex for `purple-`, `#4F46E5`, and `from-violet` is crude and effective as a tripwire. AST checks catch `outline-none` without replacement focus styles. DOM probes assert the hero contains one `h1` and no `.grid` of three equal promo cards before the fold. Visual diff against a golden hero is powerful when the layout is stable and brittle when content is still moving — use it on locked templates, not on every article page.

LLM-as-judge rubrics belong at the end of the stack, never as the only gate. If you use one, constrain it: fixed rubric bullets, reference images on disk, require citations to observable DOM or screenshot evidence, and still fail closed on the static bans regardless of the judge’s prose. Taste language in a judge prompt without tripwires is how slop re-enters through confident narration.

import { describe, expect, it } from "vitest"
import { readFileSync } from "node:fs"

const HERO = "app/page.tsx"
const SLOP = /bg-purple-|from-violet|to-indigo|#[4F46E5]|gradient-to-[trbl]/i

describe("brand contract — home hero", () => {
  it("does not use purple-gradient slop classes", () => {
    const src = readFileSync(HERO, "utf8")
    expect(src).not.toMatch(SLOP)
  })

  it("uses semantic primary CTA, not raw palette", () => {
    const src = readFileSync(HERO, "utf8")
    expect(src).toMatch(/bg-primary|variant="default"/)
  })
})

A contract that is not on the generate → check → revise path will rot. Load the ban list and exemplars at task start (DESIGN.md / skill). Run static evals after each relevant write (hooks or a required skill step). Run rendered evals before the agent may stop. Require the findings file to list criterion ids, not paragraphs of self-congratulation. Then — and only then — open human critique with the rubric for originality, hierarchy, and voice.

This pairs cleanly with hooks-as-gates: the brand contract defines what to measure; hooks decide whether the session may end. It also pairs with visual QA packets: screenshots become evidence for rubric items the scripts cannot score. Keep one source of truth for inventory proof and testimonials so agents cannot invent social proof to fill empty marketing sections — this school keeps curriculum counts in `content/site.ts` for that reason.

When a criterion fails repeatedly, do not only patch the prompt. Add an exemplar that shows the corrected pattern, tighten the static check, and note the failure in the skill’s “common mistakes” section. Contracts improve the way design systems improve: from production evidence, not from brainstorming better adjectives.

• Task start: identity + bans + exemplar paths in context.
• After write: static slop and token tripwires.
• Before stop: rendered probes + a11y for touched routes.
• Human review: originality, hierarchy, density, voice — with the eval report open.

Encoding taste is not the claim that taste is fully automatable. It is the claim that the expensive part of review should not be rediscovering purple buttons. Hierarchy, pacing, whether the brand feels present after you remove the nav, whether a photograph is doing real atmospheric work — those stay human. The contract’s job is to make that human pass shorter and more honest.

Publish the contract where teammates and agents both see it. Version it when you retire a ban or raise a severity. Treat eval flakes as product bugs: a flaky visual threshold that everyone ignores is an open gate. Prefer fewer P0 checks that always run over a museum of aspirational criteria nobody enforces.

If you need a one-line studio standard, use this: no agent output is review-ready until the brand contract’s P0 evals are green, and no P0 is green because the model said so — only because a command or a probe said so.