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, a design skill that refuses to look AI-generated

Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs fifty-seven 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 from a different brief. The skill picks the theme, structure, and craft to fit each one, not from a template.

<table> <tr> <td width="25%">[Bubble guided sourdough app hero](https://www.usehallmark.com/examples/hum-07/)</td> <td width="25%">[Distil content-extraction API hero](https://www.usehallmark.com/examples/cobalt-01/)</td> <td width="25%">[Cold Snap record-label EP hero](https://www.usehallmark.com/examples/carnival-01/)</td> <td width="25%">[Cinder AI reasoning tool hero](https://www.usehallmark.com/examples/lumen-01/)</td> </tr> <tr> <td><b>Bubble</b> _{Sourdough app · Hum}</td> <td><b>Distil</b> _{Extraction API · Cobalt}</td> <td><b>Cold Snap</b> _{Record label · Carnival}</td> <td><b>Cinder</b> _{AI tool · Lumen}</td> </tr> <tr> <td>[Ferns and Fathom tea menu hero](https://www.usehallmark.com/examples/custom-03/)</td> <td>[Hollowback Apiary honey farm hero](https://www.usehallmark.com/examples/garden-01/)</td> <td>[Off-Register risograph print fair hero](https://www.usehallmark.com/examples/riso-01/)</td> <td>[Press Quaternary type studio hero](https://www.usehallmark.com/examples/press-01/)</td> </tr> <tr> <td><b>Ferns &amp; Fathom</b> _{Tea menu · Custom}</td> <td><b>Hollowback Apiary</b> _{Honey farm · Garden}</td> <td><b>Off-Register</b> _{Print fair · Riso}</td> <td><b>Press Quaternary</b> _{Type studio · Custom}</td> </tr> <tr> <td>[Tally SaaS product page hero](https://www.usehallmark.com/examples/tally/)</td> <td>[Wayfare travel booking hero](https://www.usehallmark.com/examples/wayfare/)</td> <td>[NAJM Moroccan fashion brand hero](https://www.usehallmark.com/examples/najm/)</td> <td>[Hyperlane developer infrastructure hero](https://www.usehallmark.com/examples/hyperlane/)</td> </tr> <tr> <td><b>Tally</b> _{SaaS · modern-minimal}</td> <td><b>Wayfare</b> _{Travel · atmospheric}</td> <td><b>NAJM</b> _{Fashion brand}</td> <td><b>Hyperlane</b> _{Dev infrastructure}</td> </tr> </table>

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

When a brief carries creative intent that no catalog theme fits, Hallmark switches to Custom and designs the page from scratch: a made-to-measure palette, type, and layout. Same 57 slop-test gates, no template underneath.

<table> <tr> <td width="50%">[The Cascadia Nightjar sleeper-train ticket hero](https://www.usehallmark.com/examples/custom-02/)</td> <td width="50%">[The Mend Assembly repair-café broadsheet hero](https://www.usehallmark.com/examples/custom-04/)</td> </tr> <tr> <td><b>The Cascadia Nightjar</b> _{Sleeper-train ticket · Custom}</td> <td><b>The Mend Assembly</b> _{Repair-café broadsheet · Custom}</td> </tr> </table>

It 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 of SKILL.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.