But ever looked at a page Claude Code just built and thought — yep, that’s AI? Purple gradient hero, 3-column feature grid, Inter font everywhere, all centred in a 100vh box. It works, but it screams “template.”
That’s where Hallmark comes in. It’s a design skill for Claude Code, Cursor, and Codex that enforces 58 slop-test gates before any code leaves the agent’s mouth. 6,613 stars on GitHub, trending #2 today with 1,015 stars in the last 24 hours. Made by Nutlope (the Together AI team).
Here’s why it’s getting that kind of momentum.
What Hallmark Actually Does
So Hallmark is a 68KB SKILL.md with 30+ reference files covering color theory, anti-patterns, typography, responsive design, microinteractions, and structural variety. When you install it into Claude Code or Cursor, the agent has to run its output through a pre-emit self-critique on six axes (Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety) and pass 58 automated gates before handing you the code.
No more purple-to-blue gradients. No more hover:scale-105 on every card. No more fake browser chrome. The rule-set is brutally specific: gate 2 bans gradient text headlines (background-clip: text), gate 6 auto-fails any centred 100vh hero, gate 10 bans transition: all, and gate 47 flat-out refuses re-drawn browser frames. I counted.
Installing and Testing It
Then I ran npx skills add nutlope/hallmark and it cloned the repo, scanned 73 supported AI agents, and installed Hallmark as a universal skill. Still, it only took about 30 seconds. The CLI picked up Claude Code and Hermes Agent automatically.
After that, I gave Claude Code a prompt I’ve used a hundred times before — “build me a landing page for a new analytics SaaS.” Normally I’d get the same hero/3-features/CTA/footer structure with maybe a colour swap. With Hallmark active? The output was completely different. The thinking trace showed it evaluating macrostructures, picking a theme from 20 catalog options, and running the pre-emit critique before emitting. The hero had an off-axis CTA. The display font was Literata paired with Inter body, not Inter-everywhere. Section dividers used a hairline rule instead of whitespace padding.
Yet the difference is immediately visible. You don’t get the “that looks AI-generated” gut feeling. It looks like a real human designer cared about it. I’ve reviewed other guides on Claude Code templates and Claude Code Router — this is the first time a skill actually changed the design DNA, not just the colours.
The 4 Verbs
Hallmark has four modes:
| Verb | What It Does |
|---|---|
| (default) | Build new UI through the full design flow |
hallmark audit <target> |
Score existing code against anti-patterns, no edits |
hallmark redesign <target> |
Throw out the structure, keep copy + IA, rebuild |
hallmark study <URL or screenshot> |
Extract design DNA from a page you admire |
The study verb is the one I didn’t expect to be useful. You feed it a URL or screenshot of a site you like, and it extracts the macrostructure, type pairing, and colour anchor. Then it can rebuild your content using that extracted DNA. It refuses to clone templates or paid themes.
Is It Worth It?
If you use Claude Code or Cursor daily for UI work, Hallmark solves a real problem. The default output from any AI coding agent is structurally uniform — you can spot it from across the room. This skill breaks that uniformity by encoding actual design discipline into the agent’s thinking.
Two caveats:
- It’s opinionated. You’re giving up some flexibility for consistency. The gate system means no purple gradients, no gradient headlines, no fake chrome. If you want those things, this isn’t for you.
- But the real value depends on how many pages you build. If you’re writing one landing page, you may not notice the difference. If you’re shipping multiple UIs where each should look intentionally different, it starts to pay off fast.
My take: 6,613 stars and 1,015 today tells me the community agrees this is a gap that needed filling. Sure, it doesn’t make you a designer, but it keeps your agent from looking like every other AI-generated page on the internet. For a npx skills add command, that’s a solid trade.