How Hallmark Prevents AI Code Generation from Looking Like "AI-Slop": A Technical Deep Dive

Hallmark prevents AI-slop by enforcing a strict, multi-layered design discipline that runs automated checks before any code is emitted, including a 57-gate slop test that aborts builds if visual clichés or structural errors are detected.

The open-source Hallmark project by Nutlope tackles the "AI-slop" problem—generic, repetitive, and visually stale code that typical AI generators produce—by embedding design constraints directly into its skill architecture. Rather than relying on post-hoc review, Hallmark treats quality as a pipeline gate that must clear before any artifact ships. The system combines pre-flight analysis, token discipline, and post-generation testing to ensure outputs feel handcrafted rather than mass-produced.

The 57-Gate Slop Test: Hallmark's Quality Checkpoint

At the heart of Hallmark's defense against AI-slop is a hard-coded checklist of 57 gates defined in [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). This test runs automatically after the build phase; any failure aborts the emit and forces a rewrite.

Visual and Structural Gates

The slop test enforces rigorous visual standards that catch common AI tells:

• Typography purity (Gate 38a): Headings must remain roman; the test bans font-style: italic on any heading element, as italic headers are a tell-tale AI pattern
• Responsive non-negotiables (Gates 34, 49): Every page must render at four breakpoints with no horizontal scroll (overflow-x: clip) and clickable text must never wrap (white-space: nowrap)
• No re-drawn UI chrome (Gate 47): The system scans for <div> or <svg> elements mimicking browser, phone, or IDE chrome, rejecting them in favor of real screenshots

Content Integrity Gates

Hallmark prevents factual slop through copy verification:

• Honest copy (Gate 46): Quantitative claims like "10× faster" or fabricated metrics are auto-rejected, preventing the placeholder text common in AI outputs
• Locked token discipline: All colors must reference design tokens; raw hex or OKLCH values trigger a failure

Pre-Emit Self-Critique: The Six-Axis Score

Before any file ships, Hallmark appends a pre-emit critique comment that scores the output across six axes: Polish (P), Harmony (H), Expression (E), Structure (S), Rhythm (R), and Voice (V). If any axis falls below 3, the system forces a rewrite.

According to [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (§ 46), this stamp appears at the top of every generated artifact:

/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */

Macrostructure Diversification and Theme Rotation

Hallmark combats the "same-page" feeling through enforced structural variety.

Preventing Repetitive Layouts

Each generated page must use a different named macrostructure than the previous Hallmark output in the same repository. The system maintains a history in .hallmark/log.json and inspects the macrostructure stamp (/* Hallmark · macrostructure: <name> … */) to ensure diversification across the 21 available layouts defined in [macrostructures.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md).

The Three-Axis Theme Rule

Even when macrostructures change, themes must differ on at least one of three axes defined in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (§ 74-80):

1. Paper band (background treatment)
2. Display style (layout density)
3. Accent hue (primary color)

The theme values are defined in site/css/tokens.css and compared against the last entry in .hallmark/log.json to prevent adjacent similarity.

Design Token Discipline and Typography Purity

Hallmark enforces locked token discipline—all colors and font families must reference CSS variables defined in site/css/tokens.css. Raw values are forbidden.

For example, a compliant button uses only token references:

.btn {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
}

This ensures visual consistency and prevents the arbitrary value spaghetti typical of unconstrained AI generation.

Component-Scope 8-State Discipline

Every shipped component must include styles for all eight interaction states: default, hover, focus, active, disabled, loading, error, and success. As implemented in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (§ 80-81), the system generates a mandatory demo wrapper that exercises each state:

<div class="preview">
  <button class="btn">default</button>
  <button class="btn is-hover">hover</button>
  <button class="btn is-focus">focus</button>
  <button class="btn is-active">active</button>
  <button class="btn" disabled>disabled</button>
  <button class="btn" data-state="loading">loading</button>
  <button class="btn" data-state="error">error</button>
  <button class="btn" data-state="success">success</button>
</div>

The Gate-Driven Pipeline: From Pre-Flight to Final Emit

Hallmark processes requests through a sequential pipeline where each step acts as a quality gate:

1. Pre-flight scan reads existing tokens, fonts, and motion libraries, recording a manifest in .hallmark/preflight.json
2. Genre detection selects one of four voices: editorial, modern-minimal, atmospheric, or playful
3. Macrostructure pick consults the diversification rule to avoid recent layouts
4. Theme route chooses a catalog or custom theme, verifying the three-axis rotation rule against .hallmark/log.json
5. Rule loading pulls only necessary files (genre, macrostructure, component archetypes) to keep token usage minimal
6. Preview summary emits a report showing macrostructure, theme, enrichment, sections, motion, and slop-test status
7. 57-gate slop test runs post-build; failures loop back to the relevant step for revision

Because the slop test executes after code generation, Hallmark catches subtle AI tells—like stray transition-all declarations or extra-wide grid tracks—that would otherwise ship to production.

Summary

• Hallmark prevents AI-slop through a 57-gate slop test defined in slop-test.md that aborts builds on failure
• Pre-emit self-critique uses a six-axis scoring system (P, H, E, S, R, V) to force rewrites of low-quality output
• Macrostructure diversification ensures no two consecutive pages share the same layout, tracked via .hallmark/log.json
• Theme rotation requires variation across paper band, display style, or accent hue axes
• Locked token discipline mandates all colors and fonts reference site/css/tokens.css variables
• Component 8-state discipline guarantees every interaction state is styled and demonstrated
• The gate-driven pipeline runs quality checks at seven distinct stages, with the slop test acting as the final barrier

Frequently Asked Questions

What is the "AI-slop" look that Hallmark tries to avoid?

AI-slop refers to the generic visual patterns common in unconstrained AI code generation: italic headings, fake browser chrome built with divs, repetitive grid layouts, placeholder metrics like "10× faster," and inconsistent spacing. Hallmark specifically targets these tells through dedicated gates in the slop test, such as Gate 38a (banning italic headings) and Gate 47 (rejecting redrawn UI chrome).

How does the 57-gate slop test work technically?

The slop test is a post-build validation step defined in slop-test.md that scans the generated code for 57 specific anti-patterns. It checks structural rules (responsive breakpoints, overflow handling), visual rules (token usage, typography), and content rules (honest copy). When triggered from site/js/main.js, any gate failure aborts the emit and returns the build to the appropriate pipeline step for correction.

Why does Hallmark enforce macrostructure diversification?

Without diversification, AI generators tend to reuse the same hero-section-plus-three-column-grid pattern repeatedly. Hallmark tracks previous builds in .hallmark/log.json and mandates that each new page select a different macrostructure from the 21 available options in macrostructures/. This prevents visual fatigue and forces architectural variety across a site's pages.

Can Hallmark be used with existing design systems?

Yes, provided the system adheres to Hallmark's locked token discipline. The pre-flight scan reads existing CSS custom properties from site/css/tokens.css, allowing integration with established token libraries. However, raw hex values or hard-coded fonts will fail the slop test, so existing systems must migrate to the var(--color-...) and var(--font-...) convention to pass the gates.

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