In July 2026, an open-source project called Nutlope/hallmark exploded on GitHub Trending — gaining 3,181 stars in a single day and quickly surpassing 10,000+ stars. It's not a new AI model, not a programming framework, but an anti-AI-slop design Skill.

If you're tired of AI-generated web pages that all look the same, Hallmark is for you.

What is Hallmark?

Hallmark is an open-source "anti-AI-slop" design Skill for Claude Code, Cursor, and Codex AI coding tools. Developed by the Together AI team, it's released under the MIT license.

Why do AI-generated designs always look the same?

All large language models are trained on the same internet data, converging to similar "on-distribution defaults." This results in:

  • Every landing page follows the hero + three-column features + CTA pattern
  • Color schemes are always gradients + white cards
  • Fonts are always Inter / sans-serif
  • Layouts are nearly identical

This phenomenon is known as "AI slop" — AI-generated content that looks like it was cut from the same template.

How does Hallmark solve this?

Hallmark's core mechanism is brilliant:

Mechanism Description
21 Macrostructures Randomly selects from 21 layouts each time, ensuring structural diversity
20+ Themes Covers Distil, Cold Snap, Bubble, Garden, Riso, and many other distinct styles
57 Slop Gates Automatically checks for 57 common AI design anti-patterns after generation
Pre-emit Self-critique Self-reviews before output, refusing to output if standards aren't met

The result: Two pages generated by Hallmark look like completely different websites, not color swaps of the same template.

Installing Hallmark

The easiest way is via npx skills add:

npx skills add nutlope/hallmark

This command automatically downloads Hallmark's Skill files to your AI tool's config directory. Run it again to update.

Method 2: Manual Installation

If you prefer manual management, download SKILL.md and the references/ folder, and place them in the appropriate directory:

Claude Code：

mkdir -p ~/.claude/skills/hallmark/
# Place SKILL.md and references/ inside

Cursor：

# Create in project root
mkdir -p .cursor/rules/
# Put SKILL.md content (without frontmatter) in .cursor/rules/hallmark.mdc

Codex：

# Personal (global)
mkdir -p ~/.codex/skills/hallmark/

# Project-level (current project only)
mkdir -p .codex/skills/hallmark/

Hallmark's Four Core Commands

Hallmark provides four powerful commands covering the complete workflow from creation to reconstruction:

1. hallmark (Default)

The most commonly used command for building new UI from scratch.

hallmark

It will: - Select a macrostructure for your brief - Apply the rule-set - Run 57 slop tests - Self-review before output

2. hallmark audit <target>

For evaluating existing code and detecting AI-slop anti-patterns.

hallmark audit src/components/LandingPage.jsx

It will: - Analyze the target file or directory - Score and list all discovered AI design anti-patterns - Generate a fix checklist - Does not modify any code, pure diagnostics

3. hallmark redesign <target>

For reconstructing existing pages, keeping core content but completely changing the appearance.

hallmark redesign src/pages/Home.jsx

It will: - Discard the existing structure - Keep copy, information architecture, and brand elements - Rebuild the entire page with a new design fingerprint - Ensure the new design meets Hallmark's anti-slop standards

4. hallmark study <screenshot | URL>

For learning great designs and extracting their design DNA.

hallmark study https://example.com/design-inspiration

It will: - Analyze the screenshot or web URL - Extract core design elements: macrostructure, font pairing, color anchors - Refuse pixel-level copies and paid templates - Optionally generate a portable design.md file for collaboration with other AI tools

Practical Demo: Building a Landing Page from Scratch

Let's use Hallmark to create a modern SaaS product landing page:

  1. Launch Claude Code, ensuring Hallmark Skill is enabled
  2. Enter the prompt： text Use hallmark to build a landing page for a SaaS product called "Hyperlane", a Dev Infrastructure monitoring platform targeting engineers, emphasizing real-time performance and reliability.
  3. Observe the output： - Hallmark automatically selects the "Hyperlane" theme (from its official examples) - Uses a unique grid layout and color scheme - Includes engineer-focused copy and visual elements - The generated HTML/CSS file includes comments indicating the macrostructure used

This is Hallmark's magic — no more generic templates, but designs tailored for specific products.

Hallmark's Design Philosophy

Behind Hallmark lies a profound design philosophy:

  • No Templates: No "default theme", every generation is a fresh creation
  • Embrace Diversity: 21 macrostructures ensure no structural repetition
  • Quality First: 57 detection gates are stricter than human designers
  • Traceability: Every generated HTML file has CSS comments indicating the design fingerprint
  • Composability: Generated design.md files can be imported into other AI tools, forming a design pipeline

Summary

Hallmark is not just a CSS framework, but a design-thinking AI agent. It teaches AI tools to think like human designers: understand context, respect brands, pursue uniqueness, and avoid mediocrity.

In an era flooded with AI design tools, Hallmark offers a completely different approach: not making AI generate more things faster, but making AI generate fewer but better things.

🚀 Get Started Now： 1. Visit Hallmark's website to see all examples 2. Star Nutlope/hallmark on GitHub 3. Run npx skills add nutlope/hallmark to start your anti-AI-slop design journey

This article is based on Hallmark v2.1.0. For the latest version, please check the GitHub repository