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

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/. For example, the Long Document pattern is defined in [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/, with [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).

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/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.

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.

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

As implemented in [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.

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

According to [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.

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

As documented in [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/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.

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 file and a tokens.css design token file with no external dependencies. The repository includes a comprehensive test suite in 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:

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 + tokens.css) and reproducible via portable 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/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/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/skills/hallmark/references/design-md.md) file for later use.

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