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

> Integrate Hallmark AI output into your project by installing the skill and running audit, redesign, or study verbs. Consume generated HTML/CSS or design metadata easily.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-25

---

**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`](https://github.com/Nutlope/hallmark/blob/main/README.md) and the [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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:

```bash

# 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:

```bash
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:

```bash
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:

```bash
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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md), you can optionally specify a mood:

```bash

# 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`](https://github.com/Nutlope/hallmark/blob/main/design.md) file for reuse across projects:

```bash
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`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/log.json) file that records the macrostructure, theme, and enrichment used in each run. As documented in [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md), this log persists between sessions and enables diversification across pages:

```json
{
  "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`](https://github.com/Nutlope/hallmark/blob/main/design.md) file emitted by the `study` verb. According to [`skills/hallmark/references/verbs/redesign.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md), subsequent runs can reference this file to lock the design system and prevent drift:

```bash

# 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/log.json) file to ensure diversification across multi-page projects.
- **Lock systems** by generating and referencing [`design.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) remains identical across platforms.

### Can I reuse design patterns across multiple pages?

Yes. The [`.hallmark/log.json`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) logic.