Hallmark: a design skill so AI-built sites stop looking AI-built
TL;DR
Hallmark (Nutlope/hallmark, MIT) is a design skill for Claude Code, Cursor and Codex. It picks deliberate page structures and themes, varies component archetypes, then runs a 65-gate check (typography, contrast, focus rings, honest copy…) before handing off a UI.
You can spot an AI-built interface at first glance: a purple–blue gradient, rows of identical rounded cards, generic headlines like "Unlock the power of…". Hallmark (Nutlope/hallmark, MIT licence) is a design skill for Claude Code, Cursor and Codex aimed squarely at this problem. It picks a deliberate page structure and theme, applies varied component patterns, then runs a 65-point check before handing over the interface.
Four modes
| Mode | What it does |
|---|---|
| Build (default) | Builds new UI from a brief, chooses structure + theme, checks before handing over |
| Audit | Scores existing code and returns a list of fixes, without editing code |
| Redesign | Keeps content and information structure, redoes the visuals |
| Study | Analyses a screenshot or URL and exports a design.md for other tools |
What fights "AI slop"?
- Deliberate variety: many page structures and themes grouped by style, so consecutive builds don't look alike.
- Memory: records the project in
.hallmark/log.jsonso the next build changes theme/structure. - A 65-point "slop test": typography, contrast, focus rings, honest copy… failing a single criterion blocks handover.
- Rejects vague briefs and generic copy, forcing users to provide real information.
Installation
npx skills add nutlope/hallmarkSuggested trial process
- Run Audit on an existing landing page to see where it looks "AI".
- Fix the most prominent issues (usually typography, contrast and copy).
- For new pages, write a specific brief: audience, goal, tone, 3 key messages.
- Run Build, then manually check accessibility and performance.
Limits to know
- The skill helps avoid common mistakes, but you still have to define brand identity (colours, logo, voice).
- Automated checks don't replace real users or accessibility testing.
- Results still depend on the brief: a bad brief gives a bad interface.
How to apply it
- Dev/Frontend: use Audit as a review checklist before sending a UI PR.
- Tech Lead: combine it with the team's design system; the skill handles generic mistakes, the design system handles brand consistency.
- PM: insist on a clear brief from the start; it's also the best input for designers and AI alike.