What Are the Named AI‑Slop Anti‑Patterns in Hallmark? A Complete Reference Guide

Hallmark defines 50+ named UI anti‑patterns that signal AI‑generated "slop," categorized by severity from Critical to Minor, with concrete fixes for each.

The open‑source Hallmark project by Nutlope encodes a systematic catalogue of design clichés that betray machine‑generated interfaces. These named AI‑slop anti‑patterns live in skills/hallmark/references/anti-patterns.md and power the hallmark audit command, which scans HTML/CSS for slop signals before code ships.

---

How Anti‑Patterns Are Organized

Hallmark sorts anti‑patterns into three severity tiers:

• Critical — Ships as obvious slop; immediate fix required
• Major — Looks AI‑generated to trained eyes
• Minor — Small‑taste issues that erode polish

Each entry includes the pattern name, why it reads as artificial, and a concrete remediation. Below is the full taxonomy as implemented in the Hallmark source.

---

Critical Anti‑Patterns That Ship as Slop

These 16 patterns are the strongest signals of AI generation. The hallmark audit verb flags any occurrence with highest priority.

Visual Gradient & Color Offenders

Pattern	The Slop	The Fix
The purple‑gradient hero	Purple‑to‑blue/pink gradient with centered white text — the single most recognized AI aesthetic	Single anchor hue; no gradient backgrounds on heroes
The gradient headline	background-clip: text with purple‑to‑pink or blue‑to‑cyan gradients	Solid ink; use weight, italics, or display typeface
Aurora‑blob background	Flowing organic mesh blobs (purple‑to‑pink‑to‑cyan)	Solid surface or subtle two‑stop gradient with low‑opacity grain
Pure black / pure white	Flat #000000 or #ffffff surfaces	Tint backgrounds toward the anchor hue per color.md

Layout & Structure Templates

Pattern	The Slop	The Fix
The 3‑column feature grid	Three equal‑width columns, each icon‑above‑heading‑above‑body	Break the grid: vary widths, heights, move icons inline, or drop a card
Card‑in‑card	Unnecessary nesting without semantic purpose	Single containment layer; remove inner card
The side‑stripe card	Thick colored border on one edge (usually left)	Hairline border all around or subtle accent square
Full‑viewport centred hero	min-height: 100vh with short sentence and large CTA	Height matches content; bias layout left/right; add more copy

Typography Defaults

Pattern	The Slop	The Fix
Inter‑everywhere	Same font (Inter, Roboto, Open Sans) for display and body	Pair distinctive display face with refined body face per typography.md

Navigation & Footer Templates

Pattern	The Slop	The Fix
The AI nav	Left wordmark, center links, right CTA, full‑width sticky bar	Choose navigation style from component‑cookbook.md matching the genre
The AI footer	Four‑column link groups with social‑icon row	Pick footer variant from component‑cookbook.md appropriate to purpose

Decoration & Ornament

Pattern	The Slop	The Fix
Floating‑orb decoration	Generic 3‑D spheres or blurred circles behind hero text	Remove ornament; focus on typographic hierarchy

Workflow & Macrostructure

Pattern	The Slop	The Fix
Default‑attractor sameness	Same macrostructure across consecutive Hallmark outputs	Choose different macrostructure per page per macrostructures.md
Specimen fall‑through	Applying Specimen macrostructure to non‑editorial briefs	Use Specimen only when brief explicitly requests editorial/type‑foundry feel

Performance & Accessibility

Pattern	The Slop	The Fix
Sound‑on autoplay	Hero videos playing sound	Always include muted, autoplay, loop, playsinline
Lazy‑loaded LCP	Lazy‑loading the Largest Contentful Paint element	Use fetchpriority="high" and preload metadata for LCP assets

---

Major Anti‑Patterns That Look AI‑Generated

These 18 patterns signal template‑driven design to discerning viewers.

Motion & Interaction

• Bounce and elastic easing — Over‑the‑top bounce/wobble easings are outdated. Fix: Apply exponential ease‑out per motion.md.
• Hover‑only affordances — Break accessibility for touch users. Fix: Provide focus states and tap‑friendly equivalents.
• Animate‑on‑scroll everywhere — Universal scroll‑triggered fades prevent the page from settling. Fix: Single orchestrated entrance; remainder static.

Layout & Alignment

• Centred everything — Uniform center‑alignment feels templated. Fix: Bias layout left or right; introduce asymmetry.

Typography & Content

• Italic headers — Italicized emphasis in headings signals faux‑editorial intent. Fix: Keep headings roman; use weight, color, or underline.
• Eyebrow on every section — Repeating uppercase mono‑cap labels creates ornamental noise. Fix: Use only when genuinely required (e.g., numbering).
• Invented metrics — Fabricated numbers ("10× faster") appear dishonest. Fix: Replace with placeholders, ask user, or redesign macrostructure.
• Placeholder names / Startup‑cliché product names — Betrays unreviewed generation. Fix: Use real names or clear [placeholder] markers.

Components & Surfaces

• Shadow‑glow on dark — Soft colored halo shadows look artificial. Fix: Use elevation via lightness instead.
• Icon‑tile feature card — Universal icon‑top‑heading‑copy tile. Fix: Vary sizes, alignments, or drop the icon.
• Glassmorphism without purpose — Unnecessary frosted‑glass panels. Fix: Use only when conveying depth and context.

Assets & Icons

• Mismatched icon sets — Mixing Material Icons, Heroicons, Lucide. Fix: Choose one library per project per assets.md.
• AI‑illustration look — Smooth‑mesh‑blob characters, generic stock poses. Fix: Hand‑build in CSS/SVG or use curated assets.
• Generic emoji as feature icon — Typographic shortcuts lacking coherence. Fix: Use proper icon library or omit.
• Re‑drawn UI chrome — Fake browser bars, phone frames, IDE windows. Fix: Wrap real screenshots in <figure> with minimal borders.

Technical Implementation

• Tabular data without tabular‑nums — Proportional figures misalign numeric columns. Fix: Apply font‑variant‑numeric: tabular‑nums.
• Mid‑render token improvisation — Inline color values or font families bypass tokens. Fix: Reference all via tokens (var(--color‑…)).
• Wrap‑to‑two‑lines clickable text — Buttons/links breaking onto two lines. Fix: Shorten labels, white‑space: nowrap, or hide non‑essentials.
• Lottie shortcut — Using Lottie for CSS‑able animation. Fix: Implement with CSS or hand‑built SVG.
• Three.js for a still object — Static 3D object with heavy bundle, no interactivity. Fix: Replace with photograph or static SVG.

---

Minor Anti‑Patterns: Small‑Taste Issues

The Minor tier in anti‑patterns.md catalogs polish gaps that accumulate into slop perception:

• Straight quotes → curly quotes
• Double‑hyphen dashes → em dash
• Three periods → ellipsis
• z-index: 9999 → sensible scale
• Uniform section padding → varied rhythm
• 100vw widths → account for scrollbar

These are quick wins that separate careful craft from careless generation.

---

Code Examples: Before and After

Fixing the Purple‑Gradient Hero (Critical)

<!-- Slop: Purple-gradient hero -->
<section class="hero">
  <h1 style="background: linear-gradient(to right, #8a2be2, #00f);">
    Welcome
  </h1>
</section>

<!-- Fixed: Solid anchor hue -->
<section class="hero">
  <h1 class="hero-title">Welcome</h1>
</section>

<style>
.hero { background: var(--color-surface); padding: 4rem; }
.hero-title { color: var(--color-accent); font-weight: 700; }
</style>

Fixing Inter‑Everywhere (Critical)

<!-- Slop: Single font for all -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700" rel="stylesheet">
<h1 style="font-family: 'Inter', sans-serif;">Title</h1>
<p style="font-family: 'Inter', sans-serif;">Body copy.</p>

<!-- Fixed: Display/body pair -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Roboto:wght@400" rel="stylesheet">
<h1 class="display">Title</h1>
<p class="body">Body copy.</p>

<style>
:root {
  --font-display: 'Inter', sans-serif;
  --font-body: 'Roboto', sans-serif;
}
.display { font-family: var(--font-display); font-weight: 700; }
.body { font-family: var(--font-body); font-weight: 400; }
</style>

Fixing Re‑drawn UI Chrome (Major)

<!-- Slop: Fake browser chrome -->
<div class="browser-mock">
  <div class="chrome">
    <span class="dot red"></span>
    <span class="dot yellow"></span>
    <span class="dot green"></span>
    <input type="text" value="https://example.com" />
  </div>
  <img src="screenshot.png" alt="App screenshot">
</div>

<!-- Fixed: Real screenshot with minimal presentation -->
<figure class="screenshot">
  <img src="screenshot.png" alt="App screenshot">
</figure>

---

How Hallmark Uses These Anti‑Patterns

The hallmark audit verb defined in skills/hallmark/SKILL.md scans target HTML/CSS against this catalogue. The process:

1. Pattern detection — Match structural, visual, and code signatures
2. Severity assignment — Critical/Major/Minor per anti‑patterns.md
3. Remediation suggestion — Concrete fix from the reference table
4. Pre‑emit gate — Block generation until Critical issues resolve

The 58‑gate checklist in slop‑test.md cross‑references these patterns for comprehensive quality control.

---

Key Source Files

File	Purpose
skills/hallmark/references/anti‑patterns.md	Central catalogue of all named patterns with descriptions and fixes
skills/hallmark/references/slop‑test.md	58‑gate post‑generation quality checklist
skills/hallmark/SKILL.md	Skill definition including hallmark audit verb implementation
skills/hallmark/references/typography.md	Token system enforcing anti‑pattern rules
skills/hallmark/references/color.md	Color tokens with "no pure black/white" enforcement
skills/hallmark/references/macrostructures.md	21 named layouts; prevents "Specimen fall‑through"

---

Summary

• Hallmark codifies 50+ named AI‑slop anti‑patterns in anti‑patterns.md, the definitive reference for detecting machine‑generated UI.
• Severity tiers (Critical/Major/Minor) prioritize fixes and gate releases.
• Each pattern includes a descriptive name, explanation of artificiality, and concrete remediation.
• The hallmark audit verb automates detection against this catalogue before code ships.
• Cross‑reference files (typography.md, color.md, macrostructures.md) provide the token systems that enforce anti‑pattern compliance.

---

Frequently Asked Questions

What makes an anti‑pattern "Critical" versus "Major"?

Critical patterns ship as obvious slop — they are immediate tells like purple‑gradient heroes or Inter‑everywhere typography. Major patterns look AI‑generated to trained eyes but may pass casual inspection, such as centered‑everything layouts or hover‑only affordances. The distinction determines whether hallmark audit blocks generation or merely warns.

How does Hallmark detect these patterns programmatically?

The hallmark audit verb scans HTML/CSS for structural signatures (e.g., linear-gradient with specific hue ranges, font-family declarations matching default LLM choices, min-height: 100vh with centered single‑line content) and reports matches with severity and fix guidance from anti‑patterns.md.

Can I contribute new anti‑patterns to Hallmark?

Yes. The repository welcomes additions to skills/hallmark/references/anti‑patterns.md following the established format: pattern name, "why it reads as AI‑generated," and concrete fix. Proposals should include real‑world examples from generated code and reference the appropriate token system (color.md, typography.md, etc.) for remediation.

What's the difference between anti‑patterns and the slop‑test checklist?

Anti‑patterns are the named design clichés — the "what" and "why." The 58‑gate checklist in slop‑test.md is the operational QA流程 — the "how" of verification. Many gates directly test for specific anti‑patterns, while others cover performance, accessibility, and semantic correctness not tied to visual slop signals.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}