# Hallmark Design Flow: The Complete 7-Step Pipeline Explained > Understand the complete 7-step Hallmark design flow pipeline from creative brief to final design.md file. Learn about pre-flight scanning, context building, and more. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: deep-dive - Published: 2026-08-09 --- **The Hallmark design flow is a tightly-structured, seven-stage AI-assisted pipeline that transforms a creative brief into a finalized [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file through pre-flight scanning, context building, memory rotation, macrostructure selection, hero enrichment, live preview, and final stamping.** The Hallmark system, developed in the `Nutlope/hallmark` repository, implements a deterministic design pipeline for AI-assisted page generation. Understanding the Hallmark design flow helps developers and designers trace exactly how the system moves from raw brief to production-ready markup. ## The Seven Stages of the Hallmark Design Flow The pipeline follows a strict numerical sequence: **Step 0 → Step 1 → Step 2.5 → Step 3 → Step 4 → Step 5 → Step 6**. Each stage is documented in the repository's skill files and reference documentation. ### Step 0: Pre-flight Scan In [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), the pipeline begins with a **pre-flight scan** that audits existing assets before any generation occurs. The engine reads available **design tokens**, **font families**, **framework constraints**, and **micro-interaction stances** to determine what visual components can be reused versus generated from scratch. ### Step 1: Context Building The system parses the input brief and constructs a **design context** containing the project name, genre classification, and target audience parameters. According to [`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/README.md), this step transforms unstructured requirements into structured metadata that guides downstream decisions. ### Step 2.5: Project-Memory Rotation Documented in [`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/README.md), this intermediate step performs **project-memory rotation** to surface the most relevant past work from the system's internal memory. This prevents repetitive outputs and ensures visual diversity across generated pages by weighting historical examples against current context. ### Step 3: Macrostructure Selection As detailed in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md), the system selects a **hero-macrostructure** that determines the page's visual hierarchy. Available patterns include **Marquee Hero**, **Stat-Led**, **Quote-Led**, and other layout archetypes. This decision locks the foundational grid and content priority for the entire page. ### Step 4: Hero Enrichment The chosen macrostructure undergoes **hero enrichment** with media assets and polish patterns. The system can inject **hand-built SVGs**, **generated raster images**, **video backgrounds**, or decorative elements such as **vertical rails**, **marquee-overflow**, **cursor-spotlight**, and **decorative numerals**. This step is also defined in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md). ### Step 5: Live Preview Before finalizing, the system renders a **live preview block** that displays the emerging page composition. As noted in [`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/README.md), this stage allows immediate user feedback and iterative refinement before the design is locked. ### Step 6: Final Stamp The pipeline concludes with the **stamp** operation, where the system emits the final [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file. According to [`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md), this step serializes all decisions into a stamped document that completes the design run and serves as the authoritative specification for implementation. ## Executing the Hallmark Design Flow from the Command Line The repository ships with a CLI entry point that orchestrates these stages. The `hallmark` binary wraps the pipeline into discrete commands: ```bash # Run pre-flight, context building, and memory rotation (Steps 0-2.5) hallmark design --brief "Create a landing page for a new AI-powered analytics tool." ``` After macrostructure selection and hero enrichment (Steps 3-4), the system presents an interactive prompt for media asset selection. Once the preview (Step 5) is approved, finalize the run: ```bash # Emit the final design.md and complete the flow (Step 6) hallmark stamp ``` These commands reference the [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) scripts and the `hallmark` binary that interface directly with the pipeline logic. ## Core Source Files in the Hallmark Repository Several markdown files in the repository provide authoritative definitions for each stage: - **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – Defines the pre-flight logic (Step 0) and core pipeline architecture. - **[`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/README.md)** – Contains the brief template and documents Steps 1, 2.5, and 5. - **[`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md)** – Specifies macrostructure selection criteria (Step 3) and enrichment patterns (Step 4). - **[`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md)** – Details the stamping process and output format (Step 6). ## Summary - The Hallmark design flow consists of seven explicit stages numbered 0 through 6 (including the fractional Step 2.5). - **Pre-flight scanning** ensures asset reuse before generation begins. - **Memory rotation** prevents repetitive designs by surfacing diverse historical references. - **Macrostructure selection** and **hero enrichment** determine the final visual hierarchy and polish. - The CLI commands `hallmark design` and `hallmark stamp` provide practical interfaces to the pipeline. - All stages are documented across four key markdown files in the repository. ## Frequently Asked Questions ### What is the Hallmark design flow used for? The Hallmark design flow guides AI-assisted page generation from initial creative brief to final specification. It provides a deterministic structure that ensures consistent, reusable, and diverse design outputs while maintaining strict control over visual hierarchy and asset selection. ### Why is Step 2.5 numbered as a fractional step? Step 2.5 represents **Project-Memory Rotation**, a distinct phase inserted between context building and macrostructure selection. The fractional numbering in [`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/README.md) indicates that this is a rotational audit step rather than a primary generative stage, emphasizing its role as a gatekeeper for diversity and repetition-avoidance. ### How does the macrostructure selection affect the final output? The macrostructure selected in Step 3 determines the page's **visual hierarchy** and layout archetype. Whether the system chooses a Marquee Hero, Stat-Led, or Quote-Led structure affects how content blocks are prioritized, spaced, and responsive-behavior is defined throughout the generated [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md). ### Where is the final design output stored? Upon completion of Step 6 (Stamp), the system emits a file named **[`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md)** in the project workspace. This document, described in [`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md), locks all design decisions and serves as the immutable specification for the generated page.