mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
b61f1efc8d
Implements all twelve Tier 1, 2, and 3 items from the test-suite findings (skipping #12 study+redesign and #14 OG cards, both deferred). Aim: tighten the gaps the six-test exercise surfaced — copy voice, theme diversification, sub-domain disambiguation, mobile collapse, illustration recipes, accessibility gates. SKILL.md (items 3, 6, 10, 11). Version 0.4.0 → 0.5.0. New step 2.5 documents reading .hallmark/log.json before macrostructure pick; Step 5 (Build) now writes to that file after each output. Theme- diversification rule expanded: two consecutive themes must differ on at least one of paper-band / display-style / accent-hue. Slop test 33 → 35 with two new gates: different-knobs check and aria-label/aria-hidden presence on visual-only SVG / div / canvas. macrostructures.md (item 1). 21 macrostructures each gain 2–3 example opening-line copy fragments — drawn from Pentagram, Klim, Linear, Are.na, Resend, Craig Mod, Rauno Freiberg, Tracejam, Maple Bakery, Anya, Streampipe, Meridian. Imitate the kind of specificity (named places, dates, verticals; refusal of metaphor), not the wording. structure.md (item 2). Domain → trio table refined: developer-docs split from SaaS-marketing; personal one-pager split from work-led portfolio. Plus a clarifying note on splits and when to ask one disambiguating question before picking. typography.md (item 4). Pairing table doubled: each of 8 tones now gets a Free baseline row (Geist, Fraunces, Bricolage Grotesque, JetBrains Mono, system-ui) and a Paid upgrade row (Söhne, Tiempos, Druk, Berkeley Mono, ABC Diatype). Discipline note: never name a paid font without confirming the user is licensed — the demo will fall back to system-default and look broken. hero-enrichment.md (item 5). Each E1–E8 archetype gains a 4-6 line worked example: Tracejam clipped-edge, fashion lookbook full-bleed loop, Linear-style mockup split, code-formatter floating mockup, Maple Bakery custom illustration, whiteboard CSS-orbit loop, podcast gradient + grain, Lisbon café photography. Examples reference real test pages where they exist. copy.md (item 8). New "Voice samples per tone" section: 7 tones, 3 voice patterns each, 5–8 example sentences per tone (105+ samples total) drawn from real non-LLM sources. Plus a banned-opening-lines table — "Built for the modern team", "Unleash your X", "Where X meets Y", "Empower your...", and 6 more — each with a one-line reason it fails. component-cookbook.md (item 9). Single comprehensive Mobile Collapse table at the end documents all 36 archetypes' collapse behaviour at 60rem (layout breakpoint) and 40rem (typography breakpoint). Plus five cross-cutting rules (44px hit targets, container padding, disable scroll-linked motion, lazy-load below-fold, data-saver respect). custom-craft.md (item 7). New Recipe library section adds four hand-built illustration recipes after the existing bakery loaf: (1) workflow / process diagram with animated stroke-dashoffset flow, (2) minimal-line mascot with @keyframes blink loop, (3) three-tier architectural diagram with @property --flow-offset data flow, (4) botanical leaf flourish (no animation — the design is the stillness). Each recipe is full code, "use when / avoid when", reduced-motion fallback, and named real-world inspiration. Plus a Cross-recipe techniques callout summarising the four habits of hand-built CSS/SVG illustration in 2026. site/index.html + components.css (item 13). New section 07 · Examples on the landing page links to the six self-contained test pages under site/_tests/. Six gallery cards display the test number, name, macrostructure stamp shape, one-line description, and a "View ↗" affordance. The cards inherit --radius-card, --rule-card, --shadow-card from the active theme — switching themes restyles the gallery alongside everything else. Footer slot's --i shifted from 6 to 7 to preserve reveal-stagger ordering. README.md updated to reflect: 35-gate slop test, project memory, theme-diversification rule on three axes, voice fixtures over LLM defaults. Defers: #12 study+redesign combined verb, #14 auto-generated OG cards. Both ready to plan when the user wants them. 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 that gives Claude Code, Cursor, and Codex a firm rule-set for typography, colour, layout, motion, microinteractions, copy, responsive behaviour, and structural variety. It 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 from two briefs should not share the same hero → 3-feature → CTA → footer rhythm. They should feel like different sites.
Five verbs
| Verb | What it does |
|---|---|
| (default) | Build new UI. Asks for audience + use case + tone (skippable — the skill states what it inferred either way), picks a macrostructure, applies the rule-set, runs the slop test before handing back. |
hallmark audit <target> |
Score existing code against the named anti-patterns + structural sameness. 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 fingerprint. |
hallmark study <screenshot> |
Extract the DNA from a design the user admires — macrostructure, archetypes, type-pairing role, colour anchor — and produce a diagnosis report. 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.md— the routing file. Design flow (six steps, includingStep 2.5 · Check project memoryreading.hallmark/log.json), slop test (35 questions), output contract.references/— sixteen short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states, responsive, copy, anti-patterns, the 21 named macrostructures, the 36 component archetypes with variation knobs, the 6 primitive structure axes, the vision-extraction protocol forstudy, and three new files for hero work —hero-enrichment.md(when to add visuals to a hero, plus eight enrichment archetypes),custom-craft.md(how to hand-build CSS art, SVG, declarative animation, JS-driven motion, with Lottie demoted to last resort), andassets.md(sourcing canon for icons, brand logos, generated illustration via Nanobanana / Recraft, library illustration, app mockups, hero video, photography, abstract backgrounds).site/— a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. Sixteen themes — Specimen, Newsprint, Atelier, Garden, Salon, Linen, Almanac, Midnight, Terminal, Brutal, Manifesto, Sport, Studio, Pastel, Riso, Quiet — that swap not just colour and typography but the page's hero archetype and footer archetype. Switching themes literally rebuilds the page.ROADMAP.md— Tier 1, 2, 3 work plus an explicit "things to not do" list.
Install
npx skills add hallmark
Or copy skill/ into ~/.claude/skills/hallmark/ (Claude Code) or .cursor/rules/hallmark.mdc (Cursor — body of SKILL.md, no frontmatter).
To preview the landing page:
cd site && python3 -m http.server 4173 # → http://localhost:4173
Press T to cycle themes, R for random, ?theme=studio for a shareable link.
What's distinct
- One skill, five verbs. Not eighteen commands.
- Tone is a first-class decision. "Clean and modern" is rejected. Pick an extreme.
- Macrostructures over axes. Pick one of 21 named whole-page shapes wholesale; the macrostructure stamp lives in the CSS comment, so the next Hallmark run picks something different.
- Within-archetype variation. Two Bento Grids should not be twins; each archetype has 2–3 picked-per-output knobs.
- Microinteractions as discipline. Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms.
- A 35-gate slop test runs before every output. One yes fails the build. New gates 34 (different-knobs check across runs) and 35 (aria-label / aria-hidden on every visual-only SVG / canvas / div).
- Project memory. A per-project
.hallmark/log.jsonrecords each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 3–5 entries before picking, and writes a new entry after each build, so consecutive Hallmark outputs in the same project don't repeat shapes or themes. - Theme-diversification rule. Two consecutive themes must differ on at least one of three axes: paper band (dark / mid / light), display style (italic-serif / roman-serif / geometric-sans / mono / display-condensed-italic / display-heavy / system-native / risograph), accent hue (warm / cool / neutral / chromatic). Specimen-fall-through is no longer the only diversification check.
- Voice fixtures over LLM defaults. Each of the 21 macrostructures ships with 2–3 example opening lines from real designer-engineer sites (Pentagram, Klim, Linear, Are.na, Resend, Lynn Fisher, Rauno Freiberg, etc.). Each of seven tones in
copy.mdhas three voice patterns × five sample sentences. "Built for the modern team" is in the banned-phrases list. - Hero enrichment is opt-in, not a default. A typographic-only hero is always acceptable. When enrichment is right, the skill picks from a six-tier hierarchy: typography only → custom-built CSS art → hand-built SVG → generated illustration (Nanobanana / Recraft) → library + customise → Lottie (last resort).
studyextracts DNA, not pixels. Vision-extraction with refusal heuristics, type-role vocabulary (no font ID guessing), and a confirmation step before any code.
Credits
Built on the open work of:
- Paul Bakaus' impeccable — the named-tells canon
- tw93's kami — the slop-test concept and 20-question scoring
- Leonxlnx's taste-skill — taste vocabulary and the audit verb
- Anthropic's frontend-design and canvas-design skills — the design-context-gate pattern
- Google Stitch's DESIGN.md — single-source design docs
- Marie Claire Dean's 63 design skills for Claude — coverage map
- Steve Barclay's PencilPlaybook — the design-language playbook format
- The Slopless tactile-rebellion canon — the 2026 anti-AI-perfect movement (informed Studio, Pastel, Riso)
- Anthropic's Skill Engineering writeup — file budgets, load-on-demand patterns, frontmatter shape
Where rules overlapped, Hallmark adopted; where they diverged, Hallmark picked.
Licence
MIT. Use it, fork it, ship it.