Youssef 3968b6264c Coherence pass: fix the five defects the v1.3 review surfaced
- main.js: 4 stray '57 gates' marketing strings -> 58
- all-themes.html: visible H1 '20 themes' -> '24 themes'
- gen-cli.mjs header: correct arm ids (claude/glm/kimi) + token env names
  (ZAI_AUTH_TOKEN / MOONSHOT_AUTH_TOKEN)
- ledger spec: radius claim '8px tight' -> '12px card / 8px controls'
- arcade spec: note the starfield/scanline vars are page-local decorative
  tokens (define in :root per arcade-01), not catalog tokens
- tier-e stamp example uses the real imagegen default; hyphens
2026-07-24 15:08:01 +01:00
2026-04-27 21:46:57 +01:00

Hallmark

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

Live demo →  ·  twenty-four 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-four 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 structurally distinct directions (different macrostructure, theme, nav, footer) and serves a local picker to flip between them and choose. v2 makes it fast and smooth: the picker opens immediately and fills progressively (you evaluate direction 1 while 2 and 3 finish), directions generate in parallel at sketch depth by default (only the winner completes to full), the grid shows screenshot thumbnails (so it survives dev servers that block iframes), and the verdict can be compositional ("direction 2, but the pricing from 3" grafts that section in). After the pick you can zoom to riff a single section, every round is logged to .hallmark/variants/<run>/decisions.md, and in a Vite/Astro/SvelteKit app a dev-only overlay previews each direction in place. No Node? A static compare page and a chat reply ("pick 2") always work.


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.


Edit-time linting NEW

By default the slop test runs once, at the end. On Claude Code you can move it to the keystroke: a PostToolUse hook lints every .html/.css Hallmark artifact the moment it is written and feeds any failures back to the model advisorily, so slop gets fixed while the context is small instead of in a big end-of-run pass.

node skills/hallmark/scripts/install-hook.mjs

--global targets ~/.claude/settings.json (all projects); --print shows the settings block without writing; --remove undoes it. The hook is advisory only: it never blocks or reverts a write, no-ops silently on non-artifacts, and the Step 7 sweep still runs regardless. It is Claude-Code-only (Cursor/Codex have no hook surface and rely on Step 7).


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%