Youssef
bd9e9ab859
Adds Carnival, Lumen, Hum, and Cobalt to the catalogue (now 20 themes), each with its own tokens block, hero archetype, landing copy, and spec doc. Introduces Custom as a first-class route: when a brief carries real creative intent, Hallmark designs the whole page from first principles — palette, type, and structure — rather than recolouring a catalogue theme. Ships five worked custom examples and a README section. Rewrites the per-theme landing copy and reconciles every catalogue count across the site and the skill (20 themes · 21 macrostructures · 50 component archetypes · 70 slop-test gates). Drops the last competitor references from the CSS comments, fixes the genre rosters, and ignores the local example explorations so only the featured builds ship.
Hallmark
A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.
Live demo → · twenty themes · four verbs · press T to cycle.
Made by Together AI.
Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs seventy slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into. Two pages by Hallmark for two different briefs feel like different sites, not colour-swaps of the same template.
Four verbs
| Verb | What 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 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. Optionally emits a portable design.md for handoff to other AI tools. |
Different briefs, different shapes
Each generated by exercising the skill on a different brief. The skill picks differently every time — no two share a macrostructure or theme.
 |
 |
 |
 |
| Tally SaaS · modern-minimal |
Wayfare Travel · atmospheric |
Slow Pour Coffee subscription |
BananaStudio Studio · playful |
 |
 |
 |
 |
| Anya Reis Personal site |
NAJM Fashion brand |
Søroe Ceramics studio |
Hyperlane Dev infrastructure |
Each page is self-contained HTML + CSS, stamped with its macrostructure in the CSS comment. Browse the full set at usehallmark.com or under site/_tests/.
Custom NEW
Most briefs route to the catalog. But when a brief carries real creative intent — a named brand colour, a vibe the catalog can't carry, or a layout that is the point — Hallmark switches to Custom and designs the whole page from first principles: a made-to-measure OKLCH palette, a free-font pairing, and a structure no catalog theme would produce. Same seventy slop-test gates. No template underneath.
Four one-line briefs, four pages that share nothing:
 |
 |
 |
 |
| Setting the Night Edition Letterpress poem broadside |
The Cascadia Nightjar Sleeper-train ticket |
Ferns & Fathom Tea menu as a periodic table |
The Mend Assembly Repair-café manifesto poster |
Custom stays a quiet branch — vanilla briefs never see it. The protocol lives in custom-theme.md.
Install
npx skills add nutlope/hallmark
Re-run any time to update. Or copy SKILL.md + references/ into:
- Claude Code —
~/.claude/skills/hallmark/ - Cursor —
.cursor/rules/hallmark.mdc(body ofSKILL.md, no frontmatter) - Codex —
~/.codex/skills/hallmark/(personal) or.codex/skills/hallmark/(project-scoped)
The rule-set lives in SKILL.md and references/. Worked examples in docs/recipes.md and docs/study-examples.md.
Licence
MIT. Use it, fork it, ship it.