Hallmark — A Claude Code + Cursor Design Skill That Refuses to Look AI-Generated

Source: hallmark-design-skill-usehallmark-2026-05-19.md — usehallmark.com homepage extraction.

Hallmark is an Anthropic-skills-pattern design extension that ships into Claude Code or Cursor and changes how those AI coding assistants generate UI. The premise: LLMs converge to a recognizable default aesthetic (purple gradients, centered symmetry, identical feature-card grids, generic top nav) — and Hallmark refuses each of those defaults explicitly. Four modes (Build, Study, Audit, Redesign), eight non-configurable foundational rules, and a catalog of macrostructure archetypes that the skill picks from before it picks colors or layout. The differentiator vs other AI design tools tracked in this wiki is the refusal layer — Hallmark is engineered to not produce the AI-default look.

Key Takeaways

• A design skill, not a builder. Hallmark installs into Claude Code (~/.claude/skills/hallmark/) or Cursor (.cursor/rules/hallmark.mdc) and modifies how the existing AI coding tool generates UI. It’s not a standalone page builder like Neuform or Crafft.
• Four modes: build (generate new page; refuses to repeat structural choices), study (extract structural DNA from a screenshot or URL, never pixel-copy), audit (diagnose anti-pattern presence), redesign (reconstruct with deliberately different structural fingerprint).
• Refuses five identified AI tells: purple gradients, single-font layouts, centered symmetry, generic feature cards (icon-tile template), default nav patterns (wordmark-left + 4-link-centered + CTA-right).
• Eight foundational rules, non-configurable: type pairing (display ≠ body family), OKLCH color, geometric spacing scales, character-appropriate motion easing, distinct voice, asymmetric layout, readable hierarchy, restraint over decoration.
• Macrostructure-first decision order. Macrostructure → theme → enrichment. Most LLMs collapse all three into one pass and converge to the default. Hallmark forces sequence.
• Portable design.md output. lock the DNA after a study writes a portable design.md you can hand to another AI tool. Spec-as-documentation pattern — closes the gap between “AI agrees with my taste” and “any AI can pick up where the last one left off.”
• Differentiator vs adjacent tools: the refusal layer. Most AI design tools optimize for plausibility; Hallmark optimizes for being non-AI-shaped.
• Open at the homepage level. No pricing tier, no team page surfaced, no founders named. Open-source-or-similar license is the most likely model (Anthropic skills pattern is permissive by default). ^[inferred]

The Four Modes

Build

hallmark build <prompt> — Generates a new page with a strict decision order:

1. Pick macrostructure from the archetype catalog (Split Hero, Newspaper Masthead, Terminal Command Bar, Edge-aligned Minimal, etc).
2. Pick theme (paper band, accent hue, type roles).
3. Add enrichment (motion, micro-interactions, content density).

Explicitly refuses to repeat structural fingerprints across builds in the same session — second page in won’t match macrostructure of the first.

Study

hallmark study <screenshot | URL> — Returns a DNA card:

1. Invocation          hallmark study <ref>
2. Macrostructure      Split Hero
3. Hero archetype      H7 Clipped · copy-left + product-mock right
4. Display role        heavy geometric sans
5. Body role           same family · regular weight
6. Label role          grotesque · sentence case
7. Paper band          light · pure white
8. Accent hue          cool blue + magenta · organic gradient
9. Rhythm              left-copy · right product card · overlapping watercolor blobs
10. Refuses to         ID fonts · copy pixels

lock the DNA after study writes a portable design.md consumable by any other AI tool. Tighter refusal layer on the lockfile than on the diagnosis — never copies pixels, never IDs proprietary fonts.

Audit

hallmark audit <page> — Diagnoses against the anti-pattern catalog. Flags:

• Purple gradient defaults
• Generic feature-card grids (rounded rectangle + icon-in-colored-square + two-line heading + three-line copy + “Learn more →”)
• Centered-symmetry layouts
• Default top-nav patterns
• Single-font sites
• Geometric-spacing violations
• Fabricated proof / stats (a frequent LLM tell)

Redesign

hallmark redesign <page> — Reconstructs with a deliberately different structural fingerprint than the input. Combines Audit + Build into one pass.

The Five Refused AI Tells

The vocabulary of “tells” Hallmark explicitly refuses is named on the homepage:

1. Purple gradients. The default LLM accent palette. Hallmark uses OKLCH-defined palettes with intentional hue choices.
2. Single-font layouts. Mandates type pairing — display and body in different families.
3. Centered symmetry. Biases asymmetric.
4. Generic feature cards. The “icon-tile feature card” template (“rounded rectangle, icon in a coloured square top-left, two-line heading, three-line copy, optional Learn more →”). Hallmark calls it out as “the universal template” and refuses it as a default — only asymmetric, varied-size, varied-alignment feature layouts.
5. The AI nav. “Wordmark hard-left, four inline links centred, CTA button hard-right, sticky on scroll, hairline border-bottom. The shape every LLM ships.” Hallmark picks nav archetype to match page genre — newspaper masthead, terminal command bar, edge-aligned minimal.

The Eight Foundational Rules

Non-configurable. Hold across every theme. From the source:

1. Type pairing — display + body in different families
2. OKLCH color — perceptually-uniform color space, not hex/RGB
3. Spacing scales — geometric, not arbitrary
4. Motion easing — character-appropriate to the design genre
5. Distinct voice — text has personality, not LLM-default neutral
6. Asymmetric layout — vary alignments, vary sizes
7. Readable hierarchy — primary → secondary → tertiary clear
8. Restraint — intentional emptiness over decoration-filler

Differentiation vs Adjacent Tools

Tool	Form factor	What it does	Hallmark vs
Impeccable v3	Project scaffolding framework	High-design-quality frontend generation	Impeccable is broader; Hallmark is narrower on the anti-AI-aesthetic dimension and ships per-IDE
Refero Styles	Style-transfer-from-reference	Copy a reference site’s look	Refero pixel-transfers; Hallmark Study mode extracts DNA + refuses pixel-copy
Neuform	Standalone AI page builder	End-to-end page generation	Neuform is a builder; Hallmark is a skill inside your existing AI coder
Crafft	Standalone AI page builder	End-to-end	Same delta as Neuform
Open Design	Spec-prompt + agent loop	Convert specs to working code via agentic loop	Different lifecycle — Open Design is full-build-from-spec; Hallmark is in-IDE skill
beautiful-html-templates	30-template HTML deck library	Clone + follow templates	Templates-as-source-of-truth; Hallmark is generative with refusal layer
Codex + MagicPath workflow	4-tool composition	MagicPath + Mobbin MCP + skills.sh + Make-Interfaces-Feel-Better	Hallmark could slot into the chain as the anti-default enforcement step
MotionSites	Motion-driven site builder	Animation-first generation	Orthogonal — motion vs structure

Installation

# Canonical (via the skills CLI)
npx skills add nutlope/hallmark
 
# Manual fallback
git clone https://github.com/Nutlope/hallmark
# Copy files into:
#   ~/.claude/skills/hallmark/      (Claude Code)
#   .cursor/rules/hallmark.mdc      (Cursor)
#   Codex skill directory           (Codex)

Proof Points on the Site

A before/after demo for a “dev event landing page” prompt:

• Default Claude Code output: purple gradient hero, fabricated stats (“5,000+ developers”), generic feature card grid, centered symmetry, single-font.
• Hallmark-augmented output: asymmetric split hero, no fabricated numbers, varied-density feature blocks, custom nav matched to event-page genre, OKLCH-defined accent.

The user-visible difference is “this looks like a person made it” vs “this looks like Claude defaulted.”

When to Use Hallmark vs Other Tools

• Use Hallmark when you’re already in Claude Code or Cursor, generating UI, and you keep hitting the AI-default-aesthetic ceiling. Hallmark is the lowest-friction refusal-layer.
• Use beautiful-html-templates when you want a 30-template gallery + clone-and-follow workflow.
• Use Impeccable v3 when you want the broader project-quality scaffolding.
• Use Codex + MagicPath chain when you want the deepest design-research-to-deploy pipeline (Mobbin references + Vercel preview).
• Stack Hallmark inside the Codex + MagicPath chain as the structure-discipline step — its refusal layer complements MagicPath’s reference-search and Make-Interfaces-Feel-Better’s micro-interaction polish.

Repo and File Structure

[GitHub star — Nutlope/hallmark] Source: raw/gh-star-nutlope-hallmark.md (starred 2026-05-19; 457 stars / 23 forks at capture; MIT license; primary language CSS; 109 commits in history). The repo confirms Nutlope/hallmark is the same project as usehallmark.com (the homepage’s “Live demo →” link points there). Maintainer is the GitHub handle Nutlope. The repo surface shipped beyond the homepage’s marketing copy:

• SKILL.md — the core routing file with a “six-step design flow” and “65-gate slop test” (the latter being a more concrete metric than the five-tell vocabulary surfaced on the homepage).
• references/ — rule files for typography, color, layout, motion, microinteractions, 21 named macrostructures, and 40 component archetypes.
• docs/ — human-readable recipes and study examples.
• site/ — the landing page itself; ships 22 themes across 4 genre clusters (editorial, modern-minimal, atmospheric, playful).
• .hallmark/log.json — project memory; tracks previous runs so the skill can explicitly refuse to repeat structural choices within a session.

Three concrete additions to the 65-gate slop test (not on the homepage): input-state validation, APCA contrast checks, and “AI nav fingerprint” detection. APCA inclusion is a tell that Hallmark’s accessibility floor is above the WCAG-21 baseline most AI design tools default to.

Installation update. npx skills add nutlope/hallmark is the canonical one-line install via the skills CLI; manual copy into Claude Code / Cursor / Codex skill directories is the fallback. MIT license — “Use it, fork it, ship it” (confirmed in the repo LICENSE file, resolving the prior Open Question).

Open Questions

• Founder identity. GitHub handle Nutlope is the maintainer of record; this is Hassan El Mghari (well-known shipped-projects-quickly developer behind several Vercel-ecosystem demos). ^[inferred — the README WebFetch did not surface a full name; matched against the Nutlope handle’s known association]
• Full macrostructure archetype catalog. The site references “H7 Clipped” implying a numbered hero-archetype catalog. The references/ directory in the repo now confirms 21 named macrostructures; reading the file directly would enumerate the full catalog.
• Beyond Claude Code + Cursor. Codex support is now confirmed in the install path (Anti-AI-slop design skill for Claude Code, Cursor, and Codex. — official repo description). Other tools (VS Code Antigravity, Aider, OpenCode, Gemini CLI, Continue) still untested.
• Benchmark data. The 65-gate slop test is more concrete than the five-tell vocabulary, but “Hallmark refuses N% of AI-default tells across M prompts” measurement still pending.
• 22 themes across 4 genre clusters. Editorial / modern-minimal / atmospheric / playful — but the per-theme delta vs the default usehallmark.com aesthetic isn’t surfaced in the homepage extraction.

Related

• AI Web Design topic index
• Codex + MagicPath Design Workflow — the 4-tool composition Hallmark slots into.
• Impeccable v3 — adjacent design-quality framework.
• Refero Styles — closest in pattern to Hallmark’s Study mode but pixel-copies rather than DNA-extracts.
• beautiful-html-templates — template-library alternative.
• Claude AI topic — Hallmark ships as a Claude Code skill, so it sits adjacent to the skills coverage there.

Try It

1. Install into Claude Code via the auto-detect path (~/.claude/skills/hallmark/).
2. Audit an existing AI-generated page first — run hallmark audit <url> against any page Claude Code or Cursor produced for you in the last month. See how many of the five tells appear.
3. Study a design you admire. hallmark study <screenshot or url> against a reference site. Save the DNA card with lock the DNA — that’s a portable spec.
4. Build with the locked DNA. Pass the saved design.md to a second AI tool (a different Claude Code instance, Cursor, or even Codex) and verify the structural fingerprint survives the handoff.
5. Stack into the Codex + MagicPath chain. Insert Hallmark as the refusal layer between MagicPath reference search and final implementation.