Hallmark by Nutlope: Anti-AI-Slop Design Skill for Claude Code, Cursor, and Codex

If you've asked an agent to "build a landing page" and gotten the same purple gradient, three identical feature cards, and a hero that says "Revolutionize your workflow" — you've seen the problem Hallmark targets. Nutlope/hallmark is an anti-AI-slop design skill for Claude Code, Cursor, and Codex: it encodes rules that refuse the on-distribution defaults every frontier model was trained on, then runs 57 slop-test gates before handing code back.

Made by Together AI, Hallmark reached 11.1k GitHub stars and 553 forks by July 2026. Live examples cycle at usehallmark.com — press T to swap themes. On explainx.ai, install from the Hallmark skill page (Cursor guide, agent matrix, and one-line CLI copy included).

TL;DR

Why another design skill?

Most agent UIs fail on structure, not just colour. Two briefs — a sourdough app and a record-label EP — should not share the same hero → three features → CTA → footer rhythm. Hallmark's differentiator (documented in references/structure.md) is macrostructure variety: it picks layout archetypes per brief, dresses them in one of twenty named themes (Hum, Cobalt, Carnival, Lumen, Garden, Riso, modern-minimal, atmospheric, etc.), and only falls back to Custom when the brief carries creative intent no catalog theme fits.

The skill draws from the consensus anti-slop field — Anthropic's frontend-design guidance, Claude cookbook aesthetics, and the 2026 "tactile rebellion" movement — but packages it as enforceable gates, not vibes.

Four verbs

If you paste a URL without a verb, Hallmark asks whether to study (extract DNA) or use it as a reference for a fresh build.

Disciplines that hold on every verb

These six rules apply to build, audit, redesign, and study alike:

1. Pre-emit self-critique — Score 1–5 on six axes before shipping; anything below 3 triggers a revision pass. Stamp scores in a CSS comment.
2. Honest copy — No fabricated metrics. Stat-led layouts need real numbers, labelled placeholders (—), or a different macrostructure.
3. Locked tokens — After theme pick, every colour and font-family must reference named CSS variables. Inline OKLCH mid-render is forbidden.
4. No re-drawn chrome — Fake browser bars, phone bezels, and mock IDE windows are banned. Use real screenshots in <figure> or omit chrome.
5. Mobile floor — Verified at 320 / 375 / 414 / 768 px: no horizontal scroll, no two-line button labels, minmax(0, 1fr) on image grids.
6. Typography purity — Headings stay roman; italic display headers are treated as an AI tell.

Component-scope mode (single button, modal, card) skips page macrostructure but mandates all 8 interaction states with a .preview.html demo wrapper.

Pre-flight: read before you stomp

Before designing, Hallmark scans six signal sources in order:

1. design.md at project root (locked system from a prior redesign)
2. Font stack (next/font, @fontsource, Tailwind fontFamily)
3. Palette (:root tokens, tailwind.config, DTCG files)
4. Motion libraries (framer-motion, gsap, etc.)
5. Spacing scale
6. Framework (Next.js, Astro, Vue, vanilla)

Findings go to .hallmark/preflight.json for reuse. The block is the accountability line: here's what I noticed before I touched anything.

Install on explainx.ai (recommended)

The Hallmark skill listing on explainx.ai is the fastest path if you want agent-specific steps without digging through the repo:

1. Open explainx.ai/skills/Nutlope/hallmark/hallmark
2. Select your agent (Cursor, Claude Code, Codex, Windsurf, Cline, etc.)
3. Run from your project root:

npx skills add https://github.com/Nutlope/hallmark --skill hallmark

4. Select Cursor (or your agent) when the CLI prompts
5. Verify: .cursor/skills/hallmark/ exists · restart Cursor · invoke via /hallmark

The registry page includes security notes (review SKILL.md source before production), use cases, and links to related design skills. Always review skill source — skills execute in your environment.

Manual paths (from README)

Copy SKILL.md + references/ from the repo, or re-run npx skills add to update.

What good output looks like

Hallmark's README gallery shows brief-specific shapes — not colour-swaps of one template:

Each page is self-contained HTML + CSS with macrostructure stamped in a CSS comment. Browse live at usehallmark.com or under site/_tests/ in the repo.

Hallmark vs detecting slop after the fact

Hallmark is generative guardrails — it stops slop at emit time. That's complementary to detection tools (classical ML classifiers, Pangram, browser extensions) that score text after publication. If you're fighting AI-written fanfic or blog spam, see explainx.ai's LLM text detection guide. If you're fighting visual sameness in agent-built UIs, Hallmark is the upstream fix.

The shadcn creativity debate and Thoughtworks zero-cost fallacy cover why cheap copying compresses lead time — Hallmark doesn't solve attribution, but it does raise the floor on what "shipped" looks like when you still care about craft.

Limits and honest trade-offs

• Closed-weight models still interpret rules — Hallmark is long; context limits and model drift can skip gates. Run hallmark audit on output.
• Existing codebases need pre-flight — Without design.md, first run may conflict with hard-coded font-family: Inter vs next/font Geist. Hallmark flags conflicts; you confirm.
• Component vs page ambiguity — "Design a pricing section" triggers a one-question disambiguation; default is component if you don't answer.
• Study mode can't judge rhythm from URL alone — URL fetch names exact fonts and colours but not spacing feel; screenshot fallback when auth-walled.

Related on explainx.ai

• Hallmark skill — install guide ← start here
• What are agent skills? Complete guide
• How to build your first agent skill
• Thin prompts, thick artifacts, thin skills — Thariq
• LLM text detection — classical ML SVM
• AI copying creativity — shadcn debate
• Team skills distribution — security-first
• Browse all skills

Official sources: Nutlope/hallmark on GitHub · usehallmark.com demos · Hallmark on explainx.ai skills

Hallmark version, star count, and theme catalog reflect the Nutlope/hallmark README and explainx.ai registry listing as of July 17, 2026. Re-run npx skills add to pull updates; verify SKILL.md before production installs.