# Core Features of Hallmark: A Design-Skill Framework for Anti-Slop UI Generation

> Explore Hallmark the design-skill framework generating HTML CSS sites. Discover its core features selecting from macrostructures themes archetypes and passing slop-test gates for clean UI.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-28

---

**Hallmark is a design-skill framework that generates full-page HTML and CSS sites by selecting from 21 macrostructures, 20 themes, and 8 enrichment archetypes while running 57 slop-test gates to eliminate AI-generated visual clichés.**

Hallmark (Nutlope/hallmark) is an open-source design-skill framework that creates self-contained, production-ready web pages from natural language briefs. Unlike typical AI UI generators, Hallmark deliberately rejects generic visual patterns through a rigorous anti-pattern detection system. The core features of Hallmark center on a three-layer selection architecture and four command-line verbs that enable both creation and analysis of web interfaces.

## Three-Layer Selection Architecture

At the heart of Hallmark is a **design-context gate** that extracts audience, use-case, and tone from a brief before driving three independent selection layers.

### Macrostructure Layer (21 Fingerprints)

The system selects one of 21 structural "fingerprints" that define the information architecture and layout rhythm. These macrostructures include patterns like *Long Document*, *Marquee Hero*, and *Manifesto*, each stored as individual markdown files in [`skills/hallmark/references/macrostructures/`](https://github.com/Nutlope/hallmark/tree/main/skills/hallmark/references/macrostructures). For example, the *Long Document* pattern is defined in [[`02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/02-long-document.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md) and optimizes for editorial, scrolling content.

### Theme Layer (20 Visual Themes)

Hallmark applies one of 20 catalog themes—such as *Lumen*, *Hum*, or *Cobalt*—that dictate the complete visual system including color palettes, typography pairings, and icon sets. Each theme is a self-contained specification in [`skills/hallmark/references/themes/`](https://github.com/Nutlope/hallmark/tree/main/skills/hallmark/references/themes), with [[`lumen.md`](https://github.com/Nutlope/hallmark/blob/main/lumen.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) serving as a reference implementation for light, high-contrast editorial aesthetics.

### Enrichment Archetype Layer (8 Embellishments)

The final layer selects from 8 **enrichment archetypes** that add optional UI embellishments without breaking the structural integrity. These include SVG icon systems, sticky navigation panels, and Lottie animation triggers defined in [[`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md).

## The Slop-Test Pipeline and Anti-Pattern Detection

After selecting the three layers, Hallmark executes **57 slop-test gates** plus a self-critique step to ensure the output avoids the anti-patterns cataloged in [[`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md). These tests flag issues such as italic headers, generic marketing copy, duplicated icon libraries, and other visual clichés typical of AI-generated UI. Pages that fail any gate are rejected or regenerated until they meet the framework's quality standards.

## Four Verbs for Design Operations

Hallmark exposes four CLI verbs that determine how the system interacts with existing or new designs.

### Default: Build from Brief

The default mode generates a new UI from a natural language brief, executing the full selection pipeline plus slop-tests.

```bash
hallmark "Build me a landing page for Coffeebox — a small-batch coffee subscription. Warm, editorial tone."

```

This command triggers the design-context gate, selects a macrostructure, theme, and enrichment, runs the 57 slop-tests, and outputs a self-contained page.

### Audit: Read-Only Analysis

The **`audit`** verb performs static analysis on an existing HTML file without modifying it, returning a punch-list of detected anti-patterns.

```bash
hallmark audit site/_tests/06-anya-portfolio/index.html

```

As implemented in [[`verbs/audit.md`](https://github.com/Nutlope/hallmark/blob/main/verbs/audit.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/audit.md), this mode checks the target against the anti-pattern registry and reports violations such as unwanted italic headers or repetitive layout grids.

### Redesign: Structural Refresh

The **`redesign`** verb preserves the existing copy and information architecture while discarding the original visual structure, applying a new macrostructure, theme, and enrichment.

```bash
hallmark redesign site/_tests/04-meridian-manifesto/index.html

```

According to [[`verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/verbs/redesign.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md), this operation keeps the text content intact but reprocesses it through the three-layer selection system, effectively giving the same content a new visual fingerprint.

### Study: DNA Extraction

The **`study`** verb extracts the "DNA"—macrostructure, theme, type-pairing, and color anchor—from a reference design provided as either a screenshot or URL.

```bash
hallmark study https://www.usehallmark.com/examples/cobalt-01/

```

As documented in [[`verbs/study.md`](https://github.com/Nutlope/hallmark/blob/main/verbs/study.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md), this extracts the design genes and can either rebuild user content using that DNA or emit a portable [[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md) file for version control.

## Custom Workflow for Bespoke Designs

When a brief cannot be satisfied by any of the 20 catalog themes, Hallmark activates the **Custom** workflow. In this mode, the framework generates a handcrafted palette, typography system, and layout grid from scratch while maintaining the same 57 slop-test rigor. This ensures that even bespoke designs avoid the generic "AI slop" aesthetic.

```bash
hallmark "Design a custom page for a boutique tea-menu brand. No existing theme works."

```

## Self-Contained Output and Test Suite

All generated pages are **self-contained**, consisting of a single [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) file and a [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css) design token file with no external dependencies. The repository includes a comprehensive test suite in [`site/_tests/`](https://github.com/Nutlope/hallmark/tree/main/site/_tests) containing worked examples such as *Tally*, *Cobalt-01*, and *Hum-07* that demonstrate every valid combination of macrostructure, theme, and enrichment.

Installation is performed via the skills CLI:

```bash
npx skills add nutlope/hallmark

```

## Summary

- Hallmark uses a **three-layer selection system**: 21 macrostructures, 20 themes, and 8 enrichment archetypes to generate unique page layouts.
- A **57-gate slop-test pipeline** eliminates AI-generated visual clichés by checking against the anti-patterns registry.
- Four **verbs** (`default`, `audit`, `redesign`, `study`) provide distinct interaction modes for creation, analysis, restructuring, and DNA extraction.
- The **Custom workflow** generates bespoke design systems when catalog themes are insufficient.
- Output is **self-contained** ([`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) + [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css)) and reproducible via portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) files.

## Frequently Asked Questions

### How does Hallmark prevent generic AI-generated designs?

Hallmark runs **57 slop-test gates** after generating a page, checking against the anti-patterns defined in [[`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md). These tests detect visual clichés such as italic headers, generic marketing copy, and duplicated icon libraries. The system self-critiques and regenerates until the output passes all gates.

### Can I use Hallmark to analyze an existing website without changing it?

Yes. Use the **`hallmark audit <target>`** command to perform read-only analysis. This verb inspects the target HTML and returns a list of detected anti-patterns without modifying the source files, as implemented in [[`verbs/audit.md`](https://github.com/Nutlope/hallmark/blob/main/verbs/audit.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/audit.md).

### What happens if none of the 20 built-in themes fit my brand?

Hallmark activates the **Custom** workflow, which generates a bespoke color palette, typography pairing, and layout system from scratch. This mode still applies the full slop-test pipeline to ensure the custom design avoids generic AI aesthetics while meeting your specific brief requirements.

### How do I extract a design system from an existing website I like?

Use the **`hallmark study`** verb with either a screenshot path or URL. This extracts the "DNA"—including macrostructure fingerprint, theme characteristics, and type-pairing—and can either apply that DNA to your new content or export it to a portable [[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md) file for later use.