Hallmark's Four Core Verbs: default, audit, redesign, and study Explained

Hallmark's four core verbs are default (generate new UI from scratch), audit (report anti-patterns without modifying code), redesign (restructure existing pages preserving structure), and study (extract design DNA from screenshots or URLs).

Hallmark is a design skill that guides AI assistants to produce UI code that looks handcrafted rather than templated. Its behavior is driven by these four verbs, each with distinct purposes, input handling, and workflows defined in the Nutlope/hallmark repository.


Overview of the Four Core Verbs

Verb Purpose Invocation Key File
default Generate brand-new pages with genre, macrostructure, theme, and enrichment Implicit when designing without verb SKILL.md
audit Extract design elements and return ranked anti-pattern punch list hallmark audit <target> references/verbs/audit.md
redesign Re-structure visual layers while preserving routes and information architecture hallmark redesign <target> [--mood <name>] references/verbs/redesign.md
study Extract design DNA from screenshots or live URLs hallmark study <screenshot|URL> references/verbs/study.md

default: The "Design" Verb for New Pages

The default verb is Hallmark's implicit mode when users ask to design or build something without specifying a verb. In [skills/hallmark/SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), this flow is documented as "Design flow (default)" and follows a strict seven-step protocol.

Core execution steps:

  1. Pre-flight scan — Detect existing fonts, palette, motion libraries, and framework
  2. Genre detection — Select from editorial, modern-minimal, atmospheric, or playful
  3. Macrostructure pick — Choose from named macrostructures in macrostructures.md (e.g., Marquee Hero, Bento Grid)
  4. Theme route — Default to the catalog of 20 named themes (e.g., Bloom, Coral); custom themes only on explicit brief
  5. Enrichment decision — Typically typographic-only; richer hero enrichment requires explicit call
  6. Preview block — Markdown summary of macrostructure, theme, enrichment, sections, motion, slop-test status, and diversification
  7. Slop-test — Run 58 gate checks; failures are fixed before code emission

The default verb never deletes files and respects existing design.md or site/css/tokens.css as authoritative sources.


# Implicit default invocation

hallmark design "Create a landing page for a SaaS analytics tool"

Typical preview output:

**Hallmark · v1.1.0**

- Macrostructure · Stat-Led
- Theme · Paper: light, Accent: cool-blue
- Enrichment · none (typography only)
- Sections · Hero · Stats · Features · CTA · Footer
- Motion · fade-up · scale-pulse
- Diversification · differs from previous on accent hue

audit: The "Lint" Verb for Quality Control

The audit verb, implemented in [references/verbs/audit.md](https://github.com/Nutlop/hallmark/blob/main/skills/hallmark/references/verbs/audit.md), reads target files without modification and produces a ranked punch-list of anti-patterns.

Input: One or more file paths (pages, components, CSS)

Output structure:

  • Tell — Named anti-pattern (e.g., Eyebrow-left header-right)
  • Where — File path and line range
  • Severitycritical, major, or minor
  • Fix — One-line concrete correction

The audit verb performs stamp-vs-page consistency checks — a file stamped with macrostructure: Bento Grid must actually follow that shape — and respects genre-specific overrides.


# Audit a single page

hallmark audit ./app/page.tsx

# Audit multiple components

hallmark audit ./components/

Example audit output:


## Critical (2)

- Eyebrow-left header-right on ./app/page.tsx L42-L45
- Default three-equal-card grid on ./components/Features.tsx L12-L20

## Major (1)

- Italic header on ./components/Header.tsx L3

## Minor (0)

redesign: The "Refactor" Verb for Existing Pages

The redesign verb, defined in [references/verbs/redesign.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/redesign.md`), re-structures visual and interaction layers while preserving core structure. It operates in two modes based on scope detection.

Non-destructive rule: Never deletes routes or component directories without explicit user authorization.

Single-Page Redesign

Replaces the visual fingerprint (macrostructure, component voice, reveal pattern, visual rhythm) while preserving:

  • Copy intent, product names, primary action
  • Information architecture (section order)
  • Brand colours and fonts from existing project tokens

Multi-Page Redesign

Creates or updates a system-wide design.md that becomes the canonical design guide; subsequent pages share theme, accent, and typographic pairings, differing only in macrostructure within their families.


# Redesign single page with mood override

hallmark redesign ./app/about/page.tsx --mood luxurious

# Redesign entire application

hallmark redesign ./app

The redesign verb integrates with audit results — pages that drift from their own stamp are flagged as critical findings before restructuring begins.


study: The "DNA Extraction" Verb

The study verb, documented in [references/verbs/study.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md)`, extracts design DNA from external sources through two input modes.

Input Modes

Mode Source Font Accuracy Rhythm Data
Image mode Screenshot file Approximate (no exact names) Available
URL mode Live https:// URL Exact faces from loaded CSS Unknown (HTML limitation)

Five-Step Protocol

  1. Surface — Paper lightness, hue, accent footprint, distinctive treatments
  2. Type — Roles (display, body, label) and exact faces (URL mode only)
  3. Structure — Named macrostructure match + archetype selection for hero, nav, footer
  4. Motion — Motion libraries, reveal patterns, anti-patterns discovered
  5. Rhythm — Density, asymmetry, spacing (screenshot only)

Diagnosis report presents three user options:

  1. Build — Hand off extracted DNA to default verb
  2. Lock — Write portable design.md for reuse
  3. Stop — End after diagnosis review

# Study from screenshot

hallmark study ./screenshots/competitor.png

# Study live URL

hallmark study https://example.com/product

Example URL mode diagnosis:

I read https://example.com/product.

The page is a **Marquee Hero**. The hero is an **H1-Marquee** with ratio=7/5.
Nav is **N5 Floating-pill**; footer is **Ft5 Statement**.

The page loads **Inter** for display and **Geist** for body. Roles: display = neutral grotesque, body = neutral grotesque.

The paper is `oklch(96% 0.01 90)` – a light warm band. The accent is `#c0392b` – warm-red, small ≤ 5 % footprint.

Motion: the page uses **framer-motion**; reveal pattern is **fade-up**.

Rhythm — density and asymmetry — I can't judge from the HTML alone. If those matter, send a screenshot as well.

Want me to build with this DNA, or change one axis first?

Safety guardrails: study refuses paid-template marketplaces and validates that URLs are public web pages (no IP literals, no private hosts, no disallowed schemes).


How the Verbs Share Reference Architecture

All four core verbs draw from a common reference layer in skills/hallmark/references/:

File Purpose Verb Usage
macrostructures.md 21 named layout templates (Marquee Hero, Bento Grid, Stat-Led) default, redesign, study
component-cookbook.md Navigation, footer, hero archetypes (N5 Floating-pill, Ft5 Statement) All verbs
tokens.css Central color, font, spacing tokens default reads; redesign writes; study extracts
Genre/theme catalogs 20 named themes (Bloom, Coral) and 4 genres default, redesign

Summary

  • default generates new UI through seven disciplined steps with 58-point slop testing, implicitly invoked for design requests
  • audit reports anti-patterns by severity without code modification, enforcing stamp-vs-page consistency
  • redesign restructures existing pages non-destructively, preserving information architecture while updating visual fingerprint
  • study extracts design DNA from screenshots or URLs via five-step protocol, outputting portable diagnoses with three action paths

Understanding Hallmark's four core verbs provides complete visibility into how the skill decides what to build, validates quality against anti-patterns, preserves or reshapes existing assets, and learns from external design sources.


Frequently Asked Questions

What is the difference between default and redesign in Hallmark?

The default verb creates new pages from scratch using genre detection and theme selection, while redesign restructures existing pages keeping routes, copy intent, and information architecture intact. According to SKILL.md, default never deletes files; redesign.md specifies that deletions require explicit user authorization.

Can audit fix the anti-patterns it discovers?

No — the audit verb is read-only. As implemented in references/verbs/audit.md, it returns a ranked punch-list with severity classifications and one-line fixes, but never modifies source files. Users must apply fixes manually or invoke redesign for automated restructuring.

How does study handle font detection differently between image and URL modes?

In image mode, study approximates type roles without exact font names. In URL mode, it extracts precise font faces from loaded CSS (Inter, Geist) as documented in references/verbs/study.md. However, rhythm analysis (density, asymmetry) is only reliable from screenshots; URL mode marks this as unknown.

Which verb should I use to apply a competitor's design style to my project?

Use study to extract the competitor's DNA, then choose build to hand off to default or lock to create a reusable design.md. The study verb's five-step protocol captures macrostructure, archetypes, type roles, colour anchor, and motion — sufficient to replicate the visual fingerprint while adapting to your content.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →