Hallmark: The Anti-AI-Slop Design Skill for Claude Code (2026)

Hallmark (Nutlope/hallmark) sits at number one on GitHub’s weekly trending page today. It’s a design skill for Claude Code, Codex, Cursor and OpenCode with one job: stop your agent from shipping the page every model ships by default, with the cream background, the label over every heading, the purple gradient and the card inside a card. It does that with written rules, fifty themes and a linter that checks the result in a real browser.

On 3 Nov 2026 I read the README, SKILL.md, the gates, redesign and flow references, the install, hook and linter scripts and the README’s commit history, then compared them with Impeccable and Anthropic’s frontend-design skill. I didn’t install it or build a page: the commands are checked against commit 52328cb (version 2.0.0), and the counts are mine.

1. What It Is: Stars, License and the v2 Rewrite

The repo calls itself an “anti-AI-slop design skill for Claude Code, Cursor, and Codex”. It lives under Nutlope’s account (Hassan El Mghari), and the README says “Made by Together AI”. GitHub labels it CSS because of the demo site, but the product is Markdown plus about 7,500 lines of Node scripts. It was first on the weekly trending list when I checked.

⭐

GitHub stars

~46.5K

GitHub API, 3 Nov 2026, with ~2.5K forks

📈

This week

+10.5K

#1 on GitHub’s weekly trending page, 3 Nov 2026

⚖️

License

MIT

Skill and scripts. The 755 library photos keep their own licenses

🏷️

Version

2.0.0

In SKILL.md and plugin.json. No GitHub releases or tags

Why it’s trending now

The repo dates from 27 Apr 2026, but the version people are starring is new: 2.0.0 landed on 21 Oct, and the README switched to “fifty themes” on 27 Oct. The page around it is a wall of agent skills: Impeccable added more raw stars this week (+11,754) yet ranks fifth, next to Anthropic’s skills repo, obra/superpowers and Cloudflare’s security-audit-skill.

The numbers you’ve read are probably stale

Older coverage quotes earlier versions. The README said twenty-three themes and sixty-five gates on 7 May 2026 (22 after Pastel left that day). A 2 June commit merged 70 gates into 57, matching the “20 themes, 57 gates, four verbs” of a July review. Today’s v2 has fifty themes, 90 gate clauses under 71 numbers plus 26 Finish checks (my count of gates.md), and no study verb. Trust the repo, not the round number.

2. What It Encodes: Floor, Reflex and Finish

The v1 README pitched Hallmark as “the anti-AI-slop consensus” on typography, colour, layout, motion, microinteractions and structural variety. v2 keeps those areas and sorts every rule by how hard it binds. The numbers in brackets are the gate ids sloplint reports.

🔤

Typography

No eyebrow above a heading and no label in tracked capitals or small caps (54, 67): “house rules”, stricter than the field. Never one italic word inside a roman heading (38i). Two font families at most, body text at 16px or more.

🎨

Colour

Every colour and font goes through a token at :root (48). No purple-to-blue, purple-to-pink or cyan-on-dark gradient, gradient text included (2a), and no literal #000 or #fff outside the token block (7a).

📐

Layout

The headline, its sentence and the primary action fit in 1280 × 800 (44b). About 80 words per screen (58), a capped and centred container (44d), and overflow-x: clip, never hidden (34). No card inside a card.

🎞️

Motion

Never transition: all, and never animate width, height, top or left (10a). Every animation has a reduced-motion fallback, content shows with scripting off (27, 62), and a page gets one reveal at most.

🖱️

States and microinteractions

Every interactive element gets an instant :focus-visible (26a, 15), and controls are built in all eight states. The README also counts a form that says thanks without sending anything as a tell.

🔀

Structural variety and honesty

Themes and page shapes are dealt against .hallmark/log.json, so a build must differ from the last three (8, 32). No invented metric, testimonial or logo wall (46a): a missing fact stays absent, and a missing photo becomes a slot.

Floor, Reflex, Finish

A page with an open Floor finding never ships, and Floor gates can’t be waived: contrast, focus, reduced motion, invented facts, a broken phone layout, the house rules. A build may waive a Reflex gate in its CSS stamp, with evidence and a page-specific reason. Finish checks (F1–F26, such as straight quotes) get an answer but never block.

A Reflex waiver, as gates.md writes it

/* Hallmark · waive 47b · one frame, a real terminal capture inside · the terminal is the product being sold */

Four genres, fifty themes

First, the prompt is routed silently to a genre: AI, music and voice briefs go atmospheric; SaaS, APIs and dev tools go modern-minimal; kids, games and community go playful; the rest goes editorial. The fifty themes split into 20 editorial, 12 modern-minimal, 9 playful and 9 atmospheric (my count). Each is a material of 8 KB or less with a picture, never a layout.

3. The Architecture in 4 Steps

SKILL.md runs a build in eight numbered steps. Grouped by what actually happens, a request goes through four stages.

🧭

1. Pre-flight, then one question

It reads the project first: a design.md (a locked system that overrides everything), fonts, palette, Tailwind config, the framework, and the product itself if there’s a URL or dev server to screenshot. Then it asks once for material, audience, the one action and a tone (“clean and modern” doesn’t count). Say go ahead and it infers instead.

🃏

2. Genre, deal, draw

scripts/theme.mjs deal offers three themes that fit the prompt and clear the log; the agent picks one by its picture. Then draw deals the anatomy from the page’s job (book, buy, subscribe): one of 21 shapes, the hero posture, nav, footer and where the action sits. Ask for custom and the themes drop out; the Floor stays.

🏗️

3. Scaffold, then the hero alone

theme.mjs scaffold writes tokens.css and base.css beside your stylesheet. The nav and hero come first, linted with --stage hero and reviewed by a fresh-context subagent before anything below the fold exists. Then six to nine sections, 450 visible words at most, and a stamp on line 1 of the CSS that records each decision.

🔍

4. Sweep: linter, then a cold review

sloplint reads HTML, CSS, JSX, TSX, Vue, Svelte and Astro, Tailwind classes included. With --render it checks eight widths in Chrome: contrast against real pixels, focus rings found by tabbing, the fold. A second subagent reviews the finished page, and its first word decides what happens: recapture, rebuild, fix or ship.

What a build costs in context

I added up what SKILL.md loads for a page build: SKILL.md, gates.md, craft.md, layout.md, imagery.md, patterns.md and anatomy.md, plus one theme and one genre. That’s up to about 135 KB of Markdown (gates.md alone is 39 KB), roughly 30,000 to 40,000 tokens, before screenshots and two subagent reviews. The ROADMAP still lists measuring a build’s token cost as open work.

It only touches existing UI when you name it

The skill’s description says to use it for new builds and never on an existing design unless you name Hallmark. Ask for a restyle without the name, and the agent works in your project’s own system. That’s deliberate, and it’s the biggest difference from Impeccable.

4. Quickstart: Install It Per Agent

The README’s main route is the skills CLI; there’s also a Claude Code plugin and a clone-based installer that validates every theme before it copies. If skills are new to you, start with my agent skills guide. I checked each command and flag against the README, the scripts and the CLI docs, but I didn’t run them.

Option A: the skills CLI (README)

# Pick agents interactively; -g makes it available in every project
npx skills add nutlope/hallmark -g

# One agent only: claude-code, codex, cursor, opencode or github-copilot
npx skills add nutlope/hallmark -g --agent claude-code

# Leave out -g to install into the current project instead
npx skills add nutlope/hallmark --agent codex

Option B: as a Claude Code plugin

# Inside Claude Code (invoked afterwards as /hallmark:hallmark)
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

Option C: from a clone, plus the edit-time hook

git clone --depth 1 https://github.com/Nutlope/hallmark.git
cd hallmark

# Validates every theme and reference, then copies; --dry-run changes nothing
node skills/hallmark/scripts/install.mjs --dry-run
node skills/hallmark/scripts/install.mjs --claude

# Edit-time Floor check for Claude Code: preview the JSON, then install it
node ~/.claude/skills/hallmark/scripts/install-hook.mjs --print
node ~/.claude/skills/hallmark/scripts/install-hook.mjs --global

# Optional: the browser tier (sloplint --render, screenshots) also needs Chrome
npm i -g puppeteer-core

First runs: build, audit, redesign and lint

# In Claude Code, Cursor or OpenCode (Codex: $hallmark)
/hallmark a booking page for a two-chair barbershop
/hallmark a pricing page for <product>, custom
/hallmark audit ./index.html
/hallmark redesign ./src/app

# Lint a page yourself; without Chrome only the static tier runs
node ~/.claude/skills/hallmark/scripts/sloplint.mjs ./index.html --render

# Framework project: lint the changed files, render the route from the dev server
node ~/.claude/skills/hallmark/scripts/sloplint.mjs app/page.tsx --render --url http://localhost:3000/

Codex uses $hallmark, and the plugin is invoked as /hallmark:hallmark. If the skill doesn’t fire on its own, name it: “use hallmark to build…”. The sloplint paths assume the Claude Code copy and a Unix shell.

Where it lands

With -g, Claude Code gets ~/.claude/skills/hallmark and Codex gets ~/.agents/skills/hallmark; Cursor and OpenCode read those copies. install.mjs skips a separate OpenCode copy when one of those exists, unless you pass --opencode --copy. The installed folder is about 7 MB, mostly theme pictures.

Two Node requirements

The README asks for Node 18 or later, which is what Hallmark’s scripts need. The skills CLI is stricter: version 1.7.6 declares Node 22.20 or later. On an older Node, update it or take the clone route.

Without Chrome, the render checks don’t run

sloplint --render and the screenshot scripts need puppeteer-core and Chrome or Chromium. Without them only the static gates run, and the skill must say so rather than claim a pass. On Codex, the workspace-write sandbox keeps the network off by default.

What the hook changes

install-hook.mjs adds a PostToolUse entry (matcher Write|Edit|MultiEdit, 10-second timeout) to .claude/settings.json in the current folder, or to ~/.claude/settings.json with --global. Run it from the installed copy so the hook doesn’t point into a clone. It lints the Floor tier only and never blocks; --print previews the JSON and --remove undoes it.

5. Audit and Redesign: How They Work

Both verbs load references/redesign.md and start by recording each page in the target as it stands.

🔎

audit <target>: a report, no edits

sloplint --before saves the findings and screenshots under .hallmark/. The agent looks at the screenshots before weighing the linter, writes a four-line read (purpose, what works, what reads as generated, what’s broken) and reports by tier with file:line and the lightest fix depth. It changes none of your files.

A live URL with no source behind it can only be audited, through --url

🛠️

redesign <target>: full by default

It keeps every fact, link, form, field, handler, route, id and test hook, and changes the system and the composition. It wants a clean git tree (it never commits or stashes for you) and shows a file-level plan before deleting anything. Afterwards, sloplint --kept fails the run if a link, field or handler went missing, and .hallmark/compare.html shows before and after.

Brand colours and faces stay; stock indigo doesn’t count as a brand

🎚️

restyle and polish: only when you say so

Say keep the layout or restyle, and only colour, type, radius, shadow, motion and the controls change. Say polish, and only what a gate names gets fixed. The depths don’t blend: a polish that finds the concept wrong recommends the full run instead.

Layout gates report as notes here, so a polish won’t re-space your site

6. Hallmark vs Impeccable vs Anthropic’s frontend-design

All three chase the same tells and share a lineage: Impeccable says it started from Anthropic’s frontend-design skill, and Hallmark credits both as inspirations. They differ in scope, and in how much machinery ships with the taste.

Side by side (READMEs and SKILL.md files, 3 Nov 2026)

Aspect	Hallmark	Impeccable	frontend-design
Shape	One build skill, 50 themes and a linter	24 commands (polish, bolder, critique, audit…) plus a detector	A single SKILL.md of about 9.4 KB
Strongest at	New pages from a prompt	Interfaces that already exist (its README’s words)	A taste baseline on any build
Existing code	Only when named: audit or redesign	Any command, pointed at a page or a component	Follows the brief, no review mode
Mechanical checks	sloplint (static and Chrome render tiers), plus an opt-in Claude Code hook	62 deterministic rules via CLI, CI, a Chrome extension or an edit hook	None; self-critique from screenshots
Agents	Claude Code, Codex CLI, Cursor and OpenCode	19 listed, from Claude Code to Gemini CLI and Kiro	Any Agent Skills client
Network	Wikimedia photos; Together AI images only with TOGETHER_API_KEY	Fetches visual directions from impeccable.style for new designs	None
License, stars	MIT, ~46.5K	Apache-2.0, ~101K	Apache-2.0, inside anthropics/skills (~187K)
Install	npx skills add nutlope/hallmark -g	npx impeccable install	/plugin marketplace add anthropics/skills, then /plugin install example-skills@anthropic-agent-skills

Should you stack them?

I wouldn’t load two taste skills into one build: each has its own catalog and idea of a default, and the agent ends up arbitrating. Pick one to design; a second detector on the output is cheap. That’s my judgment from reading them, not a measurement.

7. Use Cases: Where It Earns Its Place

Hallmark is opinionated, so it fits some jobs far better than others. These four play to its strengths.

🚀

Launch pages for side projects and dev tools

The modern-minimal genre, the job-first anatomy and the hero-first build target the page you’d otherwise ship on stock components and an indigo gradient. Hand it real screenshots, or a dev server to capture, and the product leads the page.

Best for: a product page with no design system behind it yet

🏪

Small-business sites

anatomy.md knows where real sites in a category put the action (the menu, the booking, the shop), and the photo library fills slots with credited Wikimedia Commons pictures until yours arrive. One question suits clients who answer one message, not five.

Best for: a bakery, a clinic or a studio that needs one honest page

🔎

Auditing an AI-built page before handoff

audit returns a tiered punch list with file:line references and screenshots, and edits nothing. In project-rescue work, that’s the report you want before choosing between a polish and a rebuild.

Best for: reviewing a page someone else’s agent shipped

🧹

A slop lint on components

sloplint reads TSX, Vue, Svelte and Astro with their Tailwind classes, so uppercase tracking-widest text-xs on a label, transition-all or a purple from-/to- pair fail just as their CSS would. Run it by hand on the files you changed before a review.

Best for: keeping a Hallmark page clean after later edits

8. When NOT to Use It

This is the part a star count won’t tell you.

✅ A good fit if...

• You’re building a new page or site and have no design system yet
• You can supply real material: screenshots, photos, numbers and quotes you’re allowed to use
• Your agent can run Node, ideally with Chrome and subagents, so the linter and the reviews actually run
• You want consecutive builds to differ instead of converging on one look
• You want an audit of an existing page without letting an agent touch it

⚠️ Skip it (or keep it experimental) if...

• You need a component library: Hallmark is instructions plus a linter, not a package of buttons
• Your brand uses eyebrows or tracked-caps labels: those are Floor house rules, and Floor gates can’t be waived
• You want small edits to an existing UI: it stays out unless you name it, and Impeccable is built for that loop
• You’re adding one page to a Tailwind v4 app whose other pages must not move: the scaffold overrides nine Tailwind tokens, text-lg and ease-out among them
• Context is tight: a page build loads up to about 135 KB of rules, plus screenshots and two subagent reviews
• You need identical output every time: deals and draws make two builds of one prompt differ
• You’re selling the page with the stand-in photos: most of the 755 are CC BY-SA, and the credit line must stay

My take

Use Hallmark for new pages, not for nudging an app you already like. Install it per project so it travels with the repo, add puppeteer-core so the render tier runs, and answer its one question with real material: it won’t invent numbers, so a thin prompt yields a page of empty slots. On existing work, run audit first, and only then decide whether a redesign is worth the diff.

Conclusion

Hallmark’s idea is simple and, on paper, well executed: write down the defaults every model falls into, make most of them mechanical, deal the creative choices so builds don’t converge, and put fresh eyes on the result. v2 is unusually explicit about what binds, what can be waived and what the agent must never claim.

The costs are real too: a long flow that assumes Node, Chrome and subagents, up to about 135 KB of rules per build, Floor rules your brand may reject, and counts that keep changing between versions. Treat it as a strong opinion with a linter attached: use it where you have no design system yet, feed it real material, and audit before it redesigns anything you care about.

Verification stamp

Stars, forks, dates, license and the empty releases list come from the GitHub API on 3 Nov 2026; weekly stars from GitHub’s trending page the same day. Commands and flags come from the repo at commit 52328cb (version 2.0.0), the skills CLI docs (v1.7.6), Impeccable’s README and Anthropic’s frontend-design SKILL.md. The counts are mine. I didn’t install the skill, run its scripts or build a page.