# How Hallmark Study Extracts Design DNA from Screenshots vs URLs

> Discover how Hallmark Study analyzes screenshots with vision models and URLs with DOM heuristics, creating a unified ten-field DNA schema for design generation. Learn the extraction process.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-19

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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:

```json
{
  "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:

```bash

# Extract DNA from a local screenshot file

hallmark study ./images/aperture-portfolio.png

```

```bash

# Extract DNA from a live web page

hallmark study https://example.com/portfolio

```

**Critical implementation files:**

- **[`skills/hallmark/references/verbs/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md)** — Formal definition of the *study* protocol and the ten DNA fields
- **[`site/_tests/verbs/study/diagnosis.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/verbs/study/diagnosis.md)** — Example diagnostic output showing screenshot-to-DNA extraction
- **[`site/_tests/verbs/study/output.html`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/verbs/study/output.html)** — Rendered page demonstrating DNA application
- **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/verbs/study.md).

### How does URL processing handle websites with complex JavaScript rendering?

The current implementation in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/verbs/study/diagnosis.md) demonstrating screenshot-based extraction, while [`site/_tests/verbs/study/output.html`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/verbs/study/output.html) shows the rendered HTML results built from extracted DNA regardless of the original input source.