Where to Find Hallmark Documentation: Complete Guide to the Design System

Hallmark documentation lives entirely inside the Nutlope/hallmark GitHub repository, with the README as the central entry point and the skills/hallmark/references/ folder containing the detailed design specifications.

Hallmark is an AI-powered design skill that generates production-ready HTML and CSS through structured design rules. If you're searching for the complete hallmark documentation, you won't need to browse external wikis or websites—the entire knowledge base is self-contained within the repository's filesystem, accessible directly through GitHub or your local clone.

Entry Point: The Top-Level README

Start with the README.md at the repository root. This file serves as the central map, providing an overview of the skill, a link to the live demo at https://www.usehallmark.com, and installation instructions.

The README also directs you toward deeper reference material and the _tests/ folder, which contains self-contained HTML and CSS artifacts for each design brief.

The Skill Manifest: SKILL.md

The core behavioral contract is defined in skills/hallmark/SKILL.md. This file describes the four verbs that Hallmark recognizes:

• audit – Analyze an existing codebase for design issues
• redesign – Rebuild a page while preserving copy and information architecture
• study – Extract the "DNA" from a live URL
• default (build) – Generate a new page from a brief

SKILL.md also documents the full design flow that Hallmark follows for every output.

Design System References Folder

All design rules, theme definitions, macro-structures, genre behaviors, and quality gates are organized under skills/hallmark/references/.

Macro-structures

The references/macrostructures.md file provides a concise index of the 21 named macro-structures available in the system. For detailed specifications of individual patterns, see the files located at references/macrostructures/<num-name>.md.

Themes

Hallmark includes 20 named themes (such as Brutal, Terminal, and Bloom). The catalogue is indexed at references/themes.md, while theme-specific implementation rules reside in references/themes/<theme>.md.

Genres

The tonal palette is controlled through four genre files located in references/genres/:

• editorial.md
• modern-minimal.md
• atmospheric.md
• playful.md

Slop-Test Gates

Quality assurance is documented in references/slop-test.md, which lists all 58 slop-test gates that Hallmark runs after generating a page to validate output quality.

Practical Examples and Recipes

For human-readable implementation examples, see docs/recipes.md. This file contains eight worked briefs that demonstrate how Hallmark interprets prompts, selects macro-structures and themes, applies enrichments, and what the final generated output looks like.

Generated examples are also stored in the _tests/ directory as self-contained HTML and CSS artifacts.

Installation and Usage Commands

Install the skill using npm (requires version 9 or higher):

npx skills add nutlope/hallmark

Generate a new page with the default verb:

hallmark "Build a landing page for CoffeeBox – a small-batch coffee subscription."

Audit an existing site:

hallmark audit ./src

Redesign a page while preserving existing copy:

hallmark redesign ./src/pages/about.tsx

Study a live URL and extract its design DNA:

hallmark study https://example.com

Lock the extracted DNA into a portable design file:

hallmark study https://example.com --output design.md

All commands respect the internal flow defined in SKILL.md, and outputs include a stamp comment recording the chosen macro-structure, theme, genre, and enrichment (e.g., /* Hallmark · macrostructure: Marquee Hero · theme: Bloom … */).

Summary

• Primary entry point: README.md at the repository root
• Core behavior: skills/hallmark/SKILL.md defines verbs and design flow
• Design system specs: skills/hallmark/references/ contains macro-structures, themes, genres, and slop-test gates
• Worked examples: docs/recipes.md and _tests/ folder provide practical references
• Live demo: Browse generated examples at https://www.usehallmark.com

Frequently Asked Questions

Is Hallmark documentation hosted on a separate website?

No. According to the Nutlope/hallmark source code, all documentation is self-contained within the repository. The README serves as the entry point, while the skills/hallmark/references/ directory houses the complete design system specifications.

What is SKILL.md in Hallmark?

SKILL.md is the skill manifest located at skills/hallmark/SKILL.md. It defines the four verbs (audit, redesign, study, and the default build behavior), describes the full design flow, and serves as the contract that governs how Hallmark processes requests and generates output.

How do I install the Hallmark skill?

You can install Hallmark using the Skills CLI with npm 9 or higher by running npx skills add nutlope/hallmark. This makes the hallmark command available in your terminal for generating, auditing, or studying web pages according to the documented design system.

Where can I see examples of Hallmark-generated code?

Working examples are available in two locations within the repository: docs/recipes.md contains eight detailed briefs showing prompt interpretation and output selection, while the _tests/ folder contains self-contained HTML and CSS artifacts for each generated brief. You can also browse the live demo at https://www.usehallmark.com.

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