mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
756eafff4a
Stress-test the skill across six contrasting briefs to see what comes out without hand-holding. Each test deliberately tests a different scenario along audience-context-given × theme-given × domain × intended enrichment level. None of the six pages share a macrostructure, hero archetype, or footer voice with another. 01 · Tide (indie podcast) — context skipped, no theme. Skill infers audio domain and picks Quote-Led + Atelier + no enrichment. Hand-built in pure typography. Pull-quote hero. 02 · Streampipe (open-source CLI) — full context, Terminal theme requested. Skill picks Workbench + Terminal + a hand-built CSS-art terminal mockup with blinking phosphor caret. No real terminal recording, no Lottie. 03 · Maple Street Bread (artisan bakery) — full context. Skill picks Long Document + Linen + a hand-built SVG loaf (Tier B). Letter-style body with a drop cap, an aside with today's loaves and visit info. The bakery worked example from custom-craft.md, in production. 04 · Meridian (studio manifesto) — partial context, theme implied. Skill picks Manifesto macrostructure + Manifesto theme + no enrichment. Pure black, oversized white display, single red accent used as a bleed band. Five declarations and a signed colophon. 05 · Tracejam (SaaS observability) — full context, no theme. Skill resists the obvious Midnight default and picks Pastel — proving a soft theme can carry a technical brief if the typography is exact. Bento Grid macrostructure + clipped-edge hero with a hand-built CSS-art trace waterfall (multi-coloured spans on a percentage grid). Six asymmetric bento tiles below. 06 · Anya (software architect personal site) — context skipped, no theme. Skill avoids Specimen-as-default for portfolio briefs and picks Long Document + Studio + no enrichment. Italic Fraunces salutation, tabular selected work sheet, no Lottie, no Three.js, no decorative gradient. Each test ships with a brief.md (the verbatim prompt, the inferences, the macrostructure stamp), an index.html (self-contained — no shared assets), and a style.css with the Hallmark stamp at the top. Findings written up at the end of site/_tests/README.md as a priority-ranked improvement list: Tier 1 — per-archetype example copy fixtures (the model bends to "Built for the modern team" without them); sub-domain refinement of the trio table (split SaaS docs vs SaaS landing); a documented theme- diversification rule; free-vs-paid font tradeoff in typography.md; worked examples per enrichment archetype in hero-enrichment.md. Tier 2 — a "different knobs" slop-test gate; more illustration recipes in custom-craft.md; non-LLM voice samples in copy.md; mobile-collapse discipline per archetype; aria-label slop-test gate. Tier 3 — project-level memory beyond the CSS stamp; a study+redesign combined verb; an example gallery on the main landing page; auto- generated OG cards per macrostructure. What this exercise revealed: the structural variety position holds (six briefs, six different shapes, no template repetition); the enrichment hierarchy works (three of six correctly ship typography- only); the remaining gap is copy voice (Tier 1 #1) and theme-pick discipline (Tier 1 #3). 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, slop test (33 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 33-gate slop test runs before every output. One yes fails the build.
- 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.