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.
What it does
Hallmark is a design skill for Claude Code, Cursor, and Codex that actively resists AI-generated visual clichés. It selects a macrostructure and theme for each brief, runs 57 slop-test gates, and blocks the purple-gradient heroes and Inter-only font stacks that mark generic AI output.
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.
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.
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.
The four verbs cover the full design lifecycle:
lock the DNA to get a portable design.md for handoff.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.
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.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
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.
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.
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.
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.
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.
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.
Claude/Codex/Cursor skill from the Tailwind CSS team that upgrades AI-generated UI from generic to designer-quality, in any existing project.
Best for Teams using Claude Code or Codex to ship UI who want output that looks senior-designer reviewed, not AI-interpolatedOpen-source AI design intelligence skill for Claude Code: UI styles, color palettes, font pairings, and UX guidelines in one searchable database.
Best for Builders who get solid AI-generated code but consistently end up with generic-looking interfacesAgent skills for UI builders, by the creators of Tailwind CSS and Refactoring UI, wires into Claude Code, Cursor, and Codex to ship interfaces that look designed, not generated.
Best for Teams using coding agents for frontend work who want output that reflects senior design judgment, not generic AI defaultsui.sh Brand Kit skill: generate a visual brand direction board with site mockups, typography, and color from a single prompt, for Codex-powered coding agents.
Best for Teams starting a new product who want a coding agent to build UI with a coherent visual identity from day oneAgent skill for adding thoughtfully designed dark mode to existing UIs, balances contrast across text, surfaces, borders, and images for Claude Code, Cursor, Codex, and more.
Best for Teams with a finished light-mode UI who want dark mode that looks designed rather than auto-invertedui.sh Ideas skill for AI coding agents: generate and compare multiple UI design directions in the browser before committing to one.
Best for Teams that want to explore multiple UI directions before committing any design to the codebase