How to Use Hallmark AI's Output in Your Project: Integration Guide

You can use Hallmark AI's output by installing the skill into your developer assistant, running one of three verbs (audit, redesign, or study), and consuming the generated HTML/CSS or design metadata files.

Hallmark AI is an open-source skill for Claude Code, Cursor, and Codex that generates design assets without relying on generic AI templates. According to the Nutlope/hallmark repository, the skill produces self-contained output that you can integrate into existing projects or use to bootstrap new design systems.

Installing the Hallmark AI Skill

Before you can generate and use Hallmark AI's output, you must install the skill package and copy the rule-set to your assistant's skill directory. The installation instructions are defined in the repository's README.md and the SKILL.md file.

Installation for Claude Code

Run the npx command to pull the skill package, then copy the rule-set and reference library to the appropriate location:

# Install the skill

npx skills add nutlope/hallmark

# Copy to Claude Code skill directory

cp -r ~/.claude/skills/hallmark/ ~/.claude/skills/hallmark/

Installation for Cursor

For Cursor, copy the core rule-set and references into the project's rules directory:

cp skills/hallmark/SKILL.md .cursor/rules/hallmark.mdc
cp -r skills/hallmark/references/ .cursor/rules/

Installation for Codex

For project-scoped Codex usage, copy the entire skill directory to the Codex skills location:

cp -r skills/hallmark/ ~/.codex/skills/hallmark/

Running Hallmark AI Verbs to Generate Output

Once installed, the hallmark CLI exposes three primary verbs documented in the skills/hallmark/references/verbs/ folder. Each verb produces different output formats suitable for various project needs.

The audit Verb

The audit verb scores existing code against AI-generated anti-patterns. Use this to evaluate your current implementation before redesigning:

hallmark audit ./src/pages/home.html

The redesign Verb

The redesign verb rebuilds the UI while preserving content, routes, and information architecture. As implemented in skills/hallmark/references/verbs/redesign.md, you can optionally specify a mood:

# Redesign with default styling

hallmark redesign ./src/pages/about.html

# Redesign with a specific mood

hallmark redesign ./src/pages/about.html --mood luxury

The study Verb

The study verb extracts design DNA (macrostructure, type-pairing, colour anchors) from a reference screenshot or URL. It optionally emits a portable design.md file for reuse across projects:

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

Consuming and Integrating Hallmark AI's Output

Hallmark AI's output is designed for immediate integration into production workflows. The default output is a self-contained HTML + CSS page, but the skill also generates metadata files for design system management.

Working with Generated HTML and CSS

Each generated page includes its macrostructure stamped in a CSS comment. This enables downstream tools to detect and reuse the design fingerprint without parsing the entire document. The HTML is production-ready and requires no additional build steps.

Tracking Design Systems with log.json

For multi-page projects, Hallmark writes a .hallmark/log.json file that records the macrostructure, theme, and enrichment used in each run. As documented in skills/hallmark/references/custom-theme.md, this log persists between sessions and enables diversification across pages:

{
  "runs": [
    {
      "timestamp": "2024-01-15T10:30:00Z",
      "macrostructure": "hero-split-feature-grid",
      "theme": "modern-minimal",
      "enrichment": "micro-interactions"
    }
  ]
}

Locking Designs with design.md

When you need to enforce a consistent design system across multiple pages or projects, use the design.md file emitted by the study verb. According to skills/hallmark/references/verbs/redesign.md, subsequent runs can reference this file to lock the design system and prevent drift:

# Study a reference to create a portable descriptor

hallmark study https://example.com/reference > design.md

# Use the descriptor in subsequent redesigns

hallmark redesign ./src/pages/contact.html --design-system design.md

Summary

• Install once using npx skills add nutlope/hallmark and copy the SKILL.md rule-set to your assistant's directory.
• Generate output using three verbs: audit (evaluate), redesign (rebuild), and study (extract).
• Consume HTML/CSS directly or parse the macrostructure comments for downstream tooling.
• Track history via the auto-generated .hallmark/log.json file to ensure diversification across multi-page projects.
• Lock systems by generating and referencing design.md files for consistent theming.

Frequently Asked Questions

What format does Hallmark AI's output use?

Hallmark AI generates self-contained HTML + CSS pages by default. The CSS includes stamped comments indicating the macrostructure, enabling tools to detect design patterns programmatically. The study verb can alternatively output Markdown-based design descriptors.

How do I install Hallmark AI for multiple assistants?

You can install the skill simultaneously for Claude Code, Cursor, and Codex by copying the skills/hallmark/ directory to each assistant's respective skill location. The core rule-set in SKILL.md remains identical across platforms.

Can I reuse design patterns across multiple pages?

Yes. The .hallmark/log.json file tracks every run's macrostructure and theme, allowing subsequent generations to diversify or repeat patterns as needed. For strict consistency, generate a design.md file using the study verb and reference it in future redesign commands.

Where does Hallmark AI store its design history?

The skill writes to .hallmark/log.json in your project root after each run. This file records the macrostructure, theme, and enrichment parameters used, as implemented in the skills/hallmark/references/custom-theme.md logic.

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