UISlopKiller Template

Teardown: How Hallmark Lints AI-Generated Front-Ends Against Slop

A teardown of Hallmark, an open-source design skill by Together AI that forces Claude Code, Cursor, and Codex to drop AI visual tells.

2 min readUISlopKiller

The Anatomy of an AI-Slop Detector

When you let an LLM generate a landing page out of the box, it reaches for predictable crutches. According to the Hallmark repository by Together AI (found at github.com/Nutlope/hallmark), these visual tells include an eyebrow above every heading, tracked-capital labels, one colored word in a headline, pages of empty frames or generic photographs, and forms that say thanks without posting anywhere. Hallmark is an open-source design skill built for Claude Code, Codex, Cursor, and OpenCode designed to stop these habits.

Instead of letting a model improvise a generic purple gradient, Hallmark enforces a hard floor and then steps aside. It draws three themes from a catalog of fifty materials, builds the page around what the visitor came to do, and passes the result through a browser linter. According to the source documentation, the project includes scripts like sloplint.mjs to check layouts across eight widths, while a subagent reviews the result with fresh eyes.

Tiered Gates and Pre-Flight Checks

According to the source, Hallmark enforces its rules through distinct tiers. The Floor never ships if it violates basic requirements like contrast, focus states, reduced motion, or invented facts. Reflex gates represent the defaults that models usually fall into, which a build with a specific reason can overrule on the record. Finally, finish checks handle craft details that never block a deployment.

When a build runs, pre-flight reads the project fonts, palette, framework, and a locked design.md file, asking once for real materials like photos or screenshots. The script scripts/theme.mjs deal offers three themes that fit the prompt, while draw establishes the page anatomy from its actual job. Notably, the hero section is built alone, rendered, and reviewed cold before the rest of the page is generated.

Redesigns and Real Photo Libraries

Hallmark also handles existing codebases via commands like /hallmark redesign <path> or /hallmark audit <path>. According to the documentation, a full redesign keeps content and wiring while overhauling the system and layout. Before running, sloplint --before records links, fields, handlers, and headings, and sloplint --kept fails the redesign if any elements disappeared.

Image handling is another area where Hallmark avoids common AI tropes. Rather than pulling from stock sites whose terms bar AI tools from picking their images, the library in skills/hallmark/scripts/photos.json lists 755 openly licensed Wikimedia Commons photos hosted elsewhere, crediting every one used on the page. To try it yourself, install it via npx skills add nutlope/hallmark -g and run it with /hallmark <prompt>.

Photo by Christina Morillo, CC0 1.0, via Openverse

Sources