Hallmark: The Design Skill for Claude Code That Refuses to Look AI-Generated
TL; DR
- AI coding agents default to statistically average design. Every page looks the same.
- Hallmark is a SKILL.md that gives your agent real design discipline.
- Four verbs: build, audit, redesign, study.
- 65 slop gates run before every output. One fail = rebuild.
- The study verb extracts DNA from any design you admire, without copying pixels.
- 21 macrostructures and 22 themes with project memory mean no two builds look alike.
- Install: npx skills add nutlope/hallmark
Stop shipping slop. Your Claude Code just got a taste upgrade.
THE PROBLEM
You ask Claude Code to build a landing page. It comes back with a centered hero, a row of three features with icons, a testimonials section, a CTA, and a footer with four link columns.
You ask Cursor. Same thing. You ask Codex. Same thing.
That is not a coincidence. Every LLM was trained on the same corpus of websites, so they all default to the same layout. The same fonts. The same spacing. The same everything. It is statistically average design and statistically average is immediately recognizable as AI.
WHAT HALLMARK ACTUALLY IS?
Hallmark is a skill file that fixes this. One install, and your coding agent stops defaulting to the mean.
A skill file. One install. Four verbs.
Hallmark is not a framework. It is not a component library. It is a SKILL.md file you drop into Claude Code, Cursor, or Codex, and from that point forward your agent builds UIs with real design discipline baked in.
It encodes a set of rules drawn from the anti-AI-slop design movement: typography, color, layout, motion, micro interactions, structural variety. Then it runs a 65-gate slop test against every output before handing anything back. If something looks templated, it fails the build and tries again.
Most tools give you a single command and call it done. Hallmark gives you four distinct modes for four different situations: building fresh, auditing what you already have, rebuilding something that looks templated, and studying a design you actually like to understand why it works.
HOW IT STOPS THE SLOP?
65 gates. One yes fails the build.
Before Hallmark hands anything back, it runs every output through 65 slop-test gates. These are not style preferences. They are named anti-patterns drawn from thousands of AI-generated pages that specifically make something look machine-made.
A few of the gates worth knowing: Invented metrics (gate 56) if the brief did not supply a number, Hallmark cannot invent one. No "+47% conversion" or "trusted by 50,000+ teams" that nobody gave it. Re-drawn chrome (gate 57) fake browser bars, fake phone frames, fake IDE windows are banned. Symmetrical hero (gate 53) a hero where everything is centered, same padding left and right, is a hard failure.
The gates also cover typography (max three font families per page), contrast (APCA thresholds), mobile layout (no horizontal scroll at 320px), and interactive states (every button must ship all 8 states: default, hover, focus, active, disabled, loading, error, success).
One gate fails stops the build. Hallmark fixes it and re-tests. You never see the slop.
THE STUDY VERB
Show it a design you like. It extracts the DNA.
This is the part that separates Hallmark from every other design skill.
Every other tool ships a preset menu or a scraper. Hallmark ships a studyverb. You paste a URL or attach a screenshot of a design you admire, and Hallmark extracts what makes it work without copying a single pixel.
The extraction identifies the macrostructure (the overall page shape), the component archetypes (how the hero, features, and footer are built), the typographic pairing, and the colour anchor. If you give it a URL, it reads the actual HTML and CSS and names exact fonts and exact colour values. If you give it a screenshot, it names font roles and proposes candidates.
After the diagnosis, you have three choices:
- Build your content using the extracted DNA
- Lock the DNA into a portable design.md your other tools can read
- Stop at the diagnosis and learn from it
What it will not do: clone a paid template, copy a competitor's site, or guess at fonts it cannot identify. The refusal list runs before any extraction even starts.
22 THEMES, 4 GENRES, 21 MACROSTRUCTURES
Structural variety, not colour swaps.
The biggest tell on AI-generated sites is not the fonts. It is the structure. Every page has the same rhythm: hero, three features, testimonials, CTA, footer. Different colours, same skeleton.
Hallmark enforces structural variety through two systems that work together: macrostructures and themes.
A macrostructure is the whole page shape where the heading sits, how sections divide, what rhythm the content follows. There are 21 named ones: Marquee Hero, Bento Grid, Stat-Led, Long Document, Manifesto, Workbench, Letter, Quote-Led, and fourteen more. Hallmark picks differently every time, and it keeps a log, so it never repeats the same shape twice in a row in the same project.
A theme is visual skin: typography, colour, spacing personality. There are 22 themes spread across 4 genres. The diversification rule means two consecutive Hallmark builds must differ on at least one of three axes: paper band, display style, or accent hue.
The project memory lives in a .hallmark/log.json file at the root. Every build writes an entry: macrostructure, theme, enrichment, summary. The next run reads the last five entries and picks deliberately away from them. This is what stops a project from looking like the same template in different colors.
HOW TO INSTALL AND USE IT
One command. Works in Claude Code, Cursor, and Codex.
Install it with npx:
npx skills add nutlope/hallmarkOr copy SKILL.md and the references/ folder manually into your agent's skills directory:
- Claude Code: ~/.claude/skills/hallmark/
- Cursor: .cursor/rules/hallmark.mdc (paste the body of SKILL.md, no frontmatter)
- Codex: the agents/ folder in your project
Once installed, Hallmark fires automatically when you ask for a greenfield page build or explicitly invoke it by name. It will ask you three things before writing a single line of code:
- Audience: who is this for?
- Use case: what is the one action the page should drive?
- Tone: pick an extreme. Editorial, brutalist, soft, technical, luxury, playful, austere. Not 'clean and modern' that is not a tone.
Say 'go ahead' if you want it to infer. It will, and it will tell you exactly what it inferred so you can redirect before it writes anything.
After the build, say 'lock the system' to extract the tokens and voice into a portable design.md file. From that point, every future Hallmark run in the project defers to the locked system instead of rotating themes. That is how a one-page build becomes a full design system.
HOW IT COMPARES
There are a few other design skills in the ecosystem. Here is where Hallmark sits:
That’s a wrap!
If you found this breakdown of Hallmark skill for Claude Code and Codex helpful, let’s keep scaling together:
- For more step-by-step, plain-language guides on AI agents.
- Follow @HarrisDecodes
- Like & Retweet to share it with your audience!