Where Is the Source Code for Hallmark AI? Repository Structure and Key Files

The complete Hallmark AI source code is publicly available in the Nutlope/hallmark repository on GitHub, where the skill manifest, design tokens, macrostructure catalog, and generated demo pages are all committed under the repository root.

Hallmark AI is an open-source design skill that generates anti-"AI slop" web pages through a structured pipeline defined entirely in its codebase. According to the Nutlope/hallmark source code, every runtime component—from the CLI verbs to the CSS token system—resides in a single browsable repository that powers both the command-line tool and the live demo at usehallmark.com.

Repository Overview and Entry Points

The Hallmark AI project lives at https://github.com/Nutlope/hallmark. All runtime logic, design-system architecture, and example outputs are stored under the repository root without external dependencies.

The primary entry points include:

• README.md — Contains the high-level project overview, installation instructions, and links to the live demo.
• skills/hallmark/SKILL.md — The core skill manifest that defines the verbs, safety rails, and step-by-step design pipeline executed by the CLI.

The Skill Manifest and CLI Verbs

In skills/hallmark/SKILL.md, Hallmark AI defines its four primary operations as discrete verbs consumed by Claude Code, Cursor, or Codex. This file acts as the runtime contract for the skill.

The manifest exposes these commands:

# Install Hallmark as a skill for Claude Code / Cursor / Codex

npx skills add nutlope/hallmark

Each verb triggers a specific pipeline stage:

• hallmark design <brief> — Creates a new page from a text brief, referencing the macrostructure catalog and theme tokens.
• hallmark audit ./path/to/page.html — Analyzes an existing page against the 58 slop-test gates without making edits.
• hallmark redesign ./path/to/page.html [--mood modern-minimal] — Rebuilds an existing page while preserving copy, information architecture, and brand identity.
• hallmark study https://example.com — Extracts DNA from a live URL or screenshot, optionally rebuilding the page using Hallmark's component system.

Design Tokens and Theming

The visual foundation of every generated page is defined in site/css/tokens.css. This file centralizes CSS custom properties using OKLCH colour tokens, font families, and spacing scales that every output references via variables like var(--color-accent) and var(--font-display).

The theme catalog lives in references/themes/, containing 20 distinct themes such as hum, cobalt, and bloom. Each theme file defines colour bands, display style, and accent hue. For example, references/themes/hum.md specifies the complete aesthetic parameters for that specific visual treatment.

Page Architecture: Macrostructures

Hallmark AI constructs pages using 21 named macrostructures stored in references/macrostructures/. Each markdown file describes a complete page shape, including hero placement, section order, and copy style conventions.

An example definition resides in references/macrostructures/03-marquee-hero.md, which specifies the structural blueprint for pages utilizing a marquee-style hero component. These files act as the architectural templates the design and redesign verbs invoke when assembling output.

Quality Gates and Component Patterns

The repository enforces "anti-AI-slop" discipline through references/slop-test.md, which contains 58 quality gates that audit output for generic AI artefacts. These rules ensure generated pages maintain high design standards and avoid common AI-generated layout clichés.

Reusable UI primitives are catalogued in references/component-cookbook.md. This file describes archetypes for navigation bars, footer patterns, and hero enrichments that the skill can deploy across different macrostructures.

Demo Site and Generated Examples

The static site powering usehallmark.com is generated from files in site/. The root site/index.html loads the theme system, custom fonts, and JavaScript that drive Hallmark's interactive UI.

Concrete examples of Hallmark's output are stored under site/_tests/. Each subdirectory—such as wayfare/, hum-07/, or custom-02/—represents a complete HTML and CSS build produced by the skill. For instance, site/_tests/wayfare/index.html demonstrates a fully realized page generated by the pipeline.

Summary

• The Hallmark AI source code is entirely contained within the Nutlope/hallmark repository on GitHub.
• skills/hallmark/SKILL.md serves as the central manifest defining CLI verbs and safety rails.
• site/css/tokens.css provides the CSS custom properties that standardize every generated page's visual language.
• Macrostructures (21 variants) and themes (20 variants) live under references/ and act as the design system's building blocks.
• The slop-test gate set (references/slop-test.md) enforces 58 quality checks to prevent generic AI output.

Frequently Asked Questions

Is Hallmark AI open source?

Yes. The complete source code for Hallmark AI is publicly available under the Nutlope/hallmark repository. All skill definitions, design tokens, macrostructure templates, and example outputs are committed to the repository and accessible via standard GitHub URLs.

What is SKILL.md in the Hallmark AI repository?

SKILL.md is the core skill manifest located at skills/hallmark/SKILL.md. It defines the four primary verbs (design, audit, redesign, study), safety constraints, and the step-by-step pipeline that Hallmark AI executes when generating or analyzing web pages.

How do I install Hallmark AI from the source code?

You install Hallmark AI as a skill for AI coding assistants using the command npx skills add nutlope/hallmark. This references the source code in the repository and makes the CLI verbs available in Claude Code, Cursor, or Codex environments.

Where are the design tokens defined in Hallmark AI?

Design tokens are centralized in site/css/tokens.css. This file uses CSS custom properties to define OKLCH colour tokens, font families, and spacing scales. Generated pages reference these variables (e.g., var(--color-accent)) to ensure visual consistency across all outputs.

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