What Is the Hallmark Slop Test? A 58‑Gate Quality Framework for AI‑Generated UI

The Hallmark slop test is a deterministic 58‑gate quality audit that prevents AI‑generated UI from exhibiting common "sloppy" design patterns.

This test serves as the final gatekeeper for every page produced by Hallmark, an open‑source design system that enforces disciplined, human‑like craft on AI‑generated web interfaces. Running in skills/hallmark/ in the Nutlope/hallmark repository, the slop test guarantees outputs avoid the tell‑tale artefacts that expose machine‑generated design.

How the Hallmark Slop Test Works

The slop test operates through three sequential stages, all triggered before final page emission according to references/slop-test.md.

Pre‑Emit Self‑Critique

Hallmark first scores every design on six orthogonal axes:

1. Philosophy
2. Hierarchy
3. Execution
4. Specificity
5. Restraint
6. Variety

This critique is recorded in a stamp comment injected into the output, as seen in the generation pipeline.

58‑Gate Sweep

The core of the slop test runs 58 yes/no gates across nine categories. Each gate asks: Does this problem exist in the output?

• Visual gates – no gradient text, no pure black/white backgrounds, no centered‑hero stacks exceeding two elements (lines 30‑36)
• Structural gates – no reused macrostructures, no identical section spacing (lines 40‑42)
• Micro‑interaction gates – no transition-all, no multiple hover‑scale on unrelated elements, no overshoot easings without justification (lines 45‑48)
• Variety gates – macrostructure stamp must be present, no default Specimen fall‑through (lines 58‑60)
• Implementation gates – neutral colors require non‑zero chroma, accent usage limited, spacing values must follow the named scale, focus-visible styling required (lines 62‑68)
• Hero enrichment gates – video autoplay rules, background‑gradient limits, icon library consistency (lines 70‑78)
• Diversification gates – variation knobs must differ from previous outputs, accessibility labels on visual‑only SVGs (lines 80‑85)
• Layout‑safety gates – no horizontal scroll across 320‑1920 px, interactive bars vertically centered (lines 88‑93)
• Typography gates – maximum three font families, no italic headings, outlier font used ≤2 slots (lines 94‑100)

Pass/Fail Rule

All 58 gates must answer "no" — meaning zero problems detected. A single "yes" triggers automatic revision. The final result appears in the preview block:

/* Slop test: 58 / 58 ✓ */

Failed tests surface as: 45 / 58 — fails: 12, 23, 37

Genre‑Aware Gate Overrides

The slop test is not one‑size‑fits‑all. According to lines 5‑6 in slop-test.md, some gates carry overrides for Hallmark's four genres:

Genre	Override Example
Editorial	Stricter hierarchy rules, expanded typographic range
Atmospheric	Relaxed color restrictions, stricter motion limits
Modern‑minimal	Tighter spacing enforcement, reduced variety requirements
Playful	Expanded animation allowances, constrained color logic

This contextual adaptation prevents false positives while maintaining anti‑slop discipline.

Hallmark Slop Test Implementation in Code

Recording Results in site/js/main.js

// site/js/main.js – snippet showing the preview block stamp
const previewStamp = `
/* Hallmark · macrostructure: hero-stat-grid · genre: editorial · slop-test: 58 / 58 ✓ */
`;

The runtime code injects this stamp only after confirming all 58 gates pass.

Programmatic Usage Pattern

import { runSlopTest } from './slop-test';

// 1️⃣  Generate page (HTML + CSS)
const page = generateHallmarkPage(brief);

// 2️⃣  Pre-emit self-critique (scores P-F)
const critique = scorePreEmit(page);
addCritiqueStamp(page, critique);

// 3️⃣  Run the 58-gate slop test
const result = runSlopTest(page);

// 4️⃣  If any gate fails, iterate
while (!result.passed) {
  page = fixIssues(page, result.failedGates);
  result = runSlopTest(page);
}

// 5️⃣  Emit final page with passing stamp
addSlopTestStamp(page, result);
output(page);

Note: The actual implementation lives inside Hallmark's skill engine; this pseudocode illustrates the logical flow derived from references/slop-test.md.

Gate Example: Eliminating Gradient Text

/* ❌ Bad – gradient-text (fails gate 2) */
.hero__title {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

/* ✅ Fixed – solid colour (passes gate 2) */
.hero__title {
  color: var(--color-primary);
}

Removing gradient text satisfies gate 2 as documented in the visual section (lines 30‑32).

Key Source Files for the Hallmark Slop Test

File	Role
references/slop-test.md	Master list of 58 gates, critique axes, and genre overrides
SKILL.md	Design skill definition and slop test integration
site/js/main.js	Runtime injection of slop‑test stamps into preview blocks
README.md	High‑level overview mentioning slop test purpose
site/_tests/verbs/audit/audit-report.md	Example failed slop‑test reports with gate counts

All files reside in skills/hallmark/ within the Nutlope/hallmark repository.

Summary

• The Hallmark slop test comprises 58 deterministic gates checking visual, structural, and implementation quality
• It runs as a pre‑emit audit after six‑axis self‑critique
• All gates must pass ("no" to every problem) before shipping
• Genre overrides adapt rules for editorial, atmospheric, modern‑minimal, and playful outputs
• Results appear in preview block stamps and trigger automatic revision on failure
• Source code in references/slop-test.md (lines 28‑100) defines the complete gate list

Frequently Asked Questions

How many gates does the Hallmark slop test include?

The slop test includes 58 gates organized into nine categories: visual, structural, micro‑interaction, variety, implementation, hero enrichment, diversification, layout safety, and typography. Every gate must return "no" for the page to pass.

What happens if a page fails the Hallmark slop test?

When any gate returns "yes," Hallmark automatically revises the offending elements — whether adjusting typography, removing gradient text, adding ARIA labels, or fixing layout issues. It then re‑runs the full 58‑gate suite until achieving 58 / 58 ✓ before final emission.

Is the Hallmark slop test the same for all design genres?

No. The test is genre‑aware: while universal gates apply to all outputs, specific gates carry overrides for the four Hallmark genres (editorial, atmospheric, modern‑minimal, playful). This prevents inappropriate restrictions on legitimate design variations.

Where is the Hallmark slop test defined in the codebase?

The authoritative gate list lives in skills/hallmark/references/slop-test.md, with integration logic in SKILL.md and runtime stamp injection in site/js/main.js. These files collectively implement the test pipeline in the Nutlope/hallmark repository.

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