How Hallmark Study Extracts Design DNA from Screenshots vs URLs

The hallmark study command processes screenshots through a vision model for pixel-level analysis while parsing URLs via DOM heuristics, converging both inputs into an identical ten-field DNA schema that drives the design generation pipeline.

The hallmark study command serves as the entry point for the Hallmark design skill in the Nutlope/hallmark repository, digesting visual references to create structured design decisions. Whether you feed it a static image or a live web address, the tool extracts a standardized "DNA" representation that powers its page generation engine. Understanding how hallmark study handles these two distinct input types reveals the architecture behind its visual grammar analysis.

Screenshot Processing: Vision Model Pipeline

When processing image files, hallmark study sends pixel data directly to Hallmark's vision model—the same architecture powering Claude and ChatGPT vision capabilities.

Pixel-Level Analysis

According to the skill specification in skills/hallmark/references/verbs/study.md, the model inspects layout, typography, color, spacing, and component archetypes from the raw image data. This analysis requires no HTML markup or CSS parsing; instead, the vision model identifies visual patterns directly from the bitmap.

The model outputs ten structured fields defined in the study protocol: macrostructure, hero archetype, pitch, footer, display-family role, body-family role, surface lightness, accent hue, density, and type-pairing. These fields become the DNA that Hallmark uses to rebuild pages with matching visual grammar.

Screenshot Implementation Details

The test harness in site/_tests/verbs/study/diagnosis.md demonstrates this flow using aperture-portfolio.png, showing how the vision model maps visual elements to the structured DNA fields without intermediate markup representation.

URL Processing: DOM Inspection Pipeline

For HTTP endpoints, hallmark study follows a fundamentally different extraction path that treats the input as structured data rather than pixels.

HTML Fetching and Parsing

Client-side code in site/js/main.js handles the HTTP request to fetch the target URL. The system then parses the returned HTML and inspects the living DOM for structural cues including heading hierarchies, hero sections, navigation and footer elements, typographic classes, and color tokens.

Heuristic Mapping

Rather than analyzing pixels, a set of heuristics defined in the study protocol maps these DOM cues onto the same ten-field DNA schema used for screenshots. This ensures that whether the input originates from a rendered screenshot or live markup, the output structure remains identical and compatible with the downstream generation pipeline.

The extracted fields feed into the same pipeline that produces the final rendered output displayed in site/_tests/verbs/study/output.html.

Unified DNA Output Structure

Both input methods converge on an identical JSON-like structure. Here is the standardized output format:

{
  "macrostructure": "Specimen",
  "heroArchetype": "H4 Margin-Number Display",
  "pitch": "Centered statement",
  "footerArchetype": "Ft1 Single-Line Colophon",
  "displayFamily": "Fraunces italic",
  "bodyFamily": "Geist",
  "surfaceLightness": "light (~96% L)",
  "accentHue": "warm-orange ~25-30°",
  "density": "sparse",
  "typePairing": "italic-display + sans-body"
}

This DNA object captures the essential visual decisions required to recreate the design, regardless of whether the source was a static image or a crawlable webpage.

Command Examples and Key Files

Use the following syntax to trigger either extraction mode:

# Extract DNA from a local screenshot file

hallmark study ./images/aperture-portfolio.png

# Extract DNA from a live web page

hallmark study https://example.com/portfolio

Critical implementation files:

• skills/hallmark/references/verbs/study.md — Formal definition of the study protocol and the ten DNA fields
• site/_tests/verbs/study/diagnosis.md — Example diagnostic output showing screenshot-to-DNA extraction
• site/_tests/verbs/study/output.html — Rendered page demonstrating DNA application
• site/js/main.js — Client-side orchestration for URL fetching and result display

Summary

• Screenshot inputs trigger the vision model pipeline for direct pixel analysis of layout, typography, and color
• URL inputs trigger DOM inspection via site/js/main.js and heuristic mapping of HTML structure
• Both pathways produce identical ten-field DNA objects per the protocol defined in skills/hallmark/references/verbs/study.md
• The unified schema enables consistent design generation regardless of whether the source is a bitmap or a live website

Frequently Asked Questions

Can Hallmark Study process screenshots and URLs interchangeably?

Yes. The hallmark study command accepts either input type through the same CLI interface, automatically routing screenshots to the vision model pipeline and URLs to the DOM parser. Both methods produce the standardized DNA format required by downstream generation steps.

Which DNA fields does the vision model extract from screenshots?

The vision model identifies macrostructure, hero archetype, pitch, footer, display-family role, body-family role, surface lightness, accent hue, density, and type-pairing directly from pixel analysis. These ten fields are defined in the study protocol at skills/hallmark/references/verbs/study.md.

How does URL processing handle websites with complex JavaScript rendering?

The current implementation in site/js/main.js fetches the initial HTML response and parses the static DOM structure. While the heuristics engine can identify structural cues from the raw markup, dynamic content rendered exclusively via client-side JavaScript may require additional processing to capture fully.

Where can I view example outputs from both input methods?

The repository includes diagnostic samples at site/_tests/verbs/study/diagnosis.md demonstrating screenshot-based extraction, while site/_tests/verbs/study/output.html shows the rendered HTML results built from extracted DNA regardless of the original input source.

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