A new design skill kills AI slop in frontend code

hallmark is an open-source design skill created by Nutlope at Together AI for Claude Code, Cursor, Codex, and OpenCode. Its sole mission is straightforward: stop LLMs from generating frontend code that screams "AI-made."

Out of the box, language models suffer from a stubborn aesthetic bias. Leave them to their own devices, and you get the same generic tropes: purple gradients, unnecessary tracked-capital labels, arbitrary colored words inside headlines, empty card grids, and dead email signup forms. hallmark exists to systematically veto these machine defaults.

What it does

hallmark treats design as a deterministic pipeline rather than generic prompt magic.

It ships with a catalog of 50 design themes. Each theme is treated as a material—defining paper feel, typography, palette, textures, and UI surfaces—packaged in a single file under 8 KB with a visual reference. Because a theme defines raw material rather than a fixed template, two different prompts using the same theme will yield entirely different layouts tailored to what visitors actually came to do.

If you prefer something unique, asking for "custom" drops the catalog entirely. Hallmark will derive a dedicated visual identity directly from your prompt while applying the exact same quality gates.

It pulls real assets instead of hallucinating content. It hooks into your live dev server or app to take real screenshots, and ships with a curated index of 755 openly licensed Wikimedia Commons photos that get credited on-page, steering clear of stock sites that ban AI tooling.

Beyond generating new pages from scratch, it handles maintenance workflows through two primary commands. Running `/hallmark redesign <path>` rewrites the entire visual layout while strictly preserving existing copy, links, handlers, and functional wiring verified by before-and-after checks. Running `/hallmark audit <path>` inspects your codebase against anti-patterns and prints a report without touching files. Every build outputs self-contained HTML and CSS with design choices stamped in the stylesheet comments.

How it kills AI slop

Rather than hoping the model behaves, hallmark enforces aesthetic quality inside a headless browser.

Checks are organized into strict tiers. "The Floor" blocks builds outright if they fail basic contrast, focus states, reduced-motion preferences, mobile viewports, or contain fabricated claims. "Reflex gates" intercept reflexive LLM defaults like tracked-caps eyebrow tags unless justified on the record.

The build routine isolates the hero section first, rendering and reviewing it cold before touching the rest of the layout. Once assembled, a dedicated `sloplint.mjs` script renders the output across eight responsive widths in headless Chrome, followed by a final review from a fresh-context subagent.

Getting started

hallmark is licensed under MIT and open on GitHub.

You can install it globally via `npx skills add nutlope/hallmark -g` or add it directly as a plugin in Claude Code. It runs on Node 18 or later. To take advantage of browser-driven linting and automatic screenshotting, you will need `puppeteer-core` and a local Chrome installation; without them, hallmark gracefully falls back to static checks.

Why it matters

For developers using coding agents every day, generating web interfaces is no longer the bottleneck—overcoming the stale, uniform "AI look" is. hallmark is smart because it turns taste into an automated linting step. Instead of tweaking prompts over and over, you get a hard filter that rejects machine cliches before code ever reaches your repository. Anyone building customer-facing UI with Claude Code or Cursor should plug this in immediately.