What Is the Design Skill in Hallmark AI?

The design skill in Hallmark AI is the core rule-based module defined in 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, 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 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, which validates every generated page before emission (§ 7 in SKILL.md, lines 80‑84).

Design System Portability

The skill provides a portable 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, 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.

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.

hallmark audit ./src/pages/hero.html

Reference: verb table in 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.

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 file for portable reuse.

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:

1. Pre-flight Scan – Reads existing project files (design.md, 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 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 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:

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 – The skill manifest declaring version, verbs, and the six discipline rules (lines 21‑28)
• references/macrostructures.md – Slim index of 21 named macrostructures
• 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 – Canonical token definitions for color, font, and spacing that all generated CSS must reference
• 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 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 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 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 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, while specific validation criteria live in the references/ directory. The 58-gate slop-test is defined in references/slop-test.md, macrostructures are indexed in references/macrostructures.md, and the 20 catalog themes are stored in references/themes/*.md.

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