How to Use the Hallmark Redesign Command to Rebuild Existing Pages

The hallmark redesign command replaces the visual and interaction layer of pages while preserving existing copy, information architecture, and brand values, operating in either single-page or multi-page flows.

The hallmark redesign command in the Nutlope/hallmark repository provides a structured approach to regenerating UI components without rewriting content. This tool analyzes your source files and applies new macro-structures from structure.md while maintaining your original messaging and brand identity.

How the Hallmark Redesign Command Works

The command operates through two distinct execution paths defined in skills/hallmark/references/verbs/redesign.md.

Single-page redesign triggers when targeting an individual file. Hallmark reads the page, selects a different macro-structure from structure.md, applies new component voice and reveal patterns, and returns updated source code while preserving copy, information architecture, route trees, and brand values.

Multi-page redesign activates when targeting directories or glob patterns. This flow first creates a project-wide design.md file that serves as the single source of truth, then regenerates each page according to that locked design system to ensure consistency across the entire application.

Single-Page Redesign Process

According to lines 32-58 of skills/hallmark/references/verbs/redesign.md, the single-page flow follows these core steps:

1. Detect scope – Hallmark analyzes the target path to determine whether to execute single-page or multi-page mode.
2. Preserve – The verb explicitly retains copy intent, information architecture, brand colors/fonts, and primary CTAs.
3. Replace – It swaps the structural fingerprint using alternative macro-structures from structure.md, updates component voice, reveal patterns, and visual rhythm.
4. Apply mood (optional) – The --mood <name> parameter maps to entries in typography.md and structure.md to drive the redesign toward specific tones like luxury.
5. Confirmation – Hallmark pauses for explicit confirmation if the redesign requires deleting multiple components or collapsing the route tree.

Multi-Page Redesign Process

For site-wide changes, lines 31-70 of the redesign reference specify this workflow:

1. Project scan – Hallmark lists every page-level file, collects existing design assets, and checks previous entries in .hallmark/log.json.
2. Create design.md – Generates a locked design system at the project root recording genre, macro-structure families, theme tokens, typography, spacing, motion, and micro-interactions.
3. Redesign each page – Every page reads design.md first, then regenerates code with a stamp comment like /* Hallmark · genre: modern‑minimal · macrostructure: marquee‑hero · design-system: design.md */.
4. Enforce inverted diversification – Pages must share theme, color palette, and typography, with only macro-structures varying as allowed by the design system.

Practical Code Examples

Redesign a Single Component

# Rebuild the visual structure of ./hero.tsx

hallmark redesign ./hero.tsx

This returns a new hero.tsx where the macro-structure (for example, "centered-hero") swaps for a different fingerprint (for example, "marquee-hero") while the headline text remains identical.

Apply a Specific Mood

# Target luxury tone from typography.md

hallmark redesign ./pricing.tsx --mood luxury

Hallmark maps luxury to a high-contrast color palette and refined typography entries, then builds a new structure accordingly.

Redesign an Entire Site

# Apply new design system to every page under ./app/

hallmark redesign ./app/ --multi-page

This process first creates design.md at the repo root, prompts you with the generated design before writing, then regenerates each page under ./app/ to match the new system. A single combined log entry writes to .hallmark/log.json with "scope": "app".

Update an Existing Design System

If a page needs a theme that design.md does not allow, amend the design file first:

# Edit the design system manually

code design.md   # add a new variant or adjust the theme

# Then run the redesign again

hallmark redesign ./new-landing.tsx

Hallmark respects the updated design.md and applies the new allowances.

Key Configuration Files

• skills/hallmark/references/verbs/redesign.md – Complete specification of scope detection, single versus multi-page flows, mood handling, and confirmation rules.
• skills/hallmark/references/structure.md – Catalog of macro-structures (fingerprints) that Hallmark selects from when redesigning.
• skills/hallmark/references/typography.md – Tone definitions used for the optional --mood argument.
• design.md (generated) – The locked design system for multi-page projects; defines genre, theme tokens, macro-structure families, and motion guidelines. Created automatically at the project root during multi-page redesign.
• site/_tests/verbs/redesign/ – Example outputs showing before/after diffs of redesign operations.

Summary

• The hallmark redesign command operates in single-page or multi-page modes depending on target scope detection.
• Single-page redesigns preserve copy and information architecture while replacing macro-structures from structure.md.
• Multi-page redesigns create a design.md design system first, then apply it consistently across all pages with inverted diversification rules.
• Use --mood to target specific tonal directions mapped in typography.md.
• The implementation in skills/hallmark/references/verbs/redesign.md enforces confirmation prompts for destructive changes that affect route trees or delete multiple components.

Frequently Asked Questions

What is the difference between single-page and multi-page redesign?

Single-page redesign targets individual files, swapping macro-structures while keeping existing copy and routes intact. Multi-page redesign processes entire directories by first creating a design.md file that locks the design system, ensuring visual consistency across all regenerated pages according to the rules in skills/hallmark/references/verbs/redesign.md.

How does the --mood parameter work?

The --mood flag maps user-specified tones like luxury to specific entries in skills/hallmark/references/typography.md and skills/hallmark/references/structure.md. This influences the visual rhythm, typography choices, and structural patterns selected during the redesign process.

Will Hallmark delete my existing content?

No. According to the source code in skills/hallmark/references/verbs/redesign.md, the redesign verb explicitly preserves copy intent, information architecture, brand colors, fonts, and primary CTAs. It only replaces the structural fingerprint, component voice, and visual presentation layers.

Where is the design system stored in multi-page mode?

When running multi-page redesign, Hallmark creates design.md at the project root. This file contains locked specifications for genre, theme tokens, typography, spacing, motion, and macro-structure families that all pages reference during regeneration, as documented in lines 31-70 of the redesign specification.

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