Hallmark Development Roadmap: Brand-First Flows, Variant Generation, and Live Preview MCP

The Hallmark development roadmap outlines a three-phase evolution from immediate Nanobanana image integration through mid-term brand persistence and structural variant generation to long-term live preview MCP servers and emotion-first prompting capabilities.

Hallmark is an open-source design skill that generates full-featured, brand-consistent webpages from briefs while explicitly rejecting the generic "AI-generated" aesthetic. According to the Nutlope/hallmark repository, the ROADMAP.md file divides upcoming capabilities into three architectural phases—Now, Next, and Later—each targeting specific layers from image pipeline hooks to multi-page coherence engines.

Immediate Priorities: The "Now" Phase

The current development sprint focuses on integrating external image generation and expanding thematic capabilities.

Nanobanana Image-Hook Integration

The Nanobanana image-hook provides first-class integration with the Nanobanana image API. When triggered, the system automatically crafts a prompt, calls the API, caches the result by prompt hash, and injects the generated image into the build pipeline. This enables the new Plate theme, specifically optimized for full-bleed photography layouts that demand high-impact visual hero sections.

Mid-Term Milestones: The "Next" Phase

The mid-term roadmap introduces persistent brand objects, structural variation tools, and enhanced study capabilities.

Brand-First Flow and Persistent Identity

The brand-first flow transforms Hallmark from a page generator into a brand system. From a short product description, Hallmark generates a complete brand—including palette, typography, voice, and custom imagery—and persists it in design.md. Subsequent page builds reuse this brand identity, enabling multi-page sites with coherent visual language. This introduces a persistent brand object that all verbs (audit, redesign, study) read during execution.

Theme-Aware Motion Tokens

Hallmark will implement theme-aware motion tokens defined in skills/hallmark/references/microinteractions.md. These tokens—--dur-micro, --dur-short, and --dur-long—respect each theme's pacing (e.g., Atelier versus Brutal) and extend the token system parsed by site/js/main.js to apply theme-specific animation durations.

The hallmark variant Verb

The new hallmark variant verb generates three structurally distinct versions of the same brief side-by-side, outputting variant-1.html, variant-2.html, and variant-3.html. This feature adds a new entry point in the CLI (similar to src/cli.ts) while reusing the existing macro-structure selector, allowing users to pick their preferred architectural approach or request additional iterations.

Structural Cookbook and Tactile Rebellion

The structural cookbook will populate skills/hallmark/references/structure.md with concrete HTML/CSS sketches for 12–20 fingerprint patterns, converting abstract design axes into copy-and-pasteable examples. Complementing this, the tactile-rebellion reference codifies controlled imperfections—hand-drawn SVGs, jittered type, and subtle textures—to counter the "perfect-pixel" AI look, supplying tactile-rebellion.md for consultation by the slop-test engine.

Enhanced Analytics and Multi-Page Coherence

For data-heavy sites, charts reference guidelines in data-viz.md will favor small-multiple charts, limit color palettes, and ban overly complex visualizations. Meanwhile, multi-page coherence locks brand-level axes (type, color, divider language) while varying page-voice axes (heading placement, button text) across a site, implemented via a site-wide context object that persists between page generations.

Local Codebase Analysis

The study verb will gain a third input mode: local filesystem scanning. By accepting a path to the user’s own project, Hallmark walks the files using fs APIs, extracts tokens and structural fingerprints, and emits a design.md file, merging this output with existing study logic.

Long-Term Vision: The "Later" Phase

The long-term roadmap targets explainability, emotional intelligence, and real-time feedback loops.

Explainability and Negative Capability

hallmark explain will generate narrative explanations of design choices axis by axis, while negative-capability rules document why specific anti-patterns fail, educating users on underlying perceptual principles rather than simply enforcing constraints.

Emotion-First Prompting and Sensory Design

Emotion-first prompting adds high-level emotion tags—nostalgic, optimistic, skeptical—to steer tone beyond the current "editorial/brutalist/austere" taxonomy. The sound + haptic policy will define appropriate contexts for web audio and subtle haptics without becoming kitsch.

Live Preview MCP Server

The live preview MCP server completes a generation-audit loop by watching source files, rendering a sandbox preview, capturing screenshots, and feeding visual feedback back into the slop-test for self-critique, enabling real-time design validation.

CLI Examples for Roadmap Features

Below are typical invocations illustrating upcoming capabilities. All commands assume installation via npx skills add nutlope/hallmark.

# Generate a brand first and reuse it for subsequent pages

hallmark redesign my-product-description   # creates design.md with brand assets

hallmark my-product-description            # builds the site using the saved brand

# Create three structural variants side-by-side

hallmark variant my-brief                  # outputs variant-1.html, variant-2.html, variant-3.html

# Run the new image-heavy hook (Nanobanana)

hallmark --theme=plate my-ecommerce-brief  # automatically fetches a full-bleed image

# Audit an existing page and see brand-coherence warnings

hallmark audit site/_tests/wayfare/index.html

# Study a local codebase (new mode)

hallmark study ./my-project

Each command taps into the underlying architecture described in the roadmap—the variant verb reuses the macro-structure selector, while the study command implements the new filesystem scanner.

Core Architecture and Reference Files

The following files form the backbone of Hallmark's current capabilities and will be extended as roadmap items are implemented:

• ROADMAP.md – Master list of upcoming features and architectural rationale
• skills/hallmark/SKILL.md – Core rule-set driving the slop-test and macro-structure selection
• skills/hallmark/references/structure.md – Reference catalogue of structural fingerprints (future cookbook location)
• skills/hallmark/references/microinteractions.md – Token definitions for theme-aware motion durations
• site/js/main.js – Client-side runtime that parses tokens and applies themes
• docs/recipes.md and docs/study-examples.md – Practical usage recipes and study-mode examples

Summary

• Now: Nanobanana image-hook integration with prompt-hash caching and the Plate theme for full-bleed photography.
• Next: Brand-first flows persisting to design.md, theme-aware motion tokens (--dur-micro, --dur-short, --dur-long), the variant verb for structural alternatives, and local filesystem scanning for the study verb.
• Later: hallmark explain for design rationale, emotion-first prompting with tags like "nostalgic" and "skeptical," and a live preview MCP server that closes the generation-audit feedback loop.

Frequently Asked Questions

What is the Nanobanana image-hook in Hallmark?

The Nanobanana image-hook is an automated integration that crafts prompts for the Nanobanana image API, caches results by prompt hash to avoid redundant calls, and injects generated images directly into the build pipeline. This feature supports the new Plate theme, which is optimized for full-bleed photography layouts.

How does the brand-first flow work?

The brand-first flow generates a complete brand identity—including color palette, typography, voice, and imagery—from a brief product description and stores it in design.md. Subsequent Hallmark commands reuse this persistent brand object, ensuring multi-page sites maintain consistent visual language across all verbs (audit, redesign, study).

What does the hallmark variant verb generate?

The hallmark variant verb produces three structurally distinct versions of the same brief (output as variant-1.html, variant-2.html, and variant-3.html), allowing users to compare different architectural approaches side-by-side. This feature reuses the existing macro-structure selector while adding a new CLI entry point.

When will the live preview MCP server be available?

The live preview MCP server is scheduled for the Later phase of the Hallmark development roadmap. It will watch source files, render sandbox previews, capture screenshots, and feed visual feedback into the slop-test engine, completing a real-time generation-audit loop for self-critiquing designs.

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