Hallmark

A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.

Live demo →  ·  twenty themes  ·  five 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-eight 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.


Five 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.
hallmark variants <brief> Three structurally distinct directions for one brief, rendered live. Flip through them in a picker over your own localhost, pick one, keep building.

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.

Bubble guided sourdough app hero Distil content-extraction API hero Cold Snap record-label EP hero Cinder AI reasoning tool hero
Bubble
Sourdough app · Hum
Distil
Extraction API · Cobalt
Cold Snap
Record label · Carnival
Cinder
AI tool · Lumen
Ferns and Fathom tea menu hero Hollowback Apiary honey farm hero Off-Register risograph print fair hero Press Quaternary type studio hero
Ferns & Fathom
Tea menu · Custom
Hollowback Apiary
Honey farm · Garden
Off-Register
Print fair · Riso
Press Quaternary
Type studio · Custom
Tally SaaS product page hero Wayfare travel booking hero NAJM Moroccan fashion brand hero Hyperlane developer infrastructure hero
Tally
SaaS · modern-minimal
Wayfare
Travel · atmospheric
NAJM
Fashion brand
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

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 58 slop-test gates, no template underneath.

In v1.2 the custom route runs a full art-direction ritual: it names and rejects the category's reflex aesthetics, writes a slate of seven grounded directions, and a deterministic draw (scripts/seed.mjs) picks which one gets built, sometimes dealing wildcards from a design-history atlas. A scene sentence sets the light, a colour posture (Restrained · Committed · Full palette · Drenched) sets how far the palette commits, and a five-block direction contract written into the artifact gets audited promise by promise before shipping.

The Cascadia Nightjar sleeper-train ticket hero The Mend Assembly repair-café broadsheet hero
The Cascadia Nightjar
Sleeper-train ticket · Custom
The Mend Assembly
Repair-café broadsheet · Custom

It stays a quiet branch; vanilla briefs never see it. The protocol lives in custom-theme.md.


Variants NEW

hallmark variants <brief> runs the ceremony once, then builds three complete directions: different macrostructure, different theme (one dark, one mid, one light paper, forced), different nav, different footer. A tiny zero-dependency picker server (skills/hallmark/scripts/variants/) shows all three as live frames; in an existing app each direction is a temporary route your own dev server renders, with a small chip in the corner to flip and pick. Choose one and Hallmark promotes it, archives the others under .hallmark/variants/, and logs the whole run. Say riff for a fourth direction. No Node available? The picker degrades to a static compare page, and a chat reply ("pick 2") always works.


Open models NEW

Hallmark v1.2 is written to hold up on open-weight models, not just Claude. The mechanically checkable gates now live in a zero-dependency checker the model runs instead of eyeballing:

node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --genre <genre>

The skill carries a Critical floor that survives truncated reads, text-only fallbacks for every visual check (GLM has no vision; the skill knows), and a per-model quirks file (references/models.md) that loads only off-Claude.

Run it inside Claude Code on an open model via an Anthropic-compatible endpoint:

# GLM (Z.ai)                                  # Kimi (Moonshot)
export ANTHROPIC_BASE_URL=https://api.z.ai/api/anthropic
export ANTHROPIC_AUTH_TOKEN=<zai key>         # ANTHROPIC_BASE_URL=https://api.moonshot.ai/anthropic
export ANTHROPIC_MODEL="glm-5.2[1m]"          # ANTHROPIC_MODEL=kimi-k3

The [1m] suffix on GLM is load-bearing; dropping it silently shrinks the context. Kimi Code CLI users: it discovers skills in ~/.claude/skills/ only, so install Hallmark there rather than as a plugin.


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; this channel ships no scripts, so variants picks by chat reply and the slop test runs fully model-judged)
  • 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.

S
Description
No description provided
Readme MIT
97 MiB
Languages
CSS 58.4%
HTML 35.1%
JavaScript 6.5%