What Information Is Included in the Hallmark Preview Summary?

The Hallmark preview summary contains seven structured items—macrostructure, theme, enrichment, sections, motion, slop test, and optional diversification—formatted as markdown bullets to provide a human-readable TL;DR before any code is generated.

The Hallmark skill by Nutlope emits a preview block at the start of every generation cycle. This up-front summary allows users to verify design decisions before the system produces substantive code, satisfying the discipline defined in the skill’s specification. According to the skills/hallmark/SKILL.md source, the preview always renders as clean markdown bullets to ensure compatibility across chat clients and terminals.

The Seven Components of a Hallmark Preview Summary

Hallmark’s preview block is strictly defined in SKILL.md §5. Each generation must surface the following six mandatory fields, plus one optional diversification note.

Macrostructure

The macrostructure field names the page layout that will be used for the build. Common values include Stat-Led, Long Document, and Bento Grid. This establishes the foundational information architecture before any CSS or HTML is emitted.

Theme

The theme field varies based on whether the build uses a catalog theme or a custom definition. For catalog themes, it displays the theme name plus a condensed palette summary (paper band · accent hue · display style). For custom themes, the preview expands to show the vibe description, OKLCH values, hue label, and font pairings.

Enrichment

Enrichment specifies the hero-enrichment archetype and its tier, or states “none (typography only)” when no enrichment is added. Tiers range from Tier-A (pure CSS) to Tier-B (hand-built SVG with animations), giving immediate visibility into visual complexity.

Sections

The sections field lists the ordered page sections that will be emitted, such as Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer. This provides a structural roadmap of the complete document flow.

Motion

Motion identifies which micro-interaction primitives are enabled—for example, counter · pricing-lift · pulse-once. If the design respects prefers-reduced-motion or explicitly disables animations, this field reads “none — typography only”.

Slop Test

The slop test row displays the result of Hallmark’s 58-gate quality assurance check run immediately before the preview is rendered. A successful build shows 58 / 58 ✓, while failures surface a concise failure summary. Because the test executes prior to preview generation, the block always reflects the actual build outcome.

Diversification (Optional)

When prior builds exist in the conversation history, the optional diversification field notes how the current macrostructure and theme differ from the previous run—for example, “differs from Newsprint on display style + accent hue”. This mechanism encourages visual variety across consecutive Hallmark outputs.

Preview Format and Rendering

The preview block strictly uses markdown bullet syntax without ASCII boxes or complex formatting. After the seven core items, Hallmark appends a quiet CTA line (italicized text) that surfaces optional calls-to-action such as “Want a portable design.md? Ask me.”. This line renders after the bullet list and is not counted among the mandatory six bullets.

Examples from the Hallmark Repository

The repository’s references/preview-examples.md file provides concrete implementations of the specification. Below are two worked examples illustrating a catalog theme configuration and a custom theme configuration.

Catalog theme preview:

**Hallmark · v1.1.0**

- **Macrostructure** · Long Document
- **Theme** · Newsprint (cool slate paper · steel-blue accent · geometric sans)
- **Enrichment** · Tier-B hand-built SVG (a 60-line coffee bean with `@property --rise` 6 s breathing-loop)
- **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
- **Motion** · breathing-loop on bean only (respects `prefers-reduced-motion`)
- **Slop test** · 58 / 58 ✓
- **Diversification** · first run for this project

Custom theme preview:

**Hallmark · v1.1.0**

- **Macrostructure** · Long Document
- **Theme** · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)
- **Enrichment** · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
- **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
- **Motion** · breathing-loop on bean (with reduced-motion fallback)
- **Slop test** · 58 / 58 ✓
- **Diversification** · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Newsprint on accent hue + display style

Both examples follow the exact bullet order mandated in SKILL.md, with bold labels and middot separators for scannability.

Source Files and Implementation

The Hallmark preview summary is implemented across several key files in the Nutlope/hallmark repository:

• skills/hallmark/SKILL.md — Contains the master specification defining the seven-item bullet structure and formatting rules.
• skills/hallmark/references/preview-examples.md — Provides reference implementations and test cases for both catalog and custom theme previews.
• site/_tests/README.md — Documents how the preview block integrates with the broader test suite and version history tracking.
• site/css/tokens.css — Houses the theme-specific token definitions referenced in the theme summary palette.
• site/_tests/_thumbs/… — Directory containing visual thumbnails generated after the preview block, illustrating the end-to-end generation flow.

Summary

• The Hallmark preview summary is a mandatory pre-generation block that surfaces design intent before code is written.
• It contains six mandatory fields (macrostructure, theme, enrichment, sections, motion, slop test) and one optional diversification note.
• The slop test result reflects a real 58-gate quality check executed immediately before the preview renders.
• Formatting strictly uses markdown bullets for universal client compatibility, with an optional italicized CTA line following the list.
• Specification details are authored in skills/hallmark/SKILL.md with worked examples maintained in references/preview-examples.md.

Frequently Asked Questions

What is the purpose of the Hallmark preview summary?

The preview summary acts as a contract between the user and the system. By emitting a structured TL;DR before generating code, Hallmark allows users to confirm that macrostructure, theme, and motion settings match their intent, preventing wasted computation on incorrect builds.

How does the slop test appear in the preview?

The slop test appears as the sixth bullet in the format 58 / 58 ✓ when all 58 quality gates pass. If any gate fails, the preview displays a failure summary instead. The test runs immediately before the preview block is written, ensuring the status is always current.

What is the optional diversification field?

Diversification is a seventh, optional bullet that appears only when previous Hallmark builds exist in the conversation. It describes how the current design differs from prior iterations (e.g., different accent hue or display style) to encourage variety and prevent repetitive outputs.

Where is the preview specification defined?

The authoritative specification resides in skills/hallmark/SKILL.md at section 5 ("Preview"). This document defines the mandatory bullet order, formatting rules, and the distinction between catalog and custom theme representations.

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