hallmark: give your agent actual design taste

Every AI-generated landing page looks like the same landing page. Purple-to-pink gradient hero. Inter on Inter. Three icon-tile feature cards in a row. Sticky nav with wordmark left, CTA button right. You've seen it a thousand times because every LLM was trained on a thousand pages that look exactly like that.1

Prompting your way out doesn't work. When you type "make it look nice," the model hears "average of training data" — it picks from the same peak every time.2 hallmark (by Hassan El Mghari / Together AI, MIT) puts a rules layer on top of your agent that forces it off that distribution before a single line of HTML is written.3

Released May 21, 2026, it hit 1,500 GitHub stars in under 30 hours.4 Supports Claude Code, Cursor, and Codex.

What it does

hallmark exposes four verbs that cover the full design workflow:

Verb	What it does
`hallmark build`	Default. Picks one of 21 named page structures (macrostructures), dresses it in one of 22 themes, then runs 69 anti-slop checks before handing code back
`hallmark audit <target>`	Scores existing code against the 69-gate catalog. Returns a punch list — no auto-edits
`hallmark redesign <target>`	Keeps your copy, IA, and brand; throws out the current layout and rebuilds with a different structural fingerprint
`hallmark study <url\|screenshot>`	Extracts design DNA from any page or screenshot and produces a portable `design.md` you can apply to your own project

The SKILL.md itself is intentionally plain:5

"Hallmark is opinionated, short, and boring on purpose. It encodes a tight set of rules — drawn from the consensus of the anti-AI-slop design field — and refuses to let the model fall back to the defaults every LLM was trained on."

The structural diversity claim is the key differentiator. Two builds from two different briefs produce different page shapes — not just different color swaps on the same hero → 3-feature → CTA → footer skeleton.3 hallmark tracks the last 3–5 runs in .hallmark/log.json and blocks reuse of the same macrostructure or theme cluster — so repeated builds on the same project stay structurally distinct.5

hallmark four-verb flow: Build/Redesign on the left, Audit/Study on the right, all routed through the agent with 65 slop-test gates at the bottom — Hallmark's four verbs and the 65+ gate quality check 6

Install (60 seconds)

npx skills add nutlope/hallmark

Re-run anytime to update. The installer detects your agent and places files accordingly:3

Claude Code → ~/.claude/skills/hallmark/
Cursor → .cursor/rules/hallmark.mdc (SKILL.md body only — strip the --- YAML frontmatter)
Codex → ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project-scoped)

No prerequisites, no runtime dependencies. The skill is plain Markdown context loaded by the agent.

One thing to know before you start building: hallmark reads your existing font stack, palette, motion stance, and spacing scale before asking anything.5 If you already have a design system, it won't bulldoze it.

`hallmark study`: the standout feature

build and redesign are useful. study is the reason this skill is getting installed over alternatives like impeccable or tasteskill.7

Give it a URL and it shallow-fetches the page's HTML and CSS — extracting exact font names from @font-face or Google Fonts declarations and exact OKLCH/hex color values from the DOM. Give it a screenshot and it runs a vision pass to identify type roles, color bands, macrostructure, and component archetypes without guessing specific font names.

Both modes output a structured diagnosis report. From there, three options:

"Build with this DNA" — applies the extracted palette and type pairing to a new brief
"Lock the DNA" — writes a portable design.md that works across Claude Code, Cursor, v0, Bolt, or any other AI tool
"Just the diagnosis" — stop at analysis

Reviewer Mervin Praison called it "the main differentiator" because it bridges the gap between "I like that design" and "now build something inspired by it" without crossing into pixel-cloning.6

View on X

Loading content card…

Known blind spot: URL mode can't judge visual rhythm — it reads what's in the code, not what the eye actually sees. For anything where whitespace and proportion matter more than font/color values, use a screenshot instead.

hallmark vs. frontend-design

If you covered last week's frontend-design skill (Anthropic, May 20), you already know one strong option for fighting AI-generated visual defaults. The two skills address different failure modes.

	hallmark	frontend-design
Core mechanism	21 macrostructures + 22 themes + 69 slop-test gates	Art-director brief + ban list of AI defaults
Design source	Screenshot/URL DNA extraction + hardcoded rule canon	4-question brief (audience, use case, tone, aesthetic direction)
Output	Self-contained HTML + CSS	Styled components inside your existing framework
Repetition prevention	`.hallmark/log.json` project memory (automatic)	Relies on user instruction
Unique capability	`study` verb (DNA extraction)	Tight integration with existing component systems
Agents supported	Claude Code, Cursor, Codex	Claude (built-in)

The practical split: hallmark is stronger when you're building multiple standalone pages (different briefs, different clients) or auditing existing AI-generated code for anti-patterns. frontend-design wins when you're working inside an existing React/Vue component library or need the output to drop directly into a design system.6 They can coexist in the same repo — hallmark for greenfield landing pages, frontend-design for component-level work.

Before (generic AI default): gradient hero, fabricated stats, 3-column icon tiles; After (hallmark): editorial layout, real content, asymmetric composition — Generic AI UI workflow vs. hallmark output 6

The live demo at usehallmark.com shows the before/after directly: same prompt, Sonnet 4.6 with vs. without the skill. Without hallmark: generic gradient hero, headline "Build the future. Together.", fabricated ★★★★★ trust strip. With hallmark (Marquee Hero · Atelier theme): editorial layout, italic Fraunces display, real content, no invented metrics.8

When not to use it

Component-based frontend stacks. hallmark outputs self-contained HTML + CSS. If your project runs on React, Vue, or a design-token system, the output doesn't drop in cleanly — you'll spend more time adapting it than it's worth.6
When you need to match an existing brand strictly. The 4pt spacing scale, OKLCH palette rules, and font pairing constraints are hardcoded and not configurable. If a client's guidelines conflict with those rules, hallmark will generate something that looks good but doesn't match their system.
Multi-model workflows. hallmark doesn't currently support orchestrated multi-model pipelines. If your stack chains models across providers, this is a gap.9
One-off throwaway pages. The project memory system adds value over multiple builds. For a single page you won't iterate on, the overhead of the full 7-step flow and 69-gate check is more than necessary.

A fair question from the community: does hallmark reduce AI tells, or does it help teams develop more coherent design thinking?10 The honest answer is the former, reliably. The latter depends on whether you use audit and study as learning tools, not just one-shot generators.

Skill metadata

Repo: github.com/nutlope/hallmark
Stars: 1,500+ (as of 2026-05-22, ~30 hours after launch)4
Forks: 102
License: MIT — "Use it, fork it, ship it."3
Author: Hassan El Mghari (@nutlope), Director of Developer Experience at Together AI. Co-author: @YoussefUiUx
Agents: Claude Code, Cursor, Codex
Version: 1.0.0 (no published releases; ships on main)
On the roadmap: more unique themes, image support, theme-aware motion tokens, hallmark variant, multi-page coherence11

Cover image from Nutlope/hallmark — GitHub