Hallmark is the most-starred "anti-AI-slop" design skill on GitHub, bar none. As of late July 2026 it sits at 18,859 stars, 949 forks, MIT license, primary language CSS, repo created April 27, 2026, with no versioned releases-because it is a design skill, not release-tracked software. The author is Together AI, and it runs inside the three AI coding tools that support the skill protocol: Claude Code, Cursor, and Codex. What it does in one sentence: makes generated UI "refuse to look AI-generated." Given a brief, Hallmark picks a macrostructure, dresses it in one of twenty themes (or triggers a from-scratch Custom build), runs fifty-seven slop-test gates plus a pre-emit self-critique, and actively refuses the "default distribution" every LLM was trained into. It has four verbs: build (new UI), audit (score existing code), redesign (rebuild with a different fingerprint), and study (extract a reference design's DNA). Two pages generated for two different briefs feel like different sites, not colour-swaps of the same template.
What Pain It Solves
Anyone who has had an AI generate a landing page has seen these: centered hero, purple-to-blue gradient, Inter font, the rounded-card trio-change the brand name and it still works. This is the LLM "default distribution," so dense in the training data that it is what the model reaches for first. The consequence is a template fingerprint: pages from different prompts share the same structure, spacing, and type scale, just recoloured and refaced. Competitive analysis pages, SaaS landings, and personal portfolios end up as variants of one template. Then there is component-level AI-slop: buttons that always enlarge on hover, cards with the same shadow, spacing always a multiple of eight-no design intent. Hallmark does not tune these details; it reroutes at the macrostructure layer: different briefs take different macrostructures, paired with each theme's type-pairing and colour anchor, and fifty-seven slop-test gates knock out "what AI would do by default" item by item, with one more self-critique pass before emit. The core shift is from "have AI generate a page" to "have AI generate a page that does not look AI-generated."
Macrostructure Plus Twenty Themes: A Different Fingerprint Per Brief
This is the root mechanism Hallmark uses to refuse template-slop. Plain AI UI generation is "one template, recoloured"; Hallmark is "pick the structure first, then dress it." The macrostructure sets the page skeleton (hero form, information hierarchy, rhythm), and each of the twenty themes carries its own type-pairing, colour anchor, and craft detail-their combination produces a distinct visual fingerprint. The README shows a dozen cases: Bubble (sourdough app, Hum), Distil (content-extraction API, Cobalt), Cold Snap (record-label EP, Carnival), Cinder (AI reasoning tool, Lumen), Ferns & Fathom (tea menu, Custom), Hollowback Apiary (honey farm, Garden), Off-Register (risograph print fair, Riso), Press Quaternary (type studio, Custom), Tally (SaaS, modern-minimal), Wayfare (travel booking, atmospheric), NAJM (Moroccan fashion brand), Hyperlane (developer infrastructure)-each a different brief, different structure, different theme, different feel. Every generated page is self-contained HTML+CSS, with its macrostructure stamped in a CSS comment for cross-reference. When a brief carries creative intent no catalog theme can fit, Hallmark switches to the Custom branch and designs from scratch: a made-to-measure palette, type, and layout, through the same fifty-seven slop-test gates, with no template underneath. The README is explicit that this is "a quiet branch"-vanilla briefs never see it.
Four Verbs: build/audit/redesign/study
All of Hallmark's capability hangs on four verbs. The default, build, makes new UI: given a brief, it picks a macrostructure, applies a theme, runs the slop-test, and hands the page back. hallmark audit <target> scores existing code: it checks against the anti-pattern list and emits a punch list, touching none of your code-good for auditing pages already live that you suspect are AI-flavoured. hallmark redesign <target> rebuilds with a different fingerprint: it throws out the structure but keeps the copy, information architecture (IA), and brand, then remakes it with a different visual fingerprint-good for pages where the content is fine but the look is too AI. hallmark study <screenshot | URL> extracts the DNA of a design you admire: it pulls out the macrostructure, type-pairing, and colour anchor, and can optionally emit a portable design.md to hand to other AI tools for same-style generation. study has two hard rules: it refuses pixel-level cloning and refuses to extract paid templates-you can learn structure and colour logic, but not copy a finished product verbatim. Rule of thumb: from scratch go build; de-AI an old page go audit then redesign; replicate a reference go study.
study and design.md: Porting Design DNA Across Tools
study is the one verb worth calling out separately, because it tackles the common dilemma of "I like this design but I do not want to copy it." Toss in a screenshot or a URL, and Hallmark extracts three things: the macrostructure (page skeleton), the type-pairing (font relationship), and the colour anchor-together, the design DNA. After extraction it can emit a design.md file, which is portable and can be fed to other AI tools (not just Hallmark itself) to generate new pages in the same style. The key boundary: study refuses pixel-level cloning and refuses to extract the DNA of paid templates. That means it can learn a design's structure and colour logic, but will not help you 1:1 replicate someone else's finished work or crack a template someone sells. This splits "reference" from "plagiarism": you get the design grammar, not the design itself. It pairs best with build: study a site you admire, get its DNA, then use build to generate your own pages from that DNA-same lineage, not a copy.
Three-Minute Setup
# 1. Install (requires one of Claude Code / Cursor / Codex, which support the skill protocol)
npx skills add nutlope/hallmark # re-run to update
# 2. Skip npx and install manually: copy SKILL.md + references/ into the right dir
# Claude Code: ~/.claude/skills/hallmark/
# Cursor: .cursor/rules/hallmark.mdc (paste SKILL.md body, drop frontmatter)
# Codex: ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project-scoped)
# 3. Invoke the four verbs inside the AI tool's chat
# Build new UI: just describe the brief, e.g. "a landing page for a craft beer brand"
# Audit existing: hallmark audit ./src/landing.html (emits anti-pattern list, no edits)
# Redesign: hallmark redesign ./src/landing.html (drops structure, keeps copy + brand)
# Extract DNA: hallmark study ./reference.png (can emit design.md)
# 4. Verify
# The generated page is self-contained HTML+CSS, with the macrostructure stamped in the CSS
# Cross-check against usehallmark.com, press T to cycle the 20 themesThe rule-set itself lives in the repo's SKILL.md and references/ directory, with worked examples in docs/recipes.md and docs/study-examples.md-to see exactly how study dissects a design, read the latter.
Who It's For + Four Pitfalls
For: indie devs and founders who need landing pages but do not want every page to look the same; AI coding users (Claude Code / Cursor / Codex) who want a "design taste" layer; designers de-AI-fying already-shipped code (audit to score, redesign to rebuild); anyone wanting to port a reference design's style into their own project (study to extract DNA).
Four pitfalls. One, it is a skill protocol-it cannot run standalone; it must be installed into a skill-supporting AI tool (Claude Code, Cursor, or Codex), so embedding it into your own scripted pipeline is a no-go. Two, the output is self-contained HTML+CSS, not React components; integrating into a Next.js/React project needs manual porting, so do not expect a drop-in <Hero />. Three, fifty-seven slop-test gates plus a pre-emit self-critique mean generation is slower and costlier in tokens than "just have the AI spit out a landing page"-do not reach for it on a rush job. Four, study refuses pixel-clones and paid templates; if you want to 1:1 replicate someone's site or crack a paid template, this path is closed-study gives you design grammar, not the finished product.
vs. the Competition
Against Humanizer, the split is clean: Humanizer de-AI-fies text, Hallmark de-AI-fies visuals-complementary, text via Humanizer and UI via Hallmark. Against shadcn/ui, shadcn gives you a pile of copyable components (buttons, dialogs, tables) and solves "where do components come from"; Hallmark solves "why does the page look AI"-macrostructure, themes, anti-AI patterns-a different layer, and the two stack (Hallmark sets structure, shadcn supplies components). Against v0, v0 is Vercel's AI that generates React/Tailwind UI from a prompt-fast, but it defaults to the same AI distribution; Hallmark is slower but actively refuses that distribution, landing as the next stop after "v0 generated it but it is too AI." Against tweakcn, tweakcn is a shadcn theme customizer that adjusts colour and tokens without touching macrostructure or running anti-slop gates; Hallmark adjusts structure and fingerprint. In one line: components from shadcn, colour from tweakcn, fast drafts from v0, de-AI-fying after the draft from Hallmark.
References
- Hallmark GitHub repo (18,859 stars, MIT, CSS): https://github.com/Nutlope/hallmark
- Live demo (press T to cycle 20 themes): https://www.usehallmark.com
- Rule-set SKILL.md: https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md
- references directory: https://github.com/Nutlope/hallmark/tree/main/skills/hallmark/references
- Worked recipes recipes.md: https://github.com/Nutlope/hallmark/blob/main/docs/recipes.md
- study examples study-examples.md: https://github.com/Nutlope/hallmark/blob/main/docs/study-examples.md