# What Is the Design Skill in Hallmark AI?

> Explore the Hallmark AI design skill, orchestrating UI generation and code auditing. Discover its anti-slop disciplines and 58-gate quality validation test for robust software development.

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

---

**The design skill in Hallmark AI is the core rule-based module defined in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) that orchestrates UI generation, code auditing, and design DNA extraction while enforcing six strict anti-slop disciplines and a 58-gate quality validation test.**

The design skill serves as the architectural brain of the Hallmark repository (Nutlope/hallmark), transforming generic AI coding assistance into a disciplined design system. Unlike standard code generation tools, this skill imposes structural variety, token-locked styling, and mandatory quality gates before any output reaches the user.

## Core Responsibilities of the Design Skill

The design skill operates as both a rule-set and an orchestration engine. According to the skill manifest in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), it drives every Hallmark verb while maintaining consistent design discipline across four distinct operational modes.

### Rule Enforcement and Quality Gates

At its foundation, the skill mandates six core disciplines that apply to every verb execution:

- **Pre-emit self-critique** – The AI must review its own output before finalization
- **Honest copy** – Generated text must avoid marketing fluff and generic AI-speak
- **Locked tokens** – All styling must reference the canonical [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) file
- **No chrome** – Elimination of decorative UI elements that serve no functional purpose
- **Mobile responsiveness** – Mandatory adaptive layouts for all generated pages
- **Typography purity** – Strict adherence to type-pairing rules without arbitrary font mixing

These rules culminate in the **58-gate slop-test** defined in [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md), which validates every generated page before emission (§ 7 in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), lines 80‑84).

### Design System Portability

The skill provides a **portable [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) system** that captures macrostructure, theme, token, and typography data. Users can generate this file via the `study` verb and reuse it across subsequent Hallmark runs or other AI tools, ensuring design consistency across projects (§ 33‑34 in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), lines 31‑34).

## The Four Verbs of the Design Skill

The design skill exposes four primary commands that map directly to its capabilities. Each verb maintains the same underlying discipline while serving distinct use cases.

### `default`: Full UI Generation

The default verb executes the complete design pipeline: pre-flight scanning, genre detection, macrostructure selection, theme application, and slop-testing. When invoked without arguments, it generates a self-contained HTML and CSS page stamped with design metadata.

```bash
hallmark

```

### `audit`: Static Code Analysis

The `audit` verb reads existing project files and scores them against the anti-pattern list without modifying the source. This allows teams to evaluate current codebases against Hallmark's quality standards.

```bash
hallmark audit ./src/pages/hero.html

```

*Reference:* verb table in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) – `hallmark audit <target>` (lines 26‑27)

### `redesign`: Visual Overhaul with Content Preservation

The `redesign` verb rebuilds visual structure, navigation, and footer components while preserving the original copy, information architecture, and brand identity. It accepts mood parameters to guide the new aesthetic direction.

```bash
hallmark redesign ./src/pages/hero.html --mood luxury

```

### `study`: DNA Extraction and Locking

The `study` verb fetches live web pages via WebFetch, extracts macrostructure, type-pairing, and color anchors, and returns a design diagnosis. Users can then request a locked [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file for portable reuse.

```bash
hallmark study https://example.com

# Follow-up: "give me a design.md"

```

## The Design Pipeline Architecture

The design skill follows a rigid multi-stage pipeline defined in § 0, § 2, and § 6‑7 of [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md):

1. **Pre-flight Scan** – Reads existing project files ([`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md), [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json), token files) to preserve the current stack (lines 45‑59)
2. **Genre & Theme Selection** – Chooses from four genres (editorial, modern-minimal, atmospheric, playful) and selects from 20 catalog themes, forcing diversification on at least one axis (paper band, display style, accent hue) (lines 30‑44)
3. **Macrostructure Pick** – Loads the slim index from [`references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/references/macrostructures.md) and reads the selected macro's detailed file to ensure unique page shapes (lines 64‑71)
4. **Generation with Discipline** – Applies the six core disciplines during code creation (lines 46‑57)
5. **Slop-Test Gate** – Runs the 58-gate validation from [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md) and revises failures before emission
6. **Final Stamp** – Emits the self-contained page with embedded design metadata

## Installation and Basic Usage

To activate the design skill in your environment:

```bash
npx skills add nutlope/hallmark

```

This installs the `hallmark` skill into Claude Code, Cursor, or Codex environments, making the four verbs available for design operations.

## Key Source Files

The design skill relies on several critical files within the repository:

- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – The skill manifest declaring version, verbs, and the six discipline rules (lines 21‑28)
- **[`references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/references/macrostructures.md)** – Slim index of 21 named macrostructures
- **[`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md)** – The 58-gate anti-slop validation checklist
- **`references/themes/*.md`** – Definitions of 20 catalog themes specifying paper band, display style, and accent hue
- **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)** – Canonical token definitions for color, font, and spacing that all generated CSS must reference
- **[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)** (generated) – Portable design system output from `study` or `redesign` verbs

## Summary

- The **design skill in Hallmark AI** is a rule-based module defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) that governs all UI generation and auditing.
- It enforces **six anti-slop disciplines** including locked tokens, typography purity, and mandatory pre-emit critique.
- Four verbs—**`default`**, **`audit`**, **`redesign`**, and **`study`**—provide distinct workflows while maintaining consistent quality standards.
- Every output must pass a **58-gate slop-test** before emission, ensuring structural variety and eliminating generic AI artifacts.
- The skill generates portable **[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)** files that capture design DNA for reuse across projects.

## Frequently Asked Questions

### How does the design skill prevent generic AI-generated designs?

The skill mandates a **58-gate slop-test** defined in [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md) that checks for common AI anti-patterns before any code is emitted. Additionally, the **theme-diversification rule** forces each generation to differ on at least one axis—such as paper band, display style, or accent hue—ensuring structural variety rather than repetitive layouts.

### What is the difference between the `audit` and `redesign` verbs?

The **`audit`** verb performs static analysis only, reading target files and scoring them against anti-patterns without modifying source code. The **`redesign`** verb actively rebuilds the visual structure while preserving original content, applying new macrostructures and themes to create a fresh aesthetic while maintaining the existing information architecture.

### Can I reuse a design configuration across multiple Hallmark projects?

Yes. The **`study`** verb extracts design DNA from existing sites or previous work and generates a portable **[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)** file. This file stores macrostructure, theme, token, and typography data that subsequent Hallmark runs can read during the pre-flight scan, ensuring consistent design systems across multiple pages or projects.

### Where are the design rules and quality gates defined?

The core disciplines and verb mappings reside in **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)**, while specific validation criteria live in the `references/` directory. The **58-gate slop-test** is defined in [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md), macrostructures are indexed in [`references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/references/macrostructures.md), and the 20 catalog themes are stored in `references/themes/*.md`.