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

> Explore the Hallmark development roadmap from Nanobanana integration to brand-first flows, variant generation, and live preview MCP. Discover future enhancements now.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: roadmap
- Published: 2026-07-28

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/variant-1.html), [`variant-2.html`](https://github.com/Nutlope/hallmark/blob/main/variant-2.html), and [`variant-3.html`](https://github.com/Nutlope/hallmark/blob/main/variant-3.html). This feature adds a new entry point in the CLI (similar to [`src/cli.ts`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`.

```bash

# 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`](https://github.com/Nutlope/hallmark/blob/main/ROADMAP.md)** – Master list of upcoming features and architectural rationale
- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – Core rule-set driving the slop-test and macro-structure selection
- **[`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md)** – Reference catalogue of structural fingerprints (future cookbook location)
- **[`skills/hallmark/references/microinteractions.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/microinteractions.md)** – Token definitions for theme-aware motion durations
- **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** – Client-side runtime that parses tokens and applies themes
- **[`docs/recipes.md`](https://github.com/Nutlope/hallmark/blob/main/docs/recipes.md)** and **[`docs/study-examples.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/variant-1.html), [`variant-2.html`](https://github.com/Nutlope/hallmark/blob/main/variant-2.html), and [`variant-3.html`](https://github.com/Nutlope/hallmark/blob/main/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.