Hallmark

A design skill that studies what you admire — and rebuilds your content with it.

→ Live demo: hallmark-murex.vercel.app · twenty-two themes, eight worked tests, press T to cycle. → Current version: v0.8.0 — adds genres (editorial · modern-minimal · atmospheric · playful), design.md for whole-project redesigns, lazy reference loading, the 2+1 font rule with 50-gate slop test, component-library exports (tokens.css always emitted; Tailwind / DTCG / shadcn formats inline in design.md), a Study gallery on the marketing site, and seven new themes (Quiet refreshed, plus Bloom, Coral, Violet, Aurora, Halo, Plume).

Hallmark is the anti-AI-slop rule-set for Claude Code, Cursor, and Codex. It encodes the tactile-rebellion consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated skill that refuses to emit the on-distribution defaults every LLM was trained into.

Powered by Together AI.

---

Try it

Paste this into Claude Code, Cursor, or Codex with the Hallmark skill installed:

"Build me a landing page for Coffeebox — a small-batch coffee subscription. Roast on Sunday, ship on Monday, drink Tuesday. Audience: people who already buy good coffee. Tone: warm, hand-set, editorial."

If Hallmark is wired correctly, you'll see Long Document · Linen (warm-paper roman-serif) · Tier-B hand-built SVG. Eight more worked briefs are documented in docs/recipes.md — copy/paste them to discover the skill before reading anything else.

---

What's distinct — quick map vs the field

	Hallmark	frontend-design (Anthropic)	Open Design	Dembrandt
Source of taste	extracts DNA from a screenshot you admire (study verb)	art-director brief + ban list	menu of 72 brand presets (Linear, Stripe, Vercel, Notion…)	scrapes a live URL, emits computed tokens
Output unit	macrostructure + theme + custom-craft	bans + brief framing	preset application	DTCG tokens.json
Refuses font ID	yes — names role, never guesses	n/a	n/a	n/a (computes from CSS)
Refuses pixel-clone	yes — DNA only, never pixels	n/a	n/a	n/a (full token export)
Tactile-rebellion alignment	warm-paper, custom-craft, slopless canon	strong	medium	none — token-only
Pages by archetype	21 named macrostructures, picked per brief	by brief	5 deterministic directions	n/a
Verbs	5 (default · audit · refine · redesign · study)	1	31	1 (CLI)

Hallmark's edge is study — every other tool ships a preset menu or a scraper. Hallmark is the only one that takes a screenshot of a design you admire, names what it sees, refuses paid-template-marketplace listings, and rebuilds your content with the extracted DNA. Three worked study examples in docs/study-examples.md.

---

Five verbs

Verb	What it does
(default)	Build new UI. Asks for audience + use + tone (skippable — the skill states what it inferred). Picks a macrostructure, applies the rule-set, runs the slop test before handing back.
hallmark audit <target>	Score existing code against the named anti-patterns + structural sameness. Punch list, no edits.
hallmark refine <target>	Polish in place. Smallest possible diff. Preserves structure.
hallmark redesign <target> [--mood <name>]	Throw out the structure, keep copy + IA + brand, rebuild with a deliberately different fingerprint.
hallmark study <screenshot>	The differentiator. Extract the DNA from a design the user admires — macrostructure, archetypes, type-pairing role, colour anchor — and produce a diagnosis report. Optionally rebuild the user's content using the extracted DNA. Refuses paid templates and competitor pages. Names font roles, never font IDs. Never copies pixels.

---

Eight pages, eight different shapes

Generated by exercising the skill across contrasting briefs. No two share a macrostructure or theme.

Tide Quote-Led · Atelier · indie podcast	Streampipe Workbench · Terminal · CSS-art mockup	Maple Street Bread Long Doc · Linen · hand-built SVG loaf	Meridian Manifesto · 11-section practice
Tracejam Bento · Pastel · clipped-edge mockup	Anya Long Doc · Studio · personal one-pager	Foundry Stat-Led · Plain (#fff) · animated counter	Cohort Marquee Hero · Salon · continuous scroll

Each page is its own self-contained HTML + CSS — no shared theme, no shared layout. Every one carries a /* Hallmark · macrostructure: … */ stamp at the top of its CSS. See the full set under site/_tests/ or live at hallmark-murex.vercel.app.

---

What's inside

• SKILL.md — the routing file. Six-step design flow (including Step 2.5 · Check project memory reading .hallmark/log.json), 50-gate slop test, output contract, always-on tokens.css export.
• references/ — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the 36 component archetypes with variation knobs, the 6 primitive structure axes, the vision-extraction protocol for study, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays, per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).
• docs/ — human-reading content: recipes.md (8 worked briefs + a canonical try-it prompt) and study-examples.md (3 worked DNA-extractions). Not auto-loaded by the skill.
• site/ — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. Twenty-two themes clustered into four genres: editorial (Specimen, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), modern-minimal (Quiet, Coral, Violet), atmospheric (Midnight, Terminal, Bloom, Aurora, Halo), playful (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype.

---

What's distinct (the long list)

• One skill, five verbs. Not eighteen commands.
• Genres broaden the range. Hallmark routes a brief through one of four genres before picking a theme: editorial (default · the canonical anti-slop voice), modern-minimal (Stripe / Linear / ElevenLabs school), atmospheric (Suno / Runway / dark-AI-tool school), playful (post-Linear soft school). Each genre is its own rule overlay — atmospheric allows radial blooms; modern-minimal allows pure white and pill CTAs; editorial bans both. Detection is signal-based, silent default to editorial.
• Tone is a first-class decision. "Clean and modern" is rejected. Pick an extreme — editorial · brutalist · soft · technical · luxury · playful · austere.
• Macrostructures over axes. Pick one of 21 named whole-page shapes wholesale; the macrostructure stamp lives in the CSS comment, so the next Hallmark run picks something different.
• Within-archetype variation. Two Bento Grids should not be twins; each archetype has 2–3 picked-per-output knobs.
• Microinteractions as discipline. Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms.
• A 50-gate slop test runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots) and input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals).
• Project memory. A per-project .hallmark/log.json records each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 3–5 entries before picking and writes a new entry after each build, so consecutive Hallmark outputs in the same project don't repeat shapes or themes.
• Theme-diversification rule. Two consecutive themes must differ on at least one of three axes: paper band (dark / mid / light), display style (italic-serif / roman-serif / geometric-sans / mono / display-heavy / system-native), accent hue (warm / cool / neutral / chromatic-other).
• Voice fixtures over LLM defaults. Each of the 21 macrostructures ships with 2–3 example opening lines tuned to its tone. "Built for the modern team" is in the banned-phrases list.
• Hero enrichment is opt-in. A typographic-only hero is always acceptable. When enrichment is right, the skill picks from a six-tier hierarchy: typography only → custom-built CSS art → hand-built SVG → generated illustration (Nanobanana / Recraft) → library → Lottie (last resort).
• Microinteractions default-on for SaaS-shaped archetypes. Bento Grid, Stat-Led, Workbench, Marquee Hero pages ship with 2–3 purposeful microinteractions (number reveal, pricing lift, marquee, stagger) without the user having to ask. Editorial / Manifesto / Letter / Quote-Led pages stay still.
• SaaS page sequence. Hero → social proof → features → testimonials → pricing → FAQ → CTA → footer. Real prices, not "contact sales for pricing." Specific testimonials with role + company.
• Wordmark may use a different display face. A Geist-bodied SaaS page can set its wordmark in Fraunces. Same-family collapse on Bento / Stat-Led / Workbench / Marquee Hero is the new "un-branded" tell.
• study extracts DNA, not pixels. Refusal heuristics, type-role vocabulary (no font ID guessing), confirmation step before any code. Three worked examples in docs/study-examples.md.

---

Install

npx skills add hallmark

Or copy skill/ into ~/.claude/skills/hallmark/ (Claude Code) or .cursor/rules/hallmark.mdc (Cursor — body of SKILL.md, no frontmatter).

To preview the landing page locally:

cd site && python3 -m http.server 4173    # → http://localhost:4173

Press T to cycle themes, the shuffle button (or R) to randomise, ?theme=studio for a shareable link.

Or visit the live deploy at hallmark-murex.vercel.app.

---

Licence

MIT. Use it, fork it, ship it.