Ever asked Claude Code to build a landing page and got the same purple-to-pink gradient hero, the same centred-everything layout, the same icon-tile feature cards with a fake Trustpilot rating underneath? Yeah, me too.
Every LLM has a default design vocabulary. It’s aggressively boring.
But Hallmark — a design skill by Nutlope (the same person behind screenshot-to-code, now under Together AI) — refuses to ship that. It sits inside Claude Code, Cursor, and Codex with 57 slop-test gates, a pre-emit self-critique, and twenty design themes that genuinely look different from each other. 11,568 GitHub stars and 3,372 stars in a single day says the community agrees this is a real problem.
So here’s the short version: Hallmark won’t design for you. But it’ll stop your coding agent from doing it badly.
How Hallmark Works
So Hallmark gives your agent four verbs. Each one serves a different job:
| Verb | What It Does |
|---|---|
| Build (default) | Generates new UI. Picks a macrostructure for the brief, dresses it in one of 20 themes, runs the 57-gate slop test, and refuses the default output every LLM was trained on. |
hallmark audit <target> |
Scores existing code against 57 anti-patterns. Punch list only — no edits, just tells you what’s slop. |
hallmark redesign <target> |
Throws out the visual structure, keeps the copy + IA + brand, rebuilds with a different fingerprint. |
hallmark study <screenshot | URL> |
Extracts the DNA of a design you admire — macrostructure, type-pairing, colour anchor. Refuses pixel-clones. Outputs a portable design.md. |
So I spent an afternoon browsing the usehallmark.com demo gallery. I cycled through all twenty themes by pressing T (it has a keyboard shortcut, which already tells you these people think about UX). And honestly? The variety is the story.
But two pages by Hallmark for two different briefs feel like different sites — not colour-swaps of the same Bootstrap template. The Bubble theme for a guided sourdough app uses a marquee hero with italic Fraunces display type. Completely different from the Cobalt theme for a content-extraction API, which goes industrial with a dark header and exposed grid lines. And the Custom mode? When a brief carries creative intent that no catalog theme fits, Hallmark designs from scratch: made-to-measure palette, type, and layout, same 57 gates, no template underneath.
The 57 Gates
The slop-test gates are what make this thing worth paying attention to. Hallmark explicitly checks for five tells the LLM reaches for by default:
- The purple-gradient hero — LLMs love this more than any designer ever has
- Inter as display font — great system font, terrible for headlines
- Centred everything — not every layout needs to be symmetrical
- The icon-tile feature card — three cards with icons and a headline, the ultimate AI slop tell
- The AI nav — generic top nav that looks like every other SaaS
Still, knowing what the anti-patterns are is useful even if you never install the skill. The hallmark audit verb alone is worth keeping around. So run it on your existing agent output and see how many gates you’re failing. In my own Claude Code sessions, I’ve been guilty of at least three of these. The purple gradient I can explain away as “getting started fast.” The icon-tile cards? That one hurts.
What to Watch Out For
Still, Hallmark is a skill for Claude Code, Cursor, and Codex, not a standalone design tool. If you don’t use these agent harnesses — and I’m a heavy Claude Code user myself, so this review of Claude Code Router might be relevant — it won’t help you directly. The Custom mode, where Hallmark designs from scratch when a brief doesn’t fit any theme, is still described as “a quiet branch.” Most briefs hit one of the 20 themes, which is plenty for landing pages and marketing sites. But enterprise-scale design systems will need more. The skill also requires a recent version of the agent CLI that supports the npx skills protocol — if you’re on an older build, you’ll need to copy the files manually.
Install is one command though:
npx skills add nutlope/hallmark
That’s it. No config files, no API keys, no daemon running in the background. Re-run any time to update. Or copy the SKILL.md and references directory into your agent’s skills folder.
So Here’s My Take
Look, it won’t turn your coding agent into a world-class designer. But it’ll stop it from embarrassing you with the same purple gradient everyone else’s agent is shipping. For a free, MIT-licensed skill that installs in under a minute, that’s an easy call.
If you’re building agent-driven UIs and haven’t tried agent memory layers yet, Deja-vu’s zero-dep memory layer pairs nicely with this kind of workflow.