mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
adf0da6fd4
Six items in one pass:
· **Bricolage Grotesque removed** entirely. Distinctive italic-a
forms (curl ear) read as "weird" at section-title scale across
several themes. Replaced per-theme with cleaner alternatives:
Sport → Inter Tight (italic). Riso → Space Grotesk. Almanac →
IBM Plex Sans. Plume → Geist. Manifesto's display fallback
chain swapped Bricolage out for Space Grotesk. Google Fonts
stylesheet URL updated — Bricolage dropped, Space Grotesk and
Anton (italic axis) added.
· **Section heads restructured.** Was: 10rem | 1fr two-column with
the section label ("04 / ANTI-PATTERNS") on the left and the
title on the right. Problem: at narrow widths (and on themes
that override to 6rem | 1fr like Sport), the label was forced
to wrap mid-word ("ANTI-/PATTERNS") and the title felt squeezed.
Now: single-column. Label stacks ABOVE the title with a small
gap. Label gets `white-space: nowrap` so it never breaks. Title
font-size grows from `clamp(2rem, 3vw + 1rem, 3rem)` to
`clamp(2rem, 4vw + 0.5rem, 3.5rem)` since it has full row width.
Sport's per-theme override (was 6rem | 1fr) now also 1fr.
· **Foundations card strokes — fixed.** The gap-as-border pattern
(gap: 0.5px, parent bg showing through) sub-pixel-rounded
inconsistently — col 2/3 boundaries dropped on some themes.
Replaced with explicit 1px right + bottom borders on each card,
plus left + top on the parent. Every divider now renders crisp
at every theme + viewport. Atelier/Salon use a dashed bottom
rule instead, no vertical dividers (matches their borderless
card aesthetic).
· **Worked examples — full bleed to viewport edges.** The rail had
`margin-inline: calc(-1 * var(--page-gutter))` which only
escaped the page gutter, not the page max-width. On wide
desktops the rail still capped at 76rem. Now uses
`width: 100vw; margin-inline: calc(50% - 50vw)` so cards extend
flush to the viewport edges no matter how wide the screen.
Internal scroll-padding still snaps the first/last card cleanly.
· **Study brief pill** — "Paste a design you admire." → "/hallmark
study this landing page". Reads as the actual command the user
would type, matches the Build row's brief style.
· **GitHub star button** added to the nav. Sits beside Install,
styled as an inverse pill (ink fill, accent star, paper text).
Live star count fetched from the GitHub API on first paint,
cached in localStorage for 1h to avoid rate-limit. Falls back
to "★" if the request fails. Counts ≥1000 render as "1.2k" etc.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hallmark
A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.
Live demo → · twenty-three themes · five verbs · press T to cycle.
Powered by Together AI.
 |
 |
 |
 |
Hallmark encodes the anti-AI-slop consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated rule-set. It picks a macrostructure for the brief, dresses it in one of twenty-three themes, runs sixty slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
v1.0.0 — pre-emit critique on six axes, honest-copy enforcement, locked-token discipline, re-drawn-chrome ban, and a no-wrap rule for clickable text. Five new slop-test gates (56–60). The full rule-set lives in
skill/SKILL.mdandskill/references/.
Try it
Paste this into Claude Code, Cursor, or Codex with the Hallmark skill installed:
"Build me a landing page for Coffeebox — a small-batch coffee subscription. Roast on Sunday, ship on Monday, drink Tuesday. Audience: people who already buy good coffee. Tone: warm, hand-set, editorial."
If Hallmark is wired correctly, you'll see Long Document · Linen (warm-paper roman-serif) · Tier-B hand-built SVG. Eight more worked briefs are documented in docs/recipes.md — copy/paste them to discover the skill before reading anything else.
What's distinct — quick map vs the field
| Hallmark | frontend-design (Anthropic) | Open Design | Dembrandt | |
|---|---|---|---|---|
| Source of taste | extracts DNA from a screenshot you admire (study verb) |
art-director brief + ban list | menu of 72 brand presets (Linear, Stripe, Vercel, Notion…) | scrapes a live URL, emits computed tokens |
| Output unit | macrostructure + theme + custom-craft | bans + brief framing | preset application | DTCG tokens.json |
| Refuses font ID | yes — names role, never guesses | n/a | n/a | n/a (computes from CSS) |
| Refuses pixel-clone | yes — DNA only, never pixels | n/a | n/a | n/a (full token export) |
| Tactile-rebellion alignment | warm-paper, custom-craft, slopless canon | strong | medium | none — token-only |
| Pages by archetype | 21 named macrostructures, picked per brief | by brief | 5 deterministic directions | n/a |
| Verbs | 5 (default · audit · refine · redesign · study) |
1 | 31 | 1 (CLI) |
Hallmark's edge is study — every other tool ships a preset menu or a scraper. Hallmark is the only one that takes a screenshot of a design you admire, names what it sees, refuses paid-template-marketplace listings, and rebuilds your content with the extracted DNA. Three worked study examples in docs/study-examples.md.
Five verbs
| Verb | What it does |
|---|---|
| (default) | Build new UI. Asks for audience + use + tone (skippable — the skill states what it inferred). 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> |
The differentiator. 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. |
Eight pages, eight different shapes
Generated by exercising the skill across contrasting briefs. No two share a macrostructure or theme.
 |
 |
 |
 |
| Tide Quote-Led · Atelier · indie podcast |
Streampipe Workbench · Terminal · CSS-art mockup |
Maple Street Bread Long Doc · Linen · hand-built SVG loaf |
Meridian Manifesto · 11-section practice |
 |
 |
 |
 |
| Tracejam Bento · Pastel · clipped-edge mockup |
Anya Long Doc · Studio · personal one-pager |
Foundry Stat-Led · Plain (#fff) · animated counter |
Cohort Marquee Hero · Salon · continuous scroll |
Each page is its own self-contained HTML + CSS — no shared theme, no shared layout. Every one carries a /* Hallmark · macrostructure: … */ stamp at the top of its CSS. See the full set under site/_tests/ or live at hallmark-murex.vercel.app.
What's inside
SKILL.md— the routing file. Six-step design flow (includingStep 2.5 · Check project memoryreading.hallmark/log.json), 55-gate slop test, output contract, always-ontokens.cssexport.references/— short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the 40 component archetypes with variation knobs (9 hero · 6 feature · 4 CTA · 4 testimonial · 8 footer · 9 nav), the 4 hero polish patterns (inhero-enrichment.md), the 6 primitive structure axes, the vision-extraction protocol forstudy, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays (each with nav + footer voice routing), per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).docs/— human-reading content:recipes.md(8 worked briefs + a canonical try-it prompt) andstudy-examples.md(3 worked DNA-extractions). Not auto-loaded by the skill.site/— a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. Twenty-two themes clustered into four genres: editorial (Specimen, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), modern-minimal (Quiet, Coral, Violet), atmospheric (Midnight, Terminal, Bloom, Aurora, Halo), playful (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
What's distinct (the long list)
- One skill, five verbs. Not eighteen commands.
- Genres broaden the range. Hallmark routes a brief through one of four genres before picking a theme: editorial (default · the canonical anti-slop voice), modern-minimal (Stripe / Linear / ElevenLabs school), atmospheric (Suno / Runway / dark-AI-tool school), playful (post-Linear soft school). Each genre is its own rule overlay — atmospheric allows radial blooms; modern-minimal allows pure white and pill CTAs; editorial bans both. Detection is signal-based, silent default to editorial.
- Tone is a first-class decision. "Clean and modern" is rejected. Pick an extreme — editorial · brutalist · soft · technical · luxury · playful · austere.
- 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 55-gate slop test runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots), input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals), contrast gates (46–50: APCA / WCAG thresholds, accent-ink token requirement, dark-section ink-on-ink check), and nav · footer · hero structural gates (51–55: AI nav fingerprint, AI footer fingerprint, hero centred-everything, hero padding asymmetry, decorative-without-purpose).
- 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-heavy / system-native), accent hue (warm / cool / neutral / chromatic-other).
- Voice fixtures over LLM defaults. Each of the 21 macrostructures ships with 2–3 example opening lines tuned to its tone. "Built for the modern team" is in the banned-phrases list.
- Hero enrichment is opt-in. 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 → Lottie (last resort).
- Microinteractions default-on for SaaS-shaped archetypes. Bento Grid, Stat-Led, Workbench, Marquee Hero pages ship with 2–3 purposeful microinteractions (number reveal, pricing lift, marquee, stagger) without the user having to ask. Editorial / Manifesto / Letter / Quote-Led pages stay still.
- SaaS page sequence. Hero → social proof → features → testimonials → pricing → FAQ → CTA → footer. Real prices, not "contact sales for pricing." Specific testimonials with role + company.
- Wordmark may use a different display face. A Geist-bodied SaaS page can set its wordmark in Fraunces. Same-family collapse on Bento / Stat-Led / Workbench / Marquee Hero is the new "un-branded" tell.
studyextracts DNA, not pixels. Refusal heuristics, type-role vocabulary (no font ID guessing), confirmation step before any code. Three worked examples indocs/study-examples.md.
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 locally:
cd site && python3 -m http.server 4173 # → http://localhost:4173
Press T to cycle themes, the shuffle button (or R) to randomise, ?theme=studio for a shareable link.
Or visit the live deploy at hallmark-murex.vercel.app.
Licence
MIT. Use it, fork it, ship it.