What Does the `hallmark study` Command Do? Extracting Design DNA from Screenshots and URLs

The hallmark study command analyzes a user-supplied screenshot or live webpage to extract its underlying design DNA—macrostructure, archetypes, typography, and color—and returns a diagnosis report that can optionally rebuild your content or emit a portable design.md file.

If you want to deconstruct a website's visual system without copying pixels, the hallmark study command in the Nutlope/hallmark repository provides a structured solution. This design-DNA extraction verb accepts either an image file or a URL, runs safety and validation checks, and produces a detailed diagnosis report. According to the Hallmark source code, the command acts as both a learning tool for designers and a bridge to reusable design systems.

Source-Mode Detection: URL vs. Screenshot

When you invoke the tool, the skill dispatch reads the verb definition in [skills/hallmark/SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at line 28. The system then auto-selects its ingestion method by inspecting the argument string. As documented in [skills/hallmark/references/study.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md), the command enters URL mode when the argument starts with http:// or https://; otherwise it assumes image mode and expects a screenshot file attached to the chat.

Refusal Checks and Safety Guardrails

Before any extraction begins, Hallmark runs protocol-specific safety filters. In URL mode, the system consults a refuse list that blocks template marketplaces, auth-walled sites, and SPA shells, then performs a remote-safety check prior to any WebFetch call. In image mode, a vision pass validates that the attached screenshot is a legitimate design reference. These refusal heuristics live in references/study.md between lines 69 and 75.

How the hallmark study Command Extracts Design DNA

Once the input passes validation, the pipeline extracts ten structured fields describing the source's visual grammar. In image mode, the vision pass captures macrostructure, component archetypes, type-pairing, colour anchor, and rhythm. In URL mode, Hallmark performs a shallow WebFetch of the target page and parses HTML and CSS to recover exact font names, color values, and paper or accent tokens, as implemented in [skills/hallmark/SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at lines 508–512.

Diagnosis Report and Follow-Up Actions

After extraction, the command emits a one-page Markdown diagnosis report summarizing the captured DNA, governed by the diagnosis section in references/study.md. At this point, you have three options:

• Build: Hand the extracted DNA off to hallmark redesign to reconstruct your content using the studied system.
• Lock: Emit a portable design.md file containing the extracted DNA for downstream tools; the specification for this file lives in [skills/hallmark/references/design-md.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md).
• Stop: End the session after receiving the diagnosis.

hallmark study Command Examples

Run the command against a live page by passing a URL:

hallmark study https://example.com/awesome-landing-page

Or analyze a local screenshot:

hallmark study my-favourite-portfolio.png

A typical response looks like this:

## Diagnosis Report

- **Macrostructure**: Marquee Hero with single-column body
- **Archetypes**: Hero → Feature → Footer
- **Type-pairing**: Display = Inter Tight, Body = Workbench
- **Colour anchor**: Desaturated forest-green (hue ≈ 140°)
- **Rhythm** (image mode): 3-step vertical flow

To persist the extracted DNA, run the study and then reply with the lock instruction:

hallmark study https://example.com/awesome-landing-page

# ... after the diagnosis, reply: lock the DNA

Result: a design.md file is emitted according to the design-md.md specification.

Summary

• The hallmark study command is a design-DNA extraction verb that reads screenshots or live URLs and returns structured design intelligence.
• It auto-selects URL mode or image mode based on the argument format, then applies refusal checks to unsafe or invalid sources before fetching.
• The extraction pipeline captures ten fields—ranging from macrostructure to color anchors—using vision passes or shallow WebFetch and HTML/CSS parsing.
• Output is a one-page diagnosis report; optional follow-ups include handing off to hallmark redesign or emitting a portable design.md file.

Frequently Asked Questions

Can hallmark study clone an entire website's code?

No. The command is intentionally not a code cloner. As implemented in Nutlope/hallmark, it captures design DNA—structural patterns, type scales, and color systems—and produces a diagnosis report or design.md spec, never a pixel-for-pixel reproduction.

How does hallmark study choose between analyzing a URL and a screenshot?

The verb inspects the argument string. If it starts with http:// or https://, the system enters URL mode and performs a shallow WebFetch; otherwise it assumes image mode and validates the attached screenshot through a vision pass. This logic is documented in references/study.md.

What files govern the behavior and output of hallmark study?

The central contract lives in [skills/hallmark/SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), which defines the verb syntax and high-level flow at line 28. The detailed protocol—including source-mode detection, refusal heuristics, and emission rules—is specified in [skills/hallmark/references/study.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md). The portable design.md output format is defined in [skills/hallmark/references/design-md.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md).

Is it safe to run hallmark study on any public URL?

No. The command enforces a refuse list that blocks template marketplaces, auth-walled pages, and SPA shells. A remote-safety check also runs before fetching any URL, ensuring the tool only analyzes appropriate sources.

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