Hallmark
Run a named anti-pattern audit on landing pages and marketing UI so shipped interfaces do not read as generic AI-generated slop.
Overview
Hallmark is an agent skill most often used in Ship (also Build frontend) that audits UI for named AI-generated visual tells and prescribes concrete design fixes.
Install
npx skills add https://github.com/nutlope/hallmark --skill hallmarkWhat is this skill?
- hallmark audit verb flags named AI-UI tells (purple-gradient hero, Inter-only typography, 3-column feature grids, card-i
- Critical vs lower-severity anti-patterns with concrete fix guidance per tell
- Typography pairing guidance via linked typography.md for display/body font fixes
- Treats two tells in one view as confirmation of AI-slop aesthetics
- Actionable swaps: single anchor hue, broken grids, one containment layer
- Flags multiple named critical tells including purple-gradient hero, Inter-everywhere, 3-column feature grid, and card-in
Adoption & trust: 7.5k installs on skills.sh; 3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your landing page looks polished in isolation but still triggers “AI template” recognition because of gradients, uniform grids, and font monotony.
Who is it for?
Solo builders polishing marketing pages, dashboards, or launch sites built heavily with LLM-assisted UI generation.
Skip if: Teams that only need backend or API work with no visual surface, or when brand guidelines and audited designs are already frozen and signed off.
When should I use this skill?
You have agent-generated or rushed marketing UI and need a named audit for AI aesthetic tells before shipping or sharing screenshots.
What do I get? / Deliverables
After an audit pass you get a prioritized list of named tells with fixes so the next edit cycle removes slop signatures before users see the site.
- Named anti-pattern findings with severity (critical ships-as-slop)
- Per-tell fix instructions for layout, color, and type
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Ship → review because the skill’s primary verb is audit before release, catching visual tells that undermine trust at go-live. Review subphase fits pre-ship or post-build UI passes where you judge whether the interface is credible and on-brand, not during initial ideation.
Where it fits
After the agent drafts a hero and feature section, run hallmark to kill the default three-column icon grid before you wire real content.
Pre-release pass on every public route to ensure no purple-gradient hero or card-in-card nesting ships.
Before posting Product Hunt or social screenshots, audit key frames so launch creative does not look like a template.
How it compares
Use as a structured UI smell checklist instead of vague “improve the design” chat prompts.
Common Questions / FAQ
Who is hallmark for?
Indie and solo builders shipping web UI with Claude Code, Cursor, or similar agents who want objective names for AI-looking layouts before launch.
When should I use hallmark?
During Ship review on landing and app chrome, after Build frontend drafts exist, and again before Launch distribution when screenshots go public.
Is hallmark safe to install?
It is procedural design guidance without shell or network access by default; review the Security Audits panel on this Prism page before adding any repo skill to your agent.
SKILL.md
READMESKILL.md - Hallmark
# Anti-patterns — the named tells The `hallmark audit` verb flags these by name. Every one of these is a signature of AI-generated UI. Seeing one is a problem; seeing two in the same view is a confirmation. Each entry: the tell, why it reads as AI-generated, and the fix. --- ## Critical (ships as slop) ### The purple-gradient hero A hero section with a background gradient from purple to blue or purple to pink, often with white centred text. This is the single most-recognised AI aesthetic. **Fix.** Pick a single anchor hue. One accent. No gradient backgrounds on heroes. If you want warmth, tint the neutrals. ### Inter-everywhere Inter (or Roboto, or Open Sans) used as both display and body, with no pairing face. A one-font page is a template page. **Fix.** Pair a distinctive display face with a refined body face. See [`typography.md`](typography.md). ### The 3-column feature grid Three equal columns, each with an icon above a two-line heading above a three-line body. Usually spanned full-width with 24px gap. Every LLM emits this. **Fix.** Break the grid. Vary column widths. Mix card heights. Remove one card and use negative space. Move the icons inline, not above. Or drop the cards entirely and use typographic rhythm. ### Card-in-card A bordered container with cards inside it. Or: a card containing another card containing a small "micro-card". Visual nesting with no semantic reason. **Fix.** Pick one containment layer. Usually the outer one is the wrong one. ### The gradient headline A headline with `background-clip: text` fill set to a linear gradient (usually purple-to-pink or blue-to-cyan). Signals "AI generated" faster than almost anything else. **Fix.** Solid ink. If you want the headline to feel alive, use weight or italic or a display face — not a gradient fill. ### The side-stripe card A card with a thick coloured border on one edge (usually left, 4–6px, purple or green). Very recognisable; very 2018-SaaS-AI. **Fix.** Use a hairline border all around, or no border, or a small accent square beside the heading. Never an asymmetric thick stripe. ### Full-viewport centred hero `min-height: 100vh` (or `100dvh`), everything centred, one short sentence, one big CTA. The default LLM landing page. **Fix.** Let the hero be the height of its content. Bias left or right. Put more than a sentence in it. ### Pure black, pure white `#000000` background or `#ffffff` surface. Both read as flat and synthetic. **Fix.** Tint toward your anchor hue. See [`color.md`](color.md). ### Default-attractor sameness Two consecutive Hallmark outputs in the same project use the same macrostructure. The first emitted left-margin numbered labels + huge serif + asymmetric spans (Specimen); the second did exactly the same. The page looks redesigned only because copy changed. **Why it fails.** Hallmark's whole point is that two pages for two briefs feel like *different sites*, not colour-swaps of one template. Repeating a macrostructure across outputs is the structural fingerprint of templating, which is the AI tell Hallmark exists to defeat. **Fix.** Before writing code, look in the project's CSS for a `/* Hallmark · macrostructure: <name> · ... */` stamp. If one exists, your pick must be a different macrostructure — categorically different where possible (a serif-led editorial macrostructure paired with a sans-led grid one, not two editorial variants). See [`macrostructures.md`](macrostructures.md) for the twenty-one named choices. ### Specimen fall-through Producing the Specimen macrostructure (numbered left-margin labels like `01 — HELLO.` + huge serif display + asymmetric spans + hairline rules + typographic-only CTA + sometimes a hand-drawn SVG accent) when the brief did not explicitly request editorial / foundry / specimen energy. This is the single most-repeated Hallmark output, and it's the reason the skill felt like it had one shape. **Why it fails.** Specimen is a beautiful pattern when the brief is editorial.