How Hallmark Redesign Preserves Information Architecture While Rebuilding Visual Structure

The Hallmark redesign verb reimagines a page's visual and interaction layers while leaving all underlying information architecture untouched, ensuring your content hierarchy, navigation paths, and semantic copy remain identical after transformation.

This guide breaks down exactly how the redesign command works, its non-destructive implementation rules, and the specific files that govern its behavior in the Nutlope/hallmark repository.

What the Redesign Verb Does

The hallmark redesign command is defined in skills/hallmark/references/verbs/redesign.md as a verb that "throws out the structure, keeps copy + IA + brand, and rebuilds with a different fingerprint." When invoked, Hallmark analyzes target files and replaces only the macro-structure fingerprint — layout patterns, component rhythm, and visual voice — while protecting original copy, route definitions, and component ownership.

According to the source specification, the verb follows a strict non-destructive implementation rule: it defaults to in-place edits or additive components and only prompts for user authorization when deletions would significantly alter the page structure.

How IA Preservation Works

Single-Page Flow

In the basic single-page flow, the redesign preserves copy and IA while swapping the visual structure entirely. The command processes one file at a time, maintaining all semantic relationships and navigation elements.

# Basic single-page redesign – keeps IA and copy intact

hallmark redesign ./src/pages/hero.tsx

The output demonstrates this preservation clearly: <header> and <footer> elements retain identical routes and IDs, while interior layouts are completely rebuilt with new CSS classes and component arrangements.

Multi-Page Flow

For larger projects, the multi-page flag creates a design.md file that locks in a system-wide design system:

# Multi-page redesign – creates a project-wide design system first

hallmark redesign ./src/pages/ --multi-page

This generates design.md at the project root, which all pages reference. The existing routes and IA remain respected across every page in the scope.

Non-Destructive Implementation Rule

The redesign verb enforces specific guardrails to prevent accidental information loss:

• Additive by default — New components and styles are added rather than replacing existing structures
• Prompt on deletion — User authorization required when removing multiple components or collapsing pages
• Copy protection — Original text content is never modified without explicit flagging
• Route immutability — Navigation paths and page hierarchies remain unchanged

These rules are codified in skills/hallmark/SKILL.md, which documents that the verb "preserves the underlying information architecture (IA) untouched" while allowing complete visual transformation.

Source Files Controlling Redesign Behavior

File	Purpose
skills/hallmark/references/verbs/redesign.md	Complete verb specification including IA preservation guarantees
skills/hallmark/SKILL.md	Command-line usage patterns and non-destructive behavior overview
site/_tests/verbs/redesign/notes.md	Concrete test cases demonstrating copy + IA preservation with structure rebuilds

The test file at site/_tests/verbs/redesign/notes.md provides observable evidence of the verb's guarantees, showing before-and-after states where semantic HTML structure and content relationships survive complete visual overhauls.

Practical Example: Preserved Elements vs. Rebuilt Structure

When Hallmark redesign processes a file, it categorizes every element:

Preserved (IA layer):

• Text content and copy
• id attributes and semantic landmarks
• Route definitions and link targets
• Component ownership boundaries

Rebuilt (visual layer):

• CSS classes and style definitions
• Layout containers and grid structures
• Animation and interaction patterns
• Spacing, typography scale, and color application

This separation is what enables the hallmark redesign verb to function as a pure presentation-layer transformation without risking content or navigation integrity.

Advanced: Design System Lock-In

The --multi-page flag triggers a more sophisticated workflow. Hallmark first generates design.md containing:

• Design tokens (colors, typography, spacing)
• Component patterns and variants
• Layout principles and responsive behaviors

Subsequent files reference this single source of truth, ensuring visual consistency across the entire project while each page maintains its unique IA. The design.md file becomes the contract between preserved information architecture and rebuilt visual structure.

Summary

• The Hallmark redesign verb transforms visual and interaction layers without touching information architecture
• Non-destructive defaults protect copy, routes, and semantic structure through additive-only operations
• Single-page flow preserves IA while rebuilding one file's visual fingerprint
• Multi-page flow generates design.md for system-wide design consistency with per-page IA preservation
• Source specifications in skills/hallmark/references/verbs/redesign.md and skills/hallmark/SKILL.md codify these guarantees
• Always test with site/_tests/verbs/redesign/notes.md patterns to verify expected behavior

Frequently Asked Questions

What happens to my existing CSS when running hallmark redesign?

Your existing CSS classes are replaced entirely. The redesign verb generates new style definitions that match the target visual fingerprint, but it preserves the semantic HTML structure those styles attach to. Original class names are not retained — the new visual structure brings its own complete styling system.

Can redesign accidentally delete my page content?

No. The verb operates under a non-destructive implementation rule that defaults to additive changes. Hallmark only prompts for destructive operations when multiple components would be removed or the app structure would collapse into a single page. Original copy is protected unless you explicitly authorize specific deletions.

How does multi-page redesign differ from running single-page on multiple files?

Multi-page redesign creates a unified design.md file that establishes project-wide design tokens and patterns before processing individual pages. This ensures visual consistency across your entire application. Running single-page commands separately would allow each file to develop independent visual fingerprints, potentially creating design fragmentation.

Where is the redesign verb behavior documented in the Hallmark source?

The authoritative specification lives in skills/hallmark/references/verbs/redesign.md, with command-line usage patterns in skills/hallmark/SKILL.md. Concrete test cases demonstrating IA preservation appear in site/_tests/verbs/redesign/notes.md.

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