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

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

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

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), such as italic headers, generic marketing copy, or duplicated icon libraries.

The pipeline validates that generated pages remain self-contained (outputting index.html + 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):

• 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).
• 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).
• 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. Documented in [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/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/ directory.

Installation and Usage Examples

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

npx skills add nutlope/hallmark

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

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

Audit an existing page for anti-patterns:

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

Redesign while preserving copy:

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

Study a reference design and extract its DNA:

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

Generate a custom theme when no catalog option fits:

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.
• 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 + tokens.css) and can be serialized to a portable 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 and tokens.css. These files require no external dependencies beyond the referenced assets. Additionally, the framework can emit a portable 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.

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