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

> Discover Hallmark's core features: a design-skill framework for anti-slop UI generation. It creates HTML CSS sites with 57 slop-test gates, eliminating AI clichés. Learn more!

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

---

**Hallmark is a design-skill framework that generates full-page HTML and CSS sites through a design-context gate driving three independent selection layers, backed by 57 slop-test gates to eliminate AI-generated visual clichés.**

Hallmark is an open-source design-skill framework available in the `Nutlope/hallmark` repository. Unlike typical AI UI generators that produce generic "slop," Hallmark deliberately rejects visual clichés through a rigorous anti-pattern detection system. The **core features of Hallmark** center on its ability to generate self-contained landing pages by combining structural fingerprints, visual themes, and enrichment archetypes while ensuring output quality through automated critique.

## The Design-Context Gate and Three-Layer Architecture

At the heart of Hallmark lies a **design-context gate** that extracts the brief’s audience, use-case, and tone. This gate drives three independent selection layers defined in the repository's reference files:

### Macrostructure Selection (21 Fingerprints)

Hallmark selects from **21 structural fingerprints** that determine the page's information architecture. These macrostructures include patterns like *Long Document*, *Marquee Hero*, and *Manifesto*, each defined in `skills/hallmark/references/macrostructures/`. For example, the Long Document fingerprint is documented in [[`skills/hallmark/references/macrostructures/02-long-document.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures/02-long-document.md).

### Theme Selection (20 Visual Systems)

The framework chooses from **20 visual themes** such as *Lumen*, *Hum*, and *Cobalt* that dictate color palettes, typography pairings, and icon sets. Each theme is a self-contained design system; the Lumen theme specification lives in [[`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md).

### Enrichment Archetypes (8 Embellishments)

Finally, Hallmark applies one of **8 enrichment archetypes** that add optional UI embellishments. These include SVG icon treatments, sticky panels, and Lottie animations. The complete archetype definitions are stored 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 a fingerprint, Hallmark runs **57 slop-test gates** plus a self-critique step. These gates ensure the output does not contain anti-patterns listed in [[`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), such as italic headers, generic marketing copy, or duplicated icon libraries.

The pipeline validates that generated pages remain **self-contained** (outputting [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) + [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css)) and free from the visual clichés typical of AI-generated interfaces.

## Four Verbs for Design Operations

Hallmark exposes four CLI verbs that define the interaction mode, as documented in [[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md):

- **Default build**: Generates a new UI from a brief, performing the full selection and slop-test pipeline.
- **`hallmark audit <target>`**: Performs read-only analysis of an existing page, returning a punch-list of anti-patterns without modifying files. Implementation details are in [[`skills/hallmark/references/verbs/audit.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/audit.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/audit.md).
- **`hallmark redesign <target>`**: Preserves the copy and information architecture while discarding the original structure, applying a new macrostructure, theme, and enrichment. See [[`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md).
- **`hallmark study <screenshot|URL>`**: Extracts the "DNA" (macrostructure, theme, type-pairing, color anchor) from a reference design, then optionally rebuilds content using that DNA or emits a portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md). Documented in [[`skills/hallmark/references/verbs/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md).

## Custom Workflow and Portable Design Systems

When a brief cannot be satisfied by any catalog theme, Hallmark activates the **Custom workflow**. In this mode, the framework generates handcrafted palettes, typography, and layouts from scratch while maintaining the same slop-test rigor.

All generated designs can be locked into 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, enabling version-controlled design systems that can be rebuilt or shared across projects. Worked examples demonstrating every combination of macrostructure, theme, and enrichment are available in the [`site/_tests/`](https://github.com/Nutlope/hallmark/tree/main/site/_tests) directory.

## Installation and Usage Examples

Install Hallmark as a skill compatible with Claude Code, Cursor, and Codex:

```bash
npx skills add nutlope/hallmark

```

Generate a new landing page from a natural-language brief:

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

```

Audit an existing page for anti-patterns:

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

```

Redesign while preserving copy:

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

```

Study a reference design and extract its DNA:

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

```

Generate a custom theme when no catalog option fits:

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

```

## Summary

- Hallmark uses a **design-context gate** to drive three selection layers: 21 macrostructures, 20 themes, and 8 enrichment archetypes.
- The **57 slop-test gates** enforce quality by rejecting AI visual clichés defined in [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md).
- Four CLI verbs—**default**, **audit**, **redesign**, and **study**—provide flexible workflows for generation, analysis, and DNA extraction.
- The **Custom workflow** generates bespoke design systems when catalog themes are insufficient.
- All 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 can be serialized to a portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file.

## Frequently Asked Questions

### How does Hallmark differ from other AI UI generators?

Hallmark deliberately rejects the visual clichés typical of AI-generated interfaces through its **slop-test pipeline**. While other tools may produce generic marketing copy or repetitive layouts, Hallmark runs 57 automated gates plus self-critique to ensure outputs avoid anti-patterns like italic headers or duplicated icon libraries.

### What file formats does Hallmark generate?

Hallmark produces **self-contained pages** consisting of [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) and [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css). These files require no external dependencies beyond the referenced assets. Additionally, the framework can emit a portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file that captures the design DNA for version control or reuse.

### Can I use Hallmark to analyze existing websites?

Yes. The **`hallmark audit`** verb performs read-only analysis of existing pages, scanning for anti-patterns without modifying the source. The **`hallmark study`** verb goes further by extracting the design DNA—macrostructure, theme, type-pairing, and color anchor—from screenshots or live URLs.

### What happens if none of the 20 catalog themes fit my brand?

Hallmark activates the **Custom workflow** when catalog themes are insufficient. This mode generates handcrafted palettes, typography, and layouts from scratch while still applying the full slop-test rigor to ensure quality output.