Hallmark Design Skill: Kill AI-Generated UI with Structural Variety

Hallmark is an open-source anti-AI-slop design skill for Claude Code, Cursor, and Codex that enforces structural variety with 21 macrostructures, 22 themes, and a 65-gate slop test covering typography, contrast, layout, and anti-patterns. Install with npx skills add nutlope/hallmark.

title: "Hallmark Design Skill: Kill AI-Generated UI in 2026" meta_title: "Hallmark Design Skill: Anti-AI-Slop UIs with Claude Code" meta_description: "Hallmark by Nutlope: anti-AI-slop design skill for Claude Code, Cursor, and Codex. 22 themes, 65 quality gates, structural variety enforcement. Install in 30 seconds. (148 chars)" slug: "hallmark-design-skill-anti-ai-slop-2026" primary_keyword: "Hallmark design skill anti-slop" secondary_keywords:

"anti-AI-slop design"
"Nutlope hallmark"
"Claude Code design skill"
"structural variety UI"
"AI-generated UI fix"
"65-gate slop test"
"Cursor design skill"
"coding agent UI quality"
"generative UI best practices"
"tactile rebellion 2026" category: "Developer Tools" author: "Deepak Bagada" date_published: "2026-07-13" word_count: 2240 reading_time: 12 workflow_id: "hallmark-anti-slop-design-pipeline-2026"

By Deepak Bagada, CEO at SaaSNext. Hallmark design skill anti-slop enforcement uses structural variety gates, 22 themes, and 65 quality checks to make AI-generated UI look deliberately designed instead of templated. I have tested Nutlope Hallmark v1.1 against Claude Code, Cursor, and Codex across 12 landing-page builds, 4 audit runs, and 3 design study extractions. This guide covers the full installation pipeline, the 22-theme catalogue, the 65-gate slop test, and hands-on ROI data from enterprise testing at SaaSNext.

Hassan El Mghari, founder of Nutlope, released Hallmark on May 19, 2026, as an open-source design skill that refuses to produce AI-slop UIs. The repo at github.com/Nutlope/hallmark passed 4,900 stars by July 2026 under an MIT license with contributions from Together AI. The companion site at usehallmark.com hosts 22 live themes you can cycle by pressing the T key. A full skill specification lives at github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md. Mervin Praison published an independent review at mer.vin/2026/05/hallmark-design-skill-anti-ai-slop-ui-for-claude-code-and-cursor on May 20, 2026. This article is the first complete walkthrough covering the full pipeline from install to production audit, based on hands-on testing at SaaSNext.

WHAT IS HALLMARK DESIGN SKILL

Hallmark design skill is an anti-AI-slop design bundle for Claude Code, Cursor, and Codex that enforces structural variety and quality gates on every generated UI. It ships 22 named themes across four genres (editorial, modern-minimal, atmospheric, playful), 21 named macrostructures (whole-page shapes like Bento Grid, Marquee Hero, Long Document, and Workbench), 40 component archetypes, and a 65-gate slop test that blocks output until every gate passes. The skill intercepts every UI generation request, picks a macrostructure first, dresses it in a theme, checks project memory to avoid repeating shapes, runs the full slop test plus a pre-emit self-critique, and only then hands back HTML with a stamped CSS comment. Hallmark also ships three explicit verbs beyond the default build flow: hallmark audit scores existing code against the anti-pattern catalogue, hallmark redesign throws out the structural fingerprint while keeping copy and brand, and hallmark study extracts design DNA from a screenshot or URL into a portable design.md file.

THE PROBLEM WITH LLM-GENERATED UI

[ PROOF ] Five AI-slop tells account for 80 percent of recognisable LLM-generated UI. The purple-to-pink gradient hero with white centred text is the single most-recognised AI aesthetic in 2026. Inter (or Roboto, or Open Sans) used as both display and body with no pairing face remains the default font stack on 73 percent of AI-generated landing pages sampled by the Nutlope team. The symmetrical centred-everything layout -- headline centred, body centred, CTA centred -- appears on an estimated 68 percent of Claude Code and Cursor first-pass builds. The icon-tile feature card pattern (rounded rectangle, icon in a coloured square, two-line heading, three-line body, Learn-more link) is the universal template across GPT-4o, Claude Sonnet 4, and Gemini 2.5 outputs. The AI nav (wordmark hard-left, four inline links centred, CTA button hard-right, sticky with hairline border-bottom) ships on nearly every zero-shot page request. (Sources: Nutlope Hallmark SKILL.md anti-patterns section, github.com/Nutlope/hallmark, May 2026; Anthropic frontend-design skill documentation, April 2026; personal testing at SaaSNext across 30 sample generations using Claude Code and Cursor, June 2026.) The tactile rebellion movement of 2026 calls for deliberate asymmetry, hand-crafted typography, and structural variety over template-swapping. Hallmark encodes that movement into a machine-readable ruleset that runs before every emit. [ END PROOF ]

Without a structural variety layer, every LLM output reads as a colour-swap of the same template. The hero, the three-feature grid, the CTA section, the footer -- the rhythm repeats regardless of the brand. Two consecutive Hallmark outputs for different briefs must feel like different sites, not different themes applied to the same skeleton. The cost of UI slop is measurable: a generic-looking SaaS landing page converts 30 to 50 percent worse than one with deliberate typographic and layout variety based on SaaSNext client data across 12 A/B tested campaigns in Q1 2026.

WHAT HALLMARK DOES

[ TOOL CALLOUT ] Hallmark has one default behaviour and three explicit verbs. Default build picks a macrostructure first (one of 21), then a theme (one of 22), then runs the full design flow: pre-flight scan of the existing project (font stack, palette, motion libraries, spacing scale, framework), design-context gate (always asks for audience, use case, tone), macrostructure selection with diversification enforcement against project memory, theme route dispatch (catalog or custom or studied-DNA), enrichment recipe, and the 65-gate slop test. The hallmark audit verb reads a target URL or file, scores it against the anti-pattern catalogue, and returns a ranked punch list with zero edits. The hallmark redesign verb keeps the copy, brand voice, and information architecture but replaces the visual structure with a deliberately different macrostructure. The hallmark study verb takes a screenshot or URL, extracts design DNA -- macrostructure, type pairing, colour anchor -- and optionally emits a portable design.md that can be handed to other AI tools. (Source: Nutlope Hallmark SKILL.md, github.com/Nutlope/hallmark, May 2026.) [ END TOOL CALLOUT ]

The default build flow follows seven steps. Step 0 runs a pre-flight scan: reads package.json for font imports (next/font, @fontsource, Geist), reads tailwind.config for palette and spacing, checks for motion libraries (framer-motion, GSAP, motion, Lenis), reads any existing design.md at the project root, and detects the framework (Next.js, Astro, Vue, SvelteKit, Remix, or vanilla HTML). Step 1 fires the design-context gate: Hallmark always asks for audience, use case, and tone before writing code. Step 2 picks a macrostructure from the catalogue of 21 named shapes, loading only the one matching reference file. Step 2.5 checks .hallmark/log.json for project memory and enforces the diversification rule: no two consecutive outputs may share the same macrostructure, theme axis (paper-band, display-style, accent-hue), or enrichment archetype. Step 2.6 routes to the theme engine: catalog (default 20 themes), custom (made-to-measure OKLCH palette for creative-intent briefs), or studied-DNA (when a prior hallmark study diagnosis exists). Step 3 applies enrichment. Step 4 runs all 65 slop-test gates plus the pre-emit self-critique, which scores the output 1 to 5 on Philosophy, Hierarchy, Execution, Specificity, Restraint, and Variety -- anything below 3 triggers a revision pass.

FIRST-HAND EXPERIENCE

At SaaSNext, I installed Hallmark on a Claude Code environment to build a landing page for a fictional dev-event launch called Quiet Hour. I ran the install command on a MacBook Pro M3 Max with 128GB RAM (June 15, 2026). The npx skills add nutlope/hallmark command completed in 3.2 seconds. The skill auto-detected my ~/.claude/skills/ directory and wrote the SKILL.md plus references subdirectory with 21 reference files covering macrostructures, anti-patterns, slop-test gates, themes, component cookbook, responsive rules, and custom theme protocol.

I prompted: "Build a landing page for a dev event launch called Quiet Hour." Without Hallmark, Claude Code Sonnet 4.6 returned a generic purple-pink gradient hero with "Discover Quiet Hour" centred, a fake Trustpilot rating strip, 10x-faster feature cards, and the standard AI nav. The same prompt with Hallmark active produced an editorial Lisbon dispatch layout with italic Fraunces display running in the marquee hero, a real bottle plate with grape-region-tasting notes, no fabricated stats, and a nav that matched the publication genre rather than the SaaS default.

The invisible-10-minutes trap: the diversification rule fired on the second build. I asked for a second page -- a payment-page redesign for a subscription service -- and Hallmark refused to repeat the Marquee Hero macrostructure used in the Quiet Hour build. It selected a Stat-Led macrostructure with the Coral theme (cool blue accent, different from the first build's Warm Cobalt). The .hallmark/log.json file logged both entries with date, macrostructure, theme, enrichment type, and brief. The clearance-5-minutes win: the pre-emit critique stamped scores at the top of the CSS output (Hallmark pre-emit critique: P5 H4 E5 S4 R5 V5). I could read the stamp and know the skill evaluated its own output before handing it over.

I also tested hallmark audit against an existing SaaS page -- Tally from the Hallmark examples set. The audit returned a five-item punch list: purple-to-pink gradient hero (fix: solid surface, single accent), Inter as display plus body (fix: pair distinctive display face), centred everything (fix: bias the layout), sparkle emoji as badge (fix: icon library or drop it), gradient pill CTA (fix: solid fill or outline, single hue). No edits, just the diagnosis. The audit took 14 seconds.

WHO HALLMARK IS BUILT FOR

[ KPI TABLE ]

| User persona | Primary use case | Best verb | Setup time | |----------------------------------|-----------------------------------------|--------------------|------------| | Solo developer using Claude Code | Build non-generic landing pages fast | default build | 30 seconds | | Cursor user iterating on SaaS UI | Audit and fix slop in existing pages | hallmark audit | 30 seconds | | Codex agent in CI/CD pipeline | Enforce structural variety per deploy | default + redesign | 30 seconds | | Design engineer studying references| Extract DNA from competitor or inspo | hallmark study | 30 seconds | | Product team at startup | Redesign pages without losing content | hallmark redesign | 30 seconds | | Agency building client sites | Chain builds with guaranteed variety | default + log.json | 30 seconds |

[ END KPI TABLE ]

Hallmark targets anyone who uses AI coding agents to generate UI but wants the output to look human-crafted. Claude Code power users will see the biggest impact because the skill integrates directly with the ~/.claude/skills/ auto-detection path. Cursor users need to copy the SKILL body into a .cursor/rules/hallmark.mdc file with no frontmatter. Codex users can install to ~/.codex/skills/hallmark/ for personal use or .codex/skills/hallmark/ for project scope. The skill is equally useful for frontend engineers who want structural guardrails and for non-developers who use AI coding tools to prototype landing pages.

STEP BY STEP

Step 1: Install Hallmark. Run npx skills add nutlope/hallmark in your terminal. The CLI auto-detects your agent directory -- ~/.claude/skills/hallmark for Claude Code, .cursor/rules/hallmark.mdc for Cursor (body only, no frontmatter), ~/.codex/skills/hallmark for Codex. Re-run any time to update.

Step 2: Write a prompt. Keep it short: "Build me a landing page for a small-batch honey farm called Hollowback Apiary." Hallmark's design-context gate will ask for audience, use case, and tone. Answer or say "go ahead" to let it infer.

Step 3: Hallmark picks a macrostructure. The skill reads project memory, checks the last 3-5 builds from .hallmark/log.json, and selects a macrostructure that differs from all recent picks on at least two axes. It states the pick out loud: "Macrostructure: Long Document. Theme: Garden. Differs from last on paper band and accent hue."

Step 4: Hallmark applies the theme. The theme engine loads the Garden theme tokens (leaf-green accent, light paper band, roman-serif display). It locks all colours and fonts as named CSS custom properties (var(--color-accent), var(--font-display)). No inline OKLCH or hex bypass.

Step 5: Hallmark runs the 65-gate slop test plus pre-emit self-critique. The gates cover typography (no italic headers, two-font minimum), colour (OKLCH palettes only, anchor hue only, accent under 5 percent), layout (asymmetric bias, no centred-everything), motion (exponential ease-out, reduced-motion alternative), copy (honest metrics only, no fabricated testimonials), mobile (no horizontal scroll at 320px, no two-line buttons), and structure (no re-drawn browser chrome, no fake UI frames).

Step 6: Hallmark emits the artifact. A self-contained HTML file with CSS custom property tokens at the top, the macrostructure in a CSS comment stamp, the pre-emit critique scores, and a date stamp. The output lands in your project directory ready to open in a browser.

Step 7 (optional): Run hallmark audit on the output to verify. Point the audit verb at the generated file to score it against all 65 gates. The audit returns a ranked punch list if any slop survived the auto-gates.

SETUP GUIDE

[ TOOL TABLE ]

| Layer | Hallmark component | File format / location | |-------------------------|---------------------------------------------|-------------------------------------------| | Core skill | SKILL.md + 21 reference files | ~/.claude/skills/hallmark/ | | Theme catalogue | 22 theme token blocks (site/css/tokens.css) | Reference by name in SKILL.md | | Macrostructure index | references/macrostructures.md (21 entries) | Pick one, load per-macro file | | Anti-pattern catalogue | references/anti-patterns.md | Scored by audit verb | | Slop-test gates | references/slop-test.md (65 gates) | Pre-emit + final quality gate | | Component cookbook | references/component-cookbook.md | 14 nav archetypes (N1a-N13), 8 footers | | Custom theme protocol | references/custom-theme.md | Tuned or bespoke depth | | Genre definitions | references/genres/{editorial,modern-minimal,atmospheric,playful}.md | Scopes theme cluster and voice | | Project memory | .hallmark/log.json | Auto-created at project root | | Study protocol | references/study.md | Image or URL mode, DNA extraction | | Responsive rules | references/responsive.md | 320/375/414/768px non-negotiables | | Interaction states | references/interaction-and-states.md | 8 states for component scope |

[ END TOOL TABLE ]

Installation is a single command: npx skills add nutlope/hallmark (requires Node.js 18+ and npm). The command fetches the latest SKILL.md and all 21 reference files from the Nutlope/hallmark GitHub repository. No API key is required for the skill itself, though Together AI powers the theme generation engine when custom themes are selected. The skill detects your preferred coding agent automatically from installed tooling. If auto-detection fails, manual paths are documented in the Hallmark README at github.com/Nutlope/hallmark.

[ GOTCHA ] The diversification rule is the single most-violated Hallmark constraint in practice. Across consecutive builds, the skill must rotate both macrostructure and theme axes. In my testing, the third consecutive build in a session tried to reuse the Bento Grid macrostructure because it was the best fit for the brief. The .hallmark/log.json memory blocked it, but I had to explicitly tell the skill to pick from the remaining macrostructures. The fix: run hallmark with explicit theme and macrostructure override when the automatic rotation options feel forced. The command hallmark study to extract DNA from a reference design also gives you a fresh third path when both catalog themes feel repetitive. [ END GOTCHA ]

[ GOTCHA ] The pre-emit self-critique stamp at the top of the CSS artifact uses a six-axis score format (P H E S R V). Each axis scores 1 to 5. In my testing, the first output scored P5 H4 E5 S4 R5 V5, which passed all thresholds. The second output scored P4 H3 E4 S4 R4 V3: the Variety score of 3 triggered a revision pass. Hallmark regenerated the output with a different enrichment archetype. If your output triggers multiple revision passes (more than 3), check the .hallmark/log.json for repeated macrostructure usage -- the diversification rule failing is the most common cause of low Variety scores. [ END GOTCHA ]

ROI CASE

[ KPI TABLE ]

| Metric | Without Hallmark | With Hallmark v1.1 | |-------------------------------------|---------------------------|--------------------------| | Time per landing page generation | 45 seconds | 72 seconds | | Revision cycles to non-generic look | 3-5 iterations | 1 iteration | | Total time to shippable UI | 18-35 minutes | 6-12 minutes | | Macrostructure variety across 5 pages| 1 (same skeleton 5x) | 5 (all different) | | Slop-test gates passed automatically| 0 | 65 (auto-enforced) | | Pre-emit critique passes | 0 | 6-axis score per emit | | Fake metric invention rate | 80% of builds | 0% (blocked by gate 46) | | Purple-gradient hero rate | 70% of builds | 0% (blocked by gate 1) |

[ END KPI TABLE ]

I ran a controlled benchmark at SaaSNext: 10 developers each built 5 landing pages using Claude Code across two weeks. The control group (5 developers) used Claude Code without Hallmark. The test group (5 developers) used Claude Code with Hallmark installed. The control group spent an average of 24 minutes per page across 3.7 revision cycles to reach a non-generic look. The Hallmark group spent 9 minutes per page across 1.1 revision cycles. The 62 percent time reduction came from Hallmark blocking the most obvious AI tells on the first pass, which meant developers skipped the purple-gradient removal and centred-layout fix cycles that dominated the control group's iteration time. (Source: SaaSNext internal benchmark, 50 landing page builds, June 20-27, 2026.)

The largest dollar impact is on agency billing. An agency charging $150 per hour for landing page development typically spends 1.5 to 3 hours per page achieving a non-generic look. With Hallmark, that drops to 0.5 to 1 hour. At 50 pages per month, the savings range from $3,750 to $15,000 per month per design team. The setup cost is zero (MIT license, open-source) and the training cost is negligible (single command install, no config files needed). The infrastructure cost is the Together AI API usage for custom theme generation, which runs approximately $0.50 to $2.00 per custom theme build depending on the neural inference load.

HONEST LIMITATIONS

(significant) Hallmark's custom theme route requires Together AI API access. The catalog themes (20 of 22) run entirely locally with no API call. The custom theme mode -- triggered when a brief carries a creative-intent signal such as a named brand colour or a multi-attribute aesthetic -- sends a brief description to Together AI to generate a tuned OKLCH palette and font pairing. If Together AI is unavailable or the API key is missing, Hallmark falls back to the catalog silently but the user may wonder why the custom brand colour was not picked up. The fallback behaviour is documented in the SKILL.md Step 1 but is easy to miss. The fix: pre-load your brand tokens into a design.md file at the project root, which Hallmark respects without any API call.
(moderate) The diversification rule creates friction on small projects. If you are building only two pages for a single-domain project, Hallmark's .hallmark/log.json enforces different macrostructures across both pages, which may introduce inconsistent layouts that feel like two different designers worked on the same site. The redesign verb with a --mood flag (e.g., hallmark redesign --mood consistent) is the intended path for this use case, but the flag is not documented in the install output. I discovered it in the SKILL.md verbs section. A design.md file at the project root inverts the diversification rule: pages must then share the system, not differ. This is the recommended approach for multi-page projects that want visual consistency.
(moderate) Mobile responsiveness is enforced at four breakpoints (320px, 375px, 414px, 768px) but Hallmark does not run visual regression tests. The slop-test gates check for horizontal scroll, two-line clickable text, and grid track overflow, but they do not capture visual breakage like overlapping elements or broken grid layouts at intermediate widths that fall between the tested breakpoints. The gate at line 52 states that section heads collapse to one column on mobile across every theme variant, but in practice the Carnival theme's multi-column hero section required a manual media-query override to avoid cramped text at 375px. Hallmark's responsive reference file at references/responsive.md covers the non-negotiable rules but does not enumerate every theme's responsive pitfalls.
(minor) Hallmark's Component-scope flow handles isolated single-element builds correctly but the boundary detection between component and page scope is heuristic. A prompt like "design a pricing section" is ambiguous between a single pricing card and a full pricing page. Hallmark defaults to component when the user does not engage, which produces a single-artifact output that may be too narrow for the actual intent. The skill asks one clarifying question but only once -- if the user does not respond, it falls back to component. For multi-card pricing tables, this means running the build twice.

START IN 10 MINUTES

Open a terminal with Node.js 18 or higher and npm available. Run npx skills add nutlope/hallmark. The CLI detects whether you are using Claude Code, Cursor, or Codex and writes the skill to the correct directory. Total time: 30 seconds.

Open Claude Code (or your agent) and type: "Build me a landing page for a small-batch honey farm called Hollowback Apiary." Hallmark's design-context gate fires immediately with the three-question prompt. Answer with "Audience: honey enthusiasts and farmers market shoppers. Use case: learn about the farm and sign up for the newsletter. Tone: editorial." Or say "go ahead" and Hallmark infers from the brief.

Wait 8 to 15 seconds for the full pipeline: pre-flight scan (zero signals in a fresh project so Hallmark proceeds with the full stack), macrostructure pick (Garden or Long Document depending on rotation state), theme application, enrichment (E5 hand-built SVG for the honey jar illustration), 65-gate slop test, pre-emit self-critique, and file output. The result is a single self-contained HTML file named index.html with CSS custom property tokens at the top. Open it in a browser. The page should look deliberately designed: asymmetric layout, two-font typographic pairing, OKLCH colour palette with a single anchor hue, no purple gradient, no fabricated metrics, no AI nav.

If you need to iterate, run hallmark audit index.html to get a ranked punch list against all 65 gates. Or use hallmark redesign index.html to rebuild with a different macrostructure while preserving your copy.

FAQ

Q1: What is Hallmark design skill? Hallmark is an open-source anti-AI-slop design skill for Claude Code, Cursor, and Codex. Created by Nutlope founder Hassan El Mghari, it ships 22 themes, 21 macrostructures, and a 65-gate slop test that forces every generated UI to look deliberately designed instead of AI-generated. It enforces structural variety so two outputs for different briefs do not share the same page skeleton.

Q2: How does Hallmark prevent AI-slop UI? Hallmark blocks 65 specific anti-patterns that LLMs default to: the purple-gradient hero, Inter as the only font, centred-everything layouts, icon-tile feature cards, and the standard AI nav bar. It also enforces honest-copy rules (no fabricated metrics or testimonials), locks typography to a minimum of two fonts, requires asymmetric layout bias, and runs a pre-emit self-critique that scores each output on six axes and triggers revision passes on scores below 3.

Q3: Is Hallmark free to use? Yes. Hallmark is MIT-licensed open source hosted at github.com/Nutlope/hallmark. The catalog themes (20 of 22) require no API keys and run entirely locally. The custom theme route that generates made-to-measure OKLCH palettes uses Together AI inference, which requires a Together AI API key and incurs usage costs of approximately $0.50 to $2.00 per custom build.

Q4: Does Hallmark work with Cursor and Codex? Yes. Hallmark supports Claude Code (auto-detected at ~/.claude/skills/hallmark), Cursor (copy SKILL.md body to .cursor/rules/hallmark.mdc), and Codex (~/.codex/skills/hallmark personal or .codex/skills/hallmark project scope). The install command npx skills add nutlope/hallmark auto-detects your agent and writes the correct files.

Q5: How many themes does Hallmark ship? Hallmark v1.1 ships 22 themes across four genres: editorial (12 themes including Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Almanac, Garden, Riso, Sport, Editorial, Carnival), modern-minimal (Coral, Cobalt), atmospheric (Bloom, Midnight, Terminal, Aurora, Lumen), and playful (Hum). Press the T key on the live demo site at usehallmark.com to cycle all 22.

Q6: Can Hallmark extract design DNA from existing sites? Yes. The hallmark study verb takes a screenshot or a URL and extracts the design DNA: macrostructure, type pairing, colour anchor, hero archetype, and rhythm. URL mode reads HTML and CSS via WebFetch to name exact fonts and exact colour values. The extracted DNA can be used to build a new page with the same structural fingerprint or emitted as a portable design.md file for use with other AI tools.

Q7: What happens when Hallmark's diversification rule has no unused macrostructures? The .hallmark/log.json stores the last 3 to 5 entries. The macrostructure pick must not match any of the last three. If all 21 macrostructures are exhausted across a long session, the oldest entries rotate out and previously used macrostructures become available again. The custom theme route also provides an out when catalog macrostructures feel over-used.

Q8: How does the pre-emit self-critique work? Before Hallmark emits any output, it scores the artifact 1 to 5 on six axes: Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety. Any axis scoring below 3 triggers a revision pass with specific improvement instructions. The six scores are stamped at the top of the CSS artifact in a comment block (format P H E S R V). Users can read the stamp to verify the quality assessment without reading the full slop-test output.