Hallmark: Anti-Slop Design Skill for Claude Code
Nutlope/hallmark
Hallmark is a free design skill, not an app — it loads into Claude Code, Cursor, or Codex and runs your UI brief through 57 anti-pattern checks so it avoids the same gradient-hero template every AI-generated site uses. Reach for it if you build front-end UI with one of those tools and want to clean up existing "AI-slop" code. Skip it if you use a different coding tool or need pixel-exact reproduction of a reference design.
A Skill, Not an App: 57 Anti-Slop Gates
The Hallmark design skill isn't an app, library, or framework — it's a prompt-and-reference package that Claude Code, Cursor, and Codex read as instructions before generating a UI. It gives the model a macrostructure-selection process, one of twenty named themes, and a checklist of fifty-seven "slop" patterns to avoid, like the recurring gradient hero or rounded-card grid. The model self-critiques against that checklist before returning the page.
Why Every AI-Built Landing Page Looks the Same
Every mainstream coding LLM trained on largely the same web, so when you ask any of them for a UI, they reach for the same defaults — the blue-to-purple gradient hero, the three rounded feature cards, the same handful of fonts and icon sets. Two unrelated products built by two different teams using AI assistants can end up looking like reskins of the same template. Hallmark's stated goal, per its README, is that two pages built from different briefs should "feel like different sites, not colour-swaps of the same template" — the Hallmark design skill exists specifically to break that convergence.
A Public Gallery Gave People Something to Screenshot
Hallmark crossed 18,000 stars because it names a complaint a lot of developers already had quietly: ask Claude Code, Cursor, or similar tools for a landing page and you get a recognizable house style. Together AI shipped a public gallery at usehallmark.com where you can flip through all twenty themes by pressing T, giving people something to screenshot and share instead of taking a README's word for it. It also rides the current wave of "Claude Code skills" as a distribution format — zero install friction (one npx command), no new tool to learn, no account to create. That combination is what makes Hallmark spread by screenshot rather than by marketing copy.
Build, Audit, Redesign, Study — Four Verbs
- ✓Four verbs in one skill: default build, `hallmark audit <target>` (scores existing code against anti-patterns, no edits), `hallmark redesign <target>` (new visual fingerprint, same copy and IA), `hallmark study <screenshot|URL>` (extracts design DNA, refuses pixel-clones)
- ✓57 slop-test gates plus a pre-emit self-critique pass run before any UI is handed back
- ✓20 built-in themes selected by macrostructure fit to the brief, browsable in a live gallery at usehallmark.com (press T to cycle)
- ✓Custom mode kicks in when a brief doesn't fit any catalog theme and builds a bespoke palette/type/layout from scratch under the same 57 gates
- ✓`study` mode can output a portable design.md so a design language pulled from one project can be handed to a different AI tool
- ✓Ships as SKILL.md + references/, installable with one `npx skills add` command across three separate assistants
From First-Draft Landing Pages to Design Audits
- •Generating a first-draft SaaS landing page in Claude Code without landing on the default gradient-hero look
- •Running `hallmark audit` on an existing Next.js or React codebase before a client demo to get a punch list of AI-pattern tells
- •Using `hallmark redesign` to give a dated internal dashboard a new visual fingerprint without rewriting its copy or information architecture
- •Extracting a color/type/layout language from a screenshot of an admired site with `hallmark study`, without producing a pixel clone
- •Keeping visual output consistent when different team members use Claude Code, Cursor, and Codex on the same project
One npx Command Into Claude Code, Cursor, or Codex
`npx skills add nutlope/hallmark` — re-run the same command later to update. There's no package to add to package.json and nothing to build; it just drops SKILL.md and a references/ folder wherever your tool expects skills. Manual install, if you'd rather skip the npx installer: copy SKILL.md + references/ into Claude Code's ~/.claude/skills/hallmark/, into Cursor's .cursor/rules/hallmark.mdc (body content only — Cursor's rule format doesn't take the frontmatter), or into Codex's ~/.codex/skills/hallmark/ for a personal install or .codex/skills/hallmark/ for project-scoped.
Running Audit, Redesign, and Study
Once installed, you invoke it through your assistant, either by default (describe the UI you want and it builds, then runs the slop test automatically before returning code) or by naming one of the other three verbs: `hallmark audit <target>` to score code already in your repo against the anti-pattern list without touching it, `hallmark redesign <target>` to rebuild a page's visuals while keeping its existing copy and structure, or `hallmark study <screenshot|URL>` to pull macrostructure, type-pairing, and color-anchor choices out of a reference design. Exact invocation phrasing beyond those four commands is not clearly documented in the README — you're relying on the skill instructions the model reads, not a CLI you type into directly.
What Hallmark Gets Right
- ✓Free, MIT-licensed, one-command install, no account or API key of its own to set up
- ✓Names a real, specific problem — same-looking AI UI — instead of a generic AI-website-builder pitch
- ✓Four distinct verbs (build, audit, redesign, study) cover more of the workflow than a one-shot generator
- ✓`study` mode has a stated ethical line: it refuses to pixel-clone reference designs or paid templates
- ✓Real adoption signal — 18k+ stars, 920 forks, backed by Together AI
You're Trusting the Model to Follow 57 Gates
- △Not a standalone app — there's nothing to run, test, or deploy on its own; it only does anything inside Claude Code, Cursor, or Codex, so if you use a different AI coding tool it's dead weight
- △Quality depends on the underlying model actually following the skill instructions consistently — the 57 gates are prompted checks, not a separate automated linter you can run and verify independently
- △Repo has no topics/tags set, and the language stat (CSS) reflects example output rather than application code, so you're trusting the README's description of what the gates do rather than reading enforceable source
- △Exact invocation syntax beyond the four named verbs isn't clearly documented, and Cursor's install path (strip frontmatter, paste into a .mdc file) is more manual than the one-line npx path for Claude Code
- △No changelog or versioning mentioned for the 20 themes or the gate list, so it's unclear how often the anti-slop patterns get refreshed as the underlying models change
Hallmark vs Agent Skills, v0, and shadcn/ui
Who Actually Benefits From Hallmark
Worth installing if you're already generating front-end UI with Claude Code, Cursor, or Codex and can point to the exact "AI-slop" look you're tired of — gradient heroes, identical card grids, the same font pairing. Skip it if you're not on one of those three tools, if you need a UI that matches an existing brand system exactly (audit and redesign assume you already have code or a brief to point it at, and study mode won't clone a reference), or if you want deterministic, testable output rather than prompt-guided behavior that depends on the model actually following instructions.
Hallmark FAQ
It's a design skill — SKILL.md plus a references/ folder — that Claude Code, Cursor, and Codex load before generating UI, built by Together AI to stop AI-generated pages from all defaulting to the same look.
Yes. It's MIT-licensed and free to install; the only cost is whatever you already pay to run Claude Code, Cursor, or Codex.
It also supports Cursor and Codex, each with its own install path. Outside those three tools it doesn't do anything — it's not a standalone app or a design system you can pull into an unrelated stack.
No — `hallmark study <screenshot|URL>` extracts structural and stylistic patterns (macrostructure, type pairing, color anchor) from a reference design, but the README states it explicitly refuses pixel-clones and paid templates.
Run `npx skills add nutlope/hallmark`, or copy SKILL.md and references/ manually into the skill directory for whichever tool you use — the exact location differs slightly for Claude Code, Cursor, and Codex.