TL;DR

Hallmark is a single Agent Skill that plugs into Claude Code, Cursor, and Codex and refuses to let them generate the same tired hero → 3-feature → CTA → footer landing page every LLM was trained into. Made by Hassan El Mghari (@nutlope) at Together AI. Key facts:

  • 12,462 GitHub stars (8,075 this week — currently #1 trending on GitHub globally)
  • 20 named themes + a quiet “custom” branch that generates a one-off OKLCH palette when the brief has creative intent
  • 57 slop-test gates plus a pre-emit self-critique on 6 axes (Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety — anything under 3 triggers a revision pass)
  • 4 verbs: default (build), hallmark audit, hallmark redesign, hallmark study
  • One-command install: npx skills add nutlope/hallmark
  • Portable Agent Skills format: works with Claude Code, Cursor (as .cursor/rules), and Codex — no lock-in
  • MIT license, single SKILL.md + references/ folder — you can read the whole rule-set in an hour
  • The differentiator vs Taste, Impeccable, Stitch: Hallmark insists on structural variety, not just visual variety. Two Hallmark pages for different briefs should have different section rhythms, not colour-swaps of the same template

If Taste Skill (which I reviewed in April) fixed the pixel-level AI tells — purple gradients, centered heroes, Inter everywhere — Hallmark is going after the deeper problem: AI-generated sites all have the same skeleton. Same page structure, same rhythm, same 3-column grid. Hallmark encodes rules that force the model off that skeleton.

Quick Reference

VerbWhat it does
(default)Build new UI. Picks a macrostructure, applies the rule-set, runs the slop test before handing back
hallmark audit <target>Score existing code against the anti-patterns. Punch list, no edits
hallmark redesign <target>Throw out the visual structure, keep copy + IA + brand, rebuild with a different fingerprint
hallmark study <screenshot | URL>Extract the DNA from a design you admire: macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates

Install (Claude Code):

npx skills add nutlope/hallmark

Install (Cursor): copy skills/hallmark/SKILL.md body (no frontmatter) to .cursor/rules/hallmark.mdc

Install (Codex): ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project-scoped)

What Actually Ships

Hallmark is not a component library. It’s a single opinionated SKILL.md (about 300 lines) plus a references/ folder containing the deep rule-set:

skills/hallmark/
├── SKILL.md                    # Entry point — verbs, disciplines, dispatch
└── references/
    ├── structure.md            # Macrostructure catalog + diversification
    ├── slop-test.md            # 57 gates + pre-emit self-critique
    ├── anti-patterns.md        # The AI tells (italic headers, purple, etc.)
    ├── responsive.md           # 320/375/414/768 non-negotiables
    ├── custom-theme.md         # OKLCH palette generation protocol
    ├── study.md                # DNA extraction from screenshots/URLs
    └── themes/                 # 20 catalog themes (Hum, Cobalt, Carnival…)

The SKILL.md frontmatter is minimal:

---
name: hallmark
description: Anti-AI-slop design skill for greenfield pages, audits, redesigns,
  and design extraction from URLs or screenshots. Use when the user asks to build
  a new app or landing page, wants to redesign something, invokes Hallmark by name,
  or uses audit/redesign/study.
version: 1.1.0
---

That description is doing real work — it’s how the host agent (Claude Code, Cursor, Codex) decides when to invoke the skill. The Agent Skills spec matches on natural language (“build me a landing page” → Hallmark fires), so a vague description means the skill never runs when you need it.

The 6 Disciplines (Non-Negotiables)

Hallmark’s SKILL.md codifies six rules that apply across every verb — default build, audit, redesign, study. This is the shortest useful summary of the anti-slop consensus I’ve seen:

  1. Pre-emit self-critique. Before returning anything, score the output 1–5 on six axes: Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety. Anything under 3 triggers a revision pass. The scores are stamped as a CSS comment: /* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */
  2. No re-drawn UI chrome. Don’t render fake browser windows, fake macOS chrome, or fake IDE surrounds around code samples. Use real screenshots or let content stand on its own.
  3. Mobile-responsive at 320 / 375 / 414 / 768 px. Hard floor, not a wish list. No horizontal scroll, no two-line clickable text, image grids use minmax(0, 1fr) never bare 1fr, display headers wrap on long words with overflow-wrap: anywhere.
  4. Typography purity — no italic headers. Italicised words inside headings (“Built to think”) is one of the most reliable AI tells. Carry emphasis with weight, colour, or a drawn underline. Italic survives only in body copy.
  5. Structural variety per brief. Same-shape pages across different briefs is the deepest tell. The macrostructure catalog is designed to rotate.
  6. Additive edits by default. Never delete production files, route trees, component directories, or an old website without explicit user confirmation. State every file to modify/create/delete before touching anything.

Discipline #6 is worth calling out separately — it’s the piece other design skills usually punt on. Taste, Impeccable, and Stitch tell the model what to draw; Hallmark also tells it what not to delete.

The 20-Theme Catalog

Each theme is a triple: (macrostructure archetype, type-pairing, colour anchor). Examples from usehallmark.com:

  • Hum — Sourdough app: soft rounded, cream/rust palette, serif display
  • Cobalt — Extraction API: sharp technical, deep-blue anchor, mono display
  • Carnival — Record label: high-contrast display, magazine grid, playful color
  • Lumen — AI tool: dark surface, cool accent, restraint-first
  • Garden — Honey farm: organic layout, warm neutrals, script accent
  • Riso — Print fair: mis-registered aesthetic, limited palette, grid violations

When a brief carries creative intent that no catalog theme fits — “cassette tape from 1987” — Hallmark quietly switches to Custom and constructs a one-off OKLCH palette + free-font pairing. Same 57 slop-test gates, no template underneath. Vanilla briefs never see the words “catalog” or “custom”; routing is silent.

Real Install Walkthrough (Claude Code)

The one-line install actually works:

$ npx skills add nutlope/hallmark
✓ Fetched Nutlope/[email protected]
✓ Installed to ~/.claude/skills/hallmark/
✓ SKILL.md registered (name: hallmark)

Next: try "build me a landing page for a sourdough delivery app"

Now in Claude Code, a plain-language brief triggers Hallmark automatically because the description field in the frontmatter matches:

User: Build me a marketing page for a small artisanal sourdough delivery app
       called "Levain Local". Rustic vibe, weekly subscription, 3 tiers.

Claude Code:
> Loading skill: hallmark v1.1.0
> Signal detection: creative-intent = false (vanilla brief)
> Route: catalog
> Rotation check: last theme was Cobalt → picking Hum (Bubble macrostructure)
> Applying anti-patterns.md, structure.md, responsive.md
>
> Emitting: levain-local.html
> /* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */

The generated page for that brief looked genuinely different from what stock Claude produces — no centered hero, no 3-icon feature grid, no purple gradient CTA. The pubDate: 2026-07-18 version I tested picked a magazine-style split hero with the pricing tiers laid out as an editorial pull-quote row, not a 3-column card grid.

The study Verb (Underrated)

This is the verb people are missing in the discourse. It handles two modes:

URL mode:

> hallmark study https://linear.app
> Reading page via WebFetch...
> Diagnosis:
>   Macrostructure: single-column-narrative
>   Type pairing: Inter Display + Inter Text (fallback)
>   Colour anchor: OKLCH(0.62 0.14 264) — deep indigo
>   Rhythm: 88px vertical between sections, no filler
>   Fingerprint: dense-text-hero, single feature loop, subtle motion

Image mode: paste a screenshot of a design you admire — Hallmark extracts the DNA (macrostructure, archetypes, type-pairing, colour anchor) and produces a diagnosis report. It refuses to pixel-clone paid templates (Themeforest, Framer templates with visible watermarks) — a rule I appreciate more the longer I watch the AI-slop discourse.

Optionally, it emits a portable design.md you can hand off to Cursor or Codex to build with the extracted DNA. That’s opt-in and requires you to attest the source is your own or a public reference.

Community Reactions

Hallmark shipped v1.1.0 in early May 2026, and the reactions cluster clearly:

Hassan El Mghari’s launch on X (May 21, 2026) — 4K+ reposts. Reply thread dominated by devs posting before/after screenshots of their own SaaS pages. Consensus: pages stop looking “designed by an AI,” though a small subset can still spot them as “designed by Hallmark specifically” — the catalog is itself a fingerprint.

HackerNews (early June 2026, 220+ points) split three ways: frontend engineers loved the audit verb (“caught 14 gates I would’ve missed on our landing page”); designers were cautious (“twenty catalog themes is still a template library, no matter how many gates you put in front”); skill-writers praised the SKILL.md as a reference implementation of the Agent Skills format — the description field is a masterclass in trigger-writing.

r/ClaudeAI (June 8, 2026) top comment: “this is the skill Claude was waiting for.” Fair — the pre-emit self-critique pattern (score 1–5 on six axes, revise anything under 3) has been quietly copied into several other skills since. A YouTube walkthrough (May 20, 2026) is refreshingly honest — one demo page still shipped fake browser-chrome around a code sample despite Discipline #2. Flagged, fixed in v1.1.

Honest Limitations

  1. The 20-theme catalog is still a template library. If two teams both install Hallmark and both roll Cobalt for a data-tools brief, their pages will look related. Rotation helps; it isn’t infinite. The custom branch only fires on creative-intent briefs.
  2. Gates are heuristics. The 57 slop-test gates are checklist items, not runtime linters. A determined LLM will still emit “hero + 3 features + CTA” if the brief steers there.
  3. study has sharp edges. URL mode reads via WebFetch — fine on static HTML, fails silently on JS-heavy SPAs. Screenshot mode is more reliable.
  4. Version churn. v1.1 advertises 20 themes / 57 gates; a public mirror already lists 22 themes / 65 gates. v1.2 is in flight. Re-run npx skills add monthly.
  5. Cursor install drops the version stamp. .cursor/rules/hallmark.mdc strips the frontmatter — no hallmark --version command; check file mtime.
  6. Not for app UIs. Hallmark is a page-level design skill. Dashboards, editors, canvases, complex form flows sit outside the ruleset. It’s landing-pages-and-marketing wearing a general-design hat.

Hallmark vs Taste vs Impeccable vs Stitch

The anti-slop design-skill category is genuinely crowded now. Here’s how they position:

SkillAuthorFocusGitHub Stars
HallmarkNutlope / Together AIStructural variety, 20 themes, 57 gates, 4 verbs12.5K
Taste SkillLeonxlnxPixel-level anti-slop, 7 variants, 3 tunable dials7.9K
ImpeccablePeter Bakaus”Design language” — deep prescriptive rules47.8K
Stitchgoogle-labs-codeDesign-to-code via Stitch MCP + skill library7.6K

When to pick Hallmark: you’re building marketing pages, landing pages, or brand sites and want the page-shape to change per brief, not just the colour. The audit and study verbs are unique in this category.

When to pick Taste: you want fine-grained dials (motion intensity, visual density) and framework-agnostic drop-in rules for existing app code.

When to pick Impeccable: you’re going all-in on one aesthetic point of view and want the deepest ruleset — Impeccable is long, not opinionated the way Hallmark is short.

When to pick Stitch: you already use Figma + Stitch and want the design tokens to flow into code automatically via MCP.

They’re mostly stackable. Nothing in Hallmark conflicts with Taste — you can install both and the routing (hallmark audit vs plain builds) keeps them from stomping each other.

Setup Time

  • Install: 20 seconds (npx skills add)
  • First build: ~90 seconds for a full landing page in Claude Code Sonnet 4.5
  • Audit run on existing page: ~30 seconds, returns a ranked punch list
  • Skill config: none — no dials to tune, no env vars, no API keys

Compared to the last three Agent Skills I installed, Hallmark had the smoothest zero-config experience. The tradeoff is that you can’t tune it — it’s opinionated by design.

FAQ

Is Hallmark free? Yes — MIT license. The repo is fully open, install is free, and Together AI (the sponsor) doesn’t gate any part of the skill. There’s no telemetry, no login, no “premium tier.”

Do I need a Together AI account? No. Hallmark is a SKILL.md file plus reference docs. It runs entirely inside your host agent (Claude Code, Cursor, Codex) using whatever model that agent is configured with. Together AI sponsored the work but doesn’t require you to use their inference.

Does Hallmark work with Windsurf or GitHub Copilot? Not officially in v1.1. The install script targets Claude Code, Cursor, and Codex directly. But the SKILL.md is portable — anyone using an agent that reads Agent Skills–format files can drop it in manually. Windsurf’s skill support landed in June, so a community port is likely within weeks.

Is the study verb legally safe? Can I extract DNA from any URL? The verb refuses template-marketplace URLs (Themeforest, Framer templates with visible watermarks) and pixel-cloning. URL-mode emission of a portable design.md requires attestation that the source is your own or a public reference for your own brand. The diagnosis report has a lighter refusal layer than the emission step — you can always look, but “lock the DNA” gates harder.

Can I add my own theme to the catalog? Yes — the 20 themes are just files in references/themes/. Fork the repo, add your theme following the existing format (macrostructure archetype + type-pairing + colour anchor + example), and either send a PR or install your fork instead of nutlope/hallmark. The custom branch is also fully documented in references/custom-theme.md if you’d rather generate one-off palettes per brief.

How does the 57-gate slop test actually run? The gates are checklist items in references/slop-test.md. Before emit, the agent runs through them (many are visual/structural, some check emitted CSS/HTML directly), fails on any hard-floor violation (mobile responsive, no italic headers, no re-drawn UI chrome), and stamps the pre-emit critique scores in a CSS comment. It’s a prompt-time discipline, not a runtime linter — but the emitted CSS comment lets you audit whether the model actually did the pass.

Verdict

If you build marketing pages or landing pages with AI assistants and you’ve noticed they all look eerily related — same rhythm, same 3-column feature block, same purple gradient — Hallmark is the sharpest tool in the anti-slop category right now. The structural-variety rule is the piece other skills haven’t nailed, and the four-verb design (build / audit / redesign / study) is a genuinely better ergonomic than the “one big skill that does everything” pattern.

It’s not a design system replacement. It won’t help you ship a dashboard, an editor, or an app UI. It’s an opinionated landing-page skill with a great audit verb and a smart custom branch. For that specific job, it’s the best thing in the ecosystem today — and it costs you exactly nothing to install.

Install: npx skills add nutlope/hallmark Repo: github.com/Nutlope/hallmark Live demo: usehallmark.com

Sources