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

> Discover how Hallmark stops AI code generation from becoming AI-slop. Learn about its multi-layered design discipline and automated checks, including a 57-gate slop test, that ensure quality code.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-09

---

**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/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/SKILL.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (§ 46), this stamp appears at the top of every generated artifact:

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/.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/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/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and compared against the last entry in [`.hallmark/log.json`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css). Raw values are forbidden.

For example, a compliant button uses only token references:

```css
.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/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:

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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.