YoussefandClaude Opus 4.7
38526c4b06
Two changes that both move the skill toward useful-without-being-rigid.
Design-context gate is now askable but skippable. Audience + use-case + tone
is still the right way to start a build, but the gate that demanded all three
in one round of Q&A made the skill feel inquisitorial for users who just
want a page. The new flow asks once and offers an explicit opt-out
("or say 'go ahead' and I'll infer"). If the user opts out, the skill
infers from the brief, **states the inferences in one sentence at the top
of the reply**, stamps them in the CSS comment, and proceeds. Specimen
fall-through is still banned on inferred briefs — laziness doesn't unlock
defaults, just transparency.
The fifth verb: hallmark study. The user attaches a screenshot of a design
they admire and the skill returns a diagnosis report — macrostructure,
hero/pitch/footer archetypes with their variation knobs, type-pairing role
(never a guessed font name), surface lightness band, accent hue band and
footprint, density and asymmetry verdicts, distinctive treatments, anti-
patterns to skip. Then it asks: "build with this DNA, or change one axis
first?" Build only happens after confirmation, with a stamp that records
DNA-source and studied: yes.
study is positioned against pixel-cloning by design. The new
references/study.md spells out:
- a refusal table (paid templates, competitor pages, copyrighted artwork
trigger refusal; user's own work and public references proceed; ambiguous
cases get one disambiguation question)
- a five-step extraction protocol (surface → type → structure → motion →
rhythm) with what to look at in what order
- a structured-fields schema the model fills out, then renders for the user
- a type-role vocabulary (italic editorial serif, heavy condensed sans,
monospace dev, etc.) so the skill names roles instead of guessing exact
fonts from screenshots, which is unreliable about half the time
- a theme-mapping table from extracted DNA to the 15 named themes
- a worked example (a Split Studio reference → diagnosis report → build
with a Studio-themed Hallmark page)
- limits the skill must state to the user (fonts can't be IDed, imagery
isn't copied, theme drift is allowed, one screenshot per study)
- a hand-off section (study → default for fresh builds, study → redesign
for refactoring an existing page)
README and the landing page's "How it works" callout updated to mention
the verb. SKILL.md frontmatter version bumped to 0.3.0.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hallmark
A design skill for AI coding assistants. Makes the UIs they generate look made, not generated.
Powered by Together AI.
What it is
A single, opinionated skill — short on purpose — that teaches Claude Code, Cursor, or Codex a firm, consensus-backed set of rules for typography, colour, layout, motion, interaction, microinteractions, copy, responsive behaviour, and structural variety. It refuses to design without a confirmed audience, use case, and tone, and refuses to emit the on-distribution defaults every LLM was trained into.
The differentiator: Hallmark insists on structural variety, not just visual variety. Two pages by Hallmark for two different briefs should not share the same hero → 3-feature → CTA → footer rhythm.
Five verbs
| Verb | What it does |
|---|---|
| (default) | Build new UI — runs the design-context gate (askable, skippable; the skill states what it inferred either way), picks a structural fingerprint, applies the ruleset, runs the slop test before handing back. |
hallmark audit <target> |
Score existing code against the named anti-patterns + structural sameness. Returns a punch list. No edits. |
hallmark refine <target> |
Polish in place. Smallest possible diff. Preserves structure. |
hallmark redesign <target> [--mood <name>] |
Throw out the structure, keep copy + IA + brand, rebuild with a deliberately different structural fingerprint. |
hallmark study <screenshot> |
The user attached a design they admire. Extract the DNA — macrostructure, archetypes, type-pairing role, colour anchor — and produce a diagnosis report. Then optionally rebuild the user's content using the extracted DNA. Refuses paid templates and competitor pages. Names font roles, never font IDs. Never copies pixels. |
What's inside
Skill — skill/SKILL.md plus ten reference files:
typography.md— banned defaults, pairing rules, weight extremes, scale ratioscolor.md— OKLCH palette construction, accent discipline (≤3% area), dark-mode recipelayout-and-space.md— 4pt scale, asymmetry, grid-breaks, depth via weight not shadowstructure.md— six axes of structural variety (heading placement, body composition, divider, button voice, image, reveal); the per-theme structural fingerprint tablemotion.md— duration buckets, three named easings, no bounce on UI, reduced-motion defaultmicrointeractions.md— 14 interaction recipes (button press, focus, modal, toast, optimistic update, command palette, drag, copy-to-clipboard, search-as-you-type) and the 20 named microinteraction tellsinteraction-and-states.md— eight states per element, focus-visible spec, 44px hit targets, undo over confirmresponsive.md— mobile-first, content-driven breakpoints,dvhnotvh, safe-area-insetscopy.md— specific verbs, three-part errors, standalone link text, proper typographic punctuationanti-patterns.md— 30+ named tells with severity, why they fail, and the fixmacrostructures.md— the 21 named whole-page shapes; pick one before writing code, stamp it in the CSS commentcomponent-cookbook.md— 33 component archetypes across 7 categories, each with 2–3 within-archetype variation knobsstudy.md— vision-extraction protocol for thehallmark studyverb: refusal heuristics, the structured-fields schema, type-role vocabulary, theme mapping table, worked example, limits
Slop test (29 questions) — every output must answer no to all twenty-nine before shipping. Visual (8), structural (2), microinteraction (10), variety (3), implementation gates (6).
Site — site/ is a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. Uses Together AI's "The Future" typeface plus Google Fonts.
Twelve themes, four categories, each with its own structural fingerprint:
- Editorial — Specimen, Newsprint, Atelier
- Soft — Garden, Salon, Linen
- Technical — Midnight, Terminal, Almanac
- Bold — Brutal, Manifesto, Sport
Each theme overrides not only colour and typography but section-heading placement, column counts, divider style, button voice, and reveal pattern. The same landing page reorganises itself per theme, demonstrating the structural-variety principle.
Two test specimens — site/_example-bakery/ (an editorial bakery announcement, output of a real hallmark run) and site/_example-cmdk/ (a keyboard-first command palette demonstrating the microinteraction canon).
Roadmap — ROADMAP.md lists Tier 1, 2, and 3 work, plus an explicit "things to not do" list and measurement criteria.
Install
Any harness, via npx
npx skills add hallmark
Claude Code (manual)
Copy skill/SKILL.md and skill/references/ into ~/.claude/skills/hallmark/.
Cursor
Create .cursor/rules/hallmark.mdc with the body of SKILL.md (no frontmatter).
View the landing page locally
cd site && python3 -m http.server 4173
# → http://localhost:4173
Philosophy
Five skills — impeccable, kami, taste-skill, Anthropic's frontend-design skill, and the Claude frontend aesthetics cookbook — have converged on roughly the same anti-slop ruleset. Hallmark takes that consensus, restates it in one voice, fills the gap on motion and microinteractions, and adds structural variety as a first-class principle.
Distinct choices:
- One skill, five verbs. Not eighteen commands. Use the default; reach for
audit,refine,redesign, orstudywhen you need them. - Design-context gate. No audience + use case + tone → no design. The skill asks.
- Tone as a first-class decision. "Clean and modern" is rejected. Pick an extreme: editorial, brutalist, soft, utilitarian, luxury, playful, technical, austere.
- Structural fingerprint. Every page picks one option from each of six axes. Two consecutive outputs in a session should never share the same fingerprint.
- Microinteractions are not decoration. Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms.
- The slop test. Twenty yes/no checks before handing back. One yes fails the output.
Credits
Built on the open work of Paul Bakaus (impeccable), tw93 (kami), Leonxlnx (taste-skill), Anthropic's skills team (frontend-design and canvas-design), DESIGN.md (Google Stitch), MC Dean's 63 design skills, PencilPlaybook, and the Slopless tactile-rebellion canon. Where rules overlapped, Hallmark adopted; where they diverged, Hallmark picked.
Licence
MIT. Use it, fork it, ship it.