# Hallmark By **nutlope** · Skills A design skill for Claude Code, Cursor, and Codex that blocks AI visual clichés and generates structurally distinct, non-template UI, for builders and designers. - Source: https://www.usehallmark.com/ - Repository: https://github.com/Nutlope/hallmark - Install: `npx hallmark` - Tags: design, ui, anti-slop, skill, open-source, mit, claude-code, cursor - Pricing: free - Upvotes: 0 ## Features - Builds new pages by selecting macrostructure then theme, never repeating the last 3 structures - Runs 57 slop-test gates plus a pre-emit self-critique before returning output - Audits existing pages against the anti-pattern catalogue, returning a ranked punch list - Redesigns pages with a new structural fingerprint while preserving copy and brand - Extracts design DNA (macrostructure, type pairing, colour anchor) from a screenshot or URL - Custom mode designs palette, type, and layout from scratch when no catalog theme fits - Enforces 8 cross-theme foundations: OKLCH colour, named spacing scale, exponential motion, type pairing - MIT licensed; auto-detects in Claude Code, Cursor, and Codex --- ## Why it matters Every LLM defaults to the same visual fingerprint: purple-to-pink gradient hero, Inter for display and body, centered everything, icon-tile feature cards, four-link nav. Hallmark names these five anti-patterns explicitly and refuses to ship them. The result is pages that read as designed rather than generated. ## The big picture Hallmark is a plain-text skill file, not a component library. It encodes a tight set of structural opinions: OKLCH palettes with a single anchor hue, paired typefaces (display plus body, never the same family), asymmetric layout bias, exponential ease-out motion with a reduced-motion alternative, and a named spacing scale in multiples of four. Those rules apply regardless of which theme is selected. ## How it works Install with `npx skills add nutlope/hallmark`. The skill auto-detects in Claude Code (`~/.claude/skills/hallmark/`), Cursor (`.cursor/rules/hallmark.mdc`), and Codex (`~/.codex/skills/hallmark/`). From there, just ask your agent for a UI. Hallmark picks a macrostructure first, then dresses it in one of 20 themes, then runs 57 slop-test gates before returning output. It tracks the last three macrostructures and blocks repeats. ## Zoom in The four verbs cover the full design lifecycle: - **Build** (default): brief in, full page out, macrostructure selected and stamped in the CSS comment. - **Study**: paste a screenshot or URL; Hallmark returns a DNA card (macrostructure, type pairing, colour anchor) without copying pixels. Add `lock the DNA` to get a portable `design.md` for handoff. - **Audit**: point it at existing code and get a ranked punch list scored against the anti-pattern catalogue, no edits made. - **Redesign**: same copy, same brand, new structural fingerprint. Useful when a page is functional but recognizably generic. ## Yes, but Custom mode (marked NEW in the README) fires when no catalog theme fits the brief. It designs palette, type, and layout from scratch while keeping all 57 slop-test gates. Per the README, vanilla briefs never trigger it, so the escape hatch is quiet. ## The bottom line Hallmark is the right reach when your agentic IDE keeps shipping the same gradient hero and you want structural variety baked into the prompt layer. It does not write component libraries or handle backend code; it is a focused design guardrail that pays off on greenfield pages and redesign passes alike. ## FAQ ### What is Hallmark and what problem does it solve? Hallmark is a design skill for Claude Code, Cursor, and Codex that blocks the visual clichés AI coding assistants default to: purple-gradient heroes, Inter used as both display and body font, centered layouts, icon-tile feature cards, and the standard four-link nav. It enforces structural variety by picking a macrostructure and theme for each brief, running 57 slop-test gates, and refusing to repeat the same macrostructure across the last three outputs. The result is pages that feel designed per brief rather than swapped from a single template. ### How do I install and use Hallmark? Run `npx skills add nutlope/hallmark` to install. The skill auto-detects in Claude Code at `~/.claude/skills/hallmark/`, in Cursor as `.cursor/rules/hallmark.mdc`, and in Codex at `~/.codex/skills/hallmark/`. Once installed, just ask your agent to build a UI and Hallmark attaches itself automatically. Re-run the install command any time to update to the latest version. ### Is Hallmark free and open source? Yes, Hallmark is MIT licensed and free to use, fork, and ship. It was made by Together AI and is hosted publicly on GitHub. No account, subscription, or API key is required beyond your existing agent setup in Claude Code, Cursor, or Codex. ### What is Hallmark best for? Hallmark is best for greenfield pages that need to look deliberately designed rather than AI-generated, and for redesign passes where you want a new structural fingerprint without rewriting the codebase. The study verb is especially useful when you admire a design and want a portable DNA card to build against in another tool, without pixel-cloning. It also serves as an audit layer for existing pages, scoring them against its anti-pattern catalogue and returning a ranked punch list. ### How does Hallmark compare to just prompting an LLM to avoid AI clichés? A plain prompt asking an LLM to 'avoid looking AI-generated' tends to drift because there are no enforcement gates. Hallmark encodes 21 macrostructures, 20 themes, 57 explicit slop-test gates, and a pre-emit self-critique pass that forces a revision if output falls below threshold. It also tracks the last three macrostructures used and blocks repeats, so variety is structural rather than cosmetic. Per the site, the same prompt run with Sonnet without Hallmark produces gradient heroes and fabricated Trustpilot ratings; with Hallmark it picks a different archetype and skips invented metrics. ### What are Hallmark's limits? Hallmark is a skill file, not a component library or design-system generator. It operates at the page level and shapes what the agent outputs, but it does not manage CSS tokens across a codebase or generate reusable React components. The study verb deliberately refuses to identify specific fonts or copy pixels from paid templates, which is a feature but can frustrate users who want exact reproduction. Custom mode (new in v1.1) has fewer worked examples than the 20 catalog themes, so results there are less battle-tested. --- [View on Analog](https://analoghq.ai/nutlope/skills/hallmark)