What Does the Hallmark Redesign Command Do with Existing Code?

The hallmark redesign command restructures the visual and interaction layers of your pages while strictly preserving existing content, information architecture, brand identity, and copy.

The hallmark redesign command in the Nutlope/hallmark repository provides a surgical approach to UI modernization. According to the skill specification in skills/hallmark/SKILL.md, it analyzes your current implementation to rebuild component hierarchies and layout rhythms without disturbing routes, component ownership, or textual content.

Core Principles: Visual Restructuring with Content Preservation

The redesign verb operates according to a strict contract defined in skills/hallmark/SKILL.md. When executed, the command:

• Analyzes target files to extract current copy and information architecture
• Builds a new macro-structure (fingerprint) containing updated component hierarchy, layout rhythm, heading placement, and interaction patterns
• Preserves all textual content unchanged; only the surrounding visual structure mutates
• Respects implementation boundaries including existing routes and component ownership

Content Preservation Guarantees

As documented in site/_tests/verbs/redesign/notes.md, the command deliberately leaves copy intent and information architecture intact. The test specifications explicitly define what the verb changes and what it deliberately leaves untouched, ensuring your messaging remains consistent even as the presentation layer transforms.

Single-Page vs. Multi-Page Redesign Modes

The command distinguishes between two operational modes based on scope and the presence of design system files.

Single-page redesign updates only the specified file. For example:

# Redesign the hero component while keeping its text intact

hallmark redesign ./src/pages/hero.tsx

This rewrites hero.tsx with a different layout—perhaps converting a centered hero to a split-diptych arrangement—while keeping all copy strings unchanged.

Multi-page redesign triggers when using the --multi-page flag or when a design.md file exists:

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

According to skills/hallmark/references/verbs/redesign.md, this mode creates a project-wide design.md file at the repository root. This file becomes the single source of truth for all subsequent pages, ensuring visual consistency across the entire application.

Design System Lock Files and Consistency

The command respects a project-wide design lock-file (design.md or DESIGN.md) when present. As specified in skills/hallmark/references/verbs/redesign.md, if this file exists, the redesign follows the locked system rather than creating a divergent style. This prevents visual fragmentation across your codebase and maintains strict adherence to established design tokens.

Safety Mechanisms and Confirmation Flows

The redesign verb includes protective measures against accidental destruction. As implemented in the verb's procedural specification, it never deletes production files automatically.

If a redesign would require removing multiple components or collapsing routes, the command pauses and prompts for explicit confirmation:

The redesign would remove multiple components and collapse routes.
Proceed? (yes/no)

Only after an explicit "yes" does it apply the changes.

Optional Mood Targeting

You can bias the visual tone using the --mood flag:

hallmark redesign ./src/pages/about.tsx --mood luxury

As defined in the skill's reference documentation, valid mood values (such as "luxury" or "playful") influence typography selections, color palette depth, and structural spacing defined in typography.md and structure.md.

Summary

• The hallmark redesign command preserves existing content, information architecture, and brand while rebuilding visual and interaction layers.
• Single-page mode updates individual files; multi-page mode creates a project-wide design.md design system.
• The command respects existing design.md lock-files to maintain visual consistency across the codebase.
• Destructive changes require confirmation; the command never automatically deletes production files.
• The --mood flag allows biasing the visual tone toward specific aesthetics like "luxury" or "playful".

Frequently Asked Questions

Does hallmark redesign delete my existing components?

No. According to the procedural specification in skills/hallmark/references/verbs/redesign.md, the command never deletes production files automatically. If the redesign would require removing multiple components or collapsing routes, it stops and asks for explicit user confirmation before proceeding.

What happens to my text content during a redesign?

Your textual content remains completely untouched. As documented in skills/hallmark/SKILL.md and verified in site/_tests/verbs/redesign/notes.md, the command specifically preserves copy intent and information architecture, replacing only the surrounding visual structure and interaction patterns.

When should I use the --multi-page flag?

Use --multi-page when you want to establish a consistent design system across your entire application. This flag creates a design.md file at the project root that serves as the single source of truth for all subsequent redesign operations, ensuring visual coherence across multiple pages as detailed in skills/hallmark/references/verbs/redesign.md.

How does the --mood flag affect the output?

The --mood flag biases the generated visual structure toward specific aesthetic characteristics. As referenced in the skill documentation, values like "luxury" or "playful" influence typography choices, color palette depth, and layout spacing while still respecting your existing content and information architecture.

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