Hallmark: Stop AI-Generated UI Slop in One Command

Hallmark, an open-source design skill by Hassan El Mghari (Nutlope) at Together AI, has crossed 12,300 GitHub stars by preventing AI coding agents from generating homogeneous landing pages. The skill overrides default agent outputs by enforcing structural variety, 22 built-in themes, and 57 slop-test gates that reject predictable patterns like purple-to-pink gradients and Inter-only fonts. Research tracking AI-generated UI patterns in 2026 shows 73 percent of AI-generated landing pages use Inter or Roboto as both display and body font, confirming the homogeneity problem Hallmark addresses.

Every AI coding agent builds the same website. Purple-to-pink gradient hero. Inter font everywhere. Three icon-tile feature cards. “Build the future” headline. Blue CTA button. Ask Claude Code, Cursor, or Codex to ship a landing page and you get a color-swap of a template they were all trained on. Hallmark — an open-source design skill by Hassan El Mghari Nutlope at Together AI — just crossed 12,300 GitHub stars by doing exactly one thing: refusing to build that page. The Problem Is Structural, Not Superficial Telling your coding agent to make something “unique” or “not AI-looking” does not work. You get a slightly different color-swap of the same structure. That is because LLMs were trained on the same component libraries, the same Tailwind documentation, the same landing page templates. The default output is not a style choice — it is the center of mass of their training distribution. The result: 73 percent of AI-generated landing pages in 2026 use Inter or Roboto as both the display and body font, with no pairing face. The purple-to-pink gradient hero with white centered text has become the most recognizable AI aesthetic this year. The icon-tile feature card — rounded rectangle, colored icon square, two-line heading, three-line body, “Learn more” link — appears identically across GPT-4o, Claude Sonnet 4, and Gemini 2.5 outputs. The structural fingerprint is always the same: hero, three feature cards, CTA, footer. Research tracking AI-generated UI patterns https://vibecodekit.dev/ai-slop-design in 2026 confirms this homogeneity is getting worse, not better, as agent usage scales. Hallmark treats this as a structural problem and solves it structurally. What Hallmark Is and Is Not Hallmark is not a theme library. It is a SKILL.md rule-set https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md that loads into your agent’s context and overrides its design defaults. When you invoke it, the agent stops reaching for its training-distribution defaults and follows Hallmark’s prescriptive rules instead. The mechanism has four stages. First, Hallmark selects a macrostructure appropriate to your brief — something like Marquee Hero, Stat-Led, or Editorial Split — breaking the default sequential layout. Second, it selects from 22 built-in themes across four genre families: editorial the default anti-slop canon , modern-minimal Stripe and Linear school , atmospheric Suno and Runway dark-tool school , and playful post-Linear soft school . Third, it runs the output through 57 slop-test gates that check for predictable gradients, generic card layouts, uninspired spacing, Inter-only fonts, and dozens of other AI-default patterns. Fourth, it runs a pre-emit self-critique that scores the design from one to five on Philosophy, Hierarchy, Execution, Specificity, Restraint, and Variety — anything below three triggers a revision pass. Project memory in .hallmark/log.json tracks which themes and macrostructures have been used, so two pages in the same project stay visually distinct. That last point is the real differentiator. Hallmark enforces structural variety, not just visual variety. Two Hallmark pages for two different briefs do not share the same hero-to-CTA rhythm — they feel like different sites, not different color-swaps of the same template. The Four Commands Hallmark ships with four verbs: hallmark build — Asks three questions about your brief, then generates a full page that breaks the default structural fingerprint. hallmark audit — Scores existing code against the 57-gate anti-pattern catalogue and returns specific failures, not just a score. hallmark redesign — Rebuilds the structural layer with a different fingerprint while keeping your copy and brand identity intact. hallmark study — Extracts design DNA from a screenshot or URL into a portable design.md file you can carry into future builds. The audit command is underrated. Pasting existing agent-generated code into a hallmark audit run is a fast way to see, specifically, what pattern your agent has fallen into — which tends to make obvious what to fix even manually. Getting Started Installation is one command: npx skills add nutlope/hallmark Hallmark auto-detects your agent directory — ~/.claude/skills/hallmark for Claude Code, .cursor/rules/hallmark.mdc for Cursor, ~/.codex/skills/hallmark for Codex. It also works with v0, Lovable, and bolt.new. The live demo at usehallmark.com https://www.usehallmark.com/ cycles all 22 themes; press T to step through them. The rule-set is open-source under MIT and lives at github.com/Nutlope/hallmark https://github.com/Nutlope/hallmark . Reading SKILL.md once before using the tool is worth the five minutes — it clarifies what constraints your agent is actually following and which genre best fits your project. The Bigger Signal Hallmark gained 3,181 stars in a single day on July 15, hitting number one on Trendshift https://trendshift.io/repositories/33587 and ending the week at 12,300 stars. That velocity is not just about UI design — it reflects a broader shift in what developers want from their coding agents. The first wave of AI coding tools was about capability: can the agent write a working login form? The second wave is about quality control: can the agent ship code that does not embarrass you? Hallmark is one answer to the second question, applied specifically to design. The agent skills ecosystem — SKILL.md, Superpowers, OfficeCLI, Rider’s agent skills — is maturing into a layer where developers can enforce quality floors on what their agents produce. Hallmark is a quality floor, not a ceiling. Whether the LLM actually follows the SKILL.md constraints depends on the model and context length. It does not replace a designer’s judgment. But for developers who are not designers and want their AI-built interfaces to stop looking like AI built them, this is the most direct tool available today — and it slots directly into the workflow you already use.