# What Is Hallmark AI? A Design Skill Package for Claude Code, Cursor, and Codex
> Discover Hallmark AI, a design skill package for Claude Code, Cursor, and Codex that crafts production-ready web pages from text briefs with a focus on handcrafted aesthetics. Build better.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-25
---
**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) through `data-theme` attributes and implemented via CSS custom properties in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md), coded as N1a-N13 and Ft1-Ft8 respectively. For hero sections, [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/README.md) (line 96):
```bash
npx skills add nutlope/hallmark
```
### Generating Pages with the Build Verb
Invoke the default build by passing a text brief directly:
```bash
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:
```html
```
Every generated file includes an output stamp comment recording the macrostructure, theme, and slop-test scores:
```css
/* 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:
```bash
hallmark audit ./site/index.html
```
Sample output identifies specific gate failures:
```json
{
"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:
```bash
hallmark redesign ./site/index.html --mood editorial
```
To extract design DNA from external sites:
```bash
hallmark study https://example.com/awesome-landing
```
This generates a portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), where custom CSS custom properties can override the default theme values while maintaining the architectural constraints of the skill.