What Is Hallmark AI? A Design Skill Package for Claude Code, Cursor, and Codex

Hallmark AI is a design-skill package for Claude Code, Cursor, and Codex that transforms textual briefs into production-ready web pages while enforcing strict anti-"AI slop" disciplines to ensure handcrafted aesthetics.

Hallmark AI is an open-source skill available from the Nutlope/hallmark repository that deliberately avoids the generic visual patterns typical of AI-generated interfaces. Instead of producing gradient-heavy, centered layouts with identical typography, it applies a rigorous architectural framework to generate unique, professional web pages that feel intentionally designed.

Core Architecture and Design Philosophy

The system operates through layered design disciplines that work together to prevent algorithmic uniformity. Each layer is implemented through specific markdown reference files that guide the AI assistant’s decision-making process.

Skill Definition and Entry Points

The skill is declared in skills/hallmark/SKILL.md, which defines the package name, description, and available verbs—the entry points for different operations. According to the source code, the four primary verbs are:

• build (default): Generates a new page from a text brief
• audit: Analyzes existing pages for anti-patterns
• redesign: Rebuilds a page while preserving content and routing
• study: Extracts design DNA from external URLs

Each verb has detailed specifications in skills/hallmark/references/verbs/*.md, dictating how the AI should process inputs and structure outputs.

Pre-Flight Scan and Asset Preservation

Before generating any code, Hallmark performs a pre-flight scan documented in SKILL.md (steps 0-5). This inspection identifies existing project tokens, font choices, motion libraries, and frameworks to preserve established design decisions. By reading the current state first, the skill ensures new pages integrate seamlessly with existing codebases rather than overriding them with foreign styles.

Macrostructure Selection and Diversification

Hallmark selects from 21 named page macrostructures—such as Marquee Hero or Stat-Led—indexed in skills/hallmark/references/macrostructures.md. A strict diversification rule prevents the system from selecting the same macrostructure used in the previous three builds, ensuring visual variety across projects. Each macrostructure has its own dedicated file containing specific layout rules and structural constraints.

Theme Routing and Token-Based Styling

The theme router selects from 20 curated themes including Hum, Cobalt, and Bloom. These themes are defined in site/index.html through data-theme attributes and implemented via CSS custom properties in site/css/tokens.css. All colors, fonts, and spacing values must use token references like var(--color-accent) or var(--font-display)—inline color values are explicitly prohibited, enforcing consistent, maintainable styling.

Component Archetypes and Hero Enrichment

Structural variety comes from a catalog of 14 navigation and 8 footer archetypes documented in skills/hallmark/references/component-cookbook.md, coded as N1a-N13 and Ft1-Ft8 respectively. For hero sections, skills/hallmark/references/hero-enrichment.md governs when to add imagery, video, or CSS art based on brief signals, preventing unnecessary visual clutter.

The 58-Gate Slop Test

Before finalizing output, Hallmark runs a 58-gate checklist defined in skills/hallmark/references/slop-test.md to identify anti-patterns like purple-gradient heroes, single-font usage, centered-all layouts, and "AI-style" navigation bars. If the output fails any gate, the system adds a pre-emit critique comment requiring correction before delivery.

How to Use Hallmark AI

Installation and Setup

Install the skill using the command documented in README.md (line 96):

npx skills add nutlope/hallmark

Generating Pages with the Build Verb

Invoke the default build by passing a text brief directly:

hallmark build "Landing page for a new coffee brand"

The system selects a macrostructure (e.g., Marquee Hero), applies a rotating theme (e.g., Hum), and generates a self-contained HTML file with linked token CSS:

<!doctype html>
<html lang="en" data-theme="hum">
<head>
  <link rel="stylesheet" href="css/tokens.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<body>
  <section class="slot slot--hero reveal" data-slot="hero" id="top" style="--i:0">
    <!-- Hero archetype selected for Hum theme -->
  </section>
</body>
</html>

Every generated file includes an output stamp comment recording the macrostructure, theme, and slop-test scores:

/* Hallmark · page · macrostructure: Marquee Hero · theme: Hum
 * scores: P5 H4 E5 S4 R5 V5
 */

Auditing Existing Designs

Analyze current pages for AI slop patterns using the audit verb:

hallmark audit ./site/index.html

Sample output identifies specific gate failures:

{
  "issues": [
    {"gate": 1, "message": "Purple-gradient hero"},
    {"gate": 2, "message": "Inter used as display"},
    {"gate": 3, "message": "All content centred"}
  ]
}

Redesigning and Studying Interfaces

Preserve existing content while swapping visual architecture:

hallmark redesign ./site/index.html --mood editorial

To extract design DNA from external sites:

hallmark study https://example.com/awesome-landing

This generates a portable design.md file containing the macrostructure analysis, type pairings, and color anchors.

Output Format and Metadata Stamps

Hallmark AI produces self-contained HTML and CSS that includes:

• A unique macrostructure differing from recent builds
• Rotating themes varying in paper band, display style, or accent hue
• Token-driven color and typography systems
• Preservation of existing project assets
• Full passage of all 58 slop-test gates

The output stamps embedded in generated files enable later audits and ensure diversification across multiple generation sessions.

Summary

• Hallmark AI is a design-skill package for Claude Code, Cursor, and Codex that eliminates generic "AI slop" through rigorous architectural constraints.
• The system uses four verbs (build, audit, redesign, study) defined in skills/hallmark/references/verbs/*.md to handle different design workflows.
• 21 macrostructures and 20 curated themes provide variety, while diversification rules prevent repetitive outputs.
• A token-based CSS system in site/css/tokens.css enforces consistent styling through CSS custom properties rather than inline values.
• The 58-gate slop test in skills/hallmark/references/slop-test.md validates outputs against common AI-generated anti-patterns before delivery.
• Generated files include metadata stamps tracking macrostructure, theme, and quality scores for auditability.

Frequently Asked Questions

What makes Hallmark AI different from other AI UI generators?

Unlike standard generators that rely on statistical patterns producing gradient-heavy, centered layouts, Hallmark AI implements enforced design disciplines through its 58-gate slop test and macrostructure diversification rules. According to the README.md, it "refuses to look AI-generated" by mandating token-based styling, theme rotation, and structural variety that mimics handcrafted design processes.

Which AI coding assistants support Hallmark AI?

Hallmark AI is designed specifically for Claude Code, Cursor, and Codex. The skill package follows the standard skill format consumed by these assistants, with entry points defined in skills/hallmark/SKILL.md that these platforms can parse and execute through natural language commands.

How does the 58-gate slop test prevent generic designs?

The slop test, documented in skills/hallmark/references/slop-test.md, checks for specific anti-patterns such as purple-gradient heroes, using Inter as a display font, centering all content, and icon-tile feature cards. Each gate validates that the output avoids recognizable "AI slop" tropes, with failures triggering pre-emit critique comments that must be resolved before the code is delivered to the user.

Can I use custom themes instead of the curated catalog?

Yes. While Hallmark defaults to selecting from 20 curated themes like Hum and Cobalt, the theme router supports a custom branch that triggers bespoke palette and font selection. This is implemented through the token system in site/css/tokens.css, where custom CSS custom properties can override the default theme values while maintaining the architectural constraints of the skill.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}