How to Extract Design DNA from a Screenshot Using Hallmark

Run hallmark study followed by a screenshot path or public URL to generate a structured design DNA report that captures macro-structure, color palette, typography roles, and motion cues without copying pixel-exact content.

Extracting design DNA from existing interfaces is a core capability of the Hallmark skill in the Nutlope/hallmark repository. The hallmark study command acts as a diagnostic verb that analyzes visual references and distills them into reusable architectural patterns. This structured extraction enables developers to understand and replicate the essence of a design while maintaining strict boundaries against copying protected assets.

The Five-Step Extraction Protocol

The hallmark study command follows a rigorous protocol defined in skills/hallmark/references/study.md. This process decomposes any screenshot or webpage into actionable design tokens through five distinct phases.

1. Source Mode Detection

The system first determines how to ingest the reference material. According to the implementation in skills/hallmark/references/study.md (lines 11-14), inputs beginning with http:// or https:// trigger URL mode, while any other path is treated as an attached image in image mode. This bifurcation determines which extraction pipelines activate downstream.

2. Surface Extraction

In this phase, the tool identifies colour bands, hue distributions, accent footprints, and distinctive visual treatments. For uploaded screenshots, this occurs via a vision pass that infers values directly from pixels. In URL mode, the system reads CSS :root custom properties when available, extracting the exact token definitions used by the original implementation (lines 14-21).

3. Type Extraction

Typography analysis assigns roles (display, body, label) to text elements detected in the reference. When operating in URL mode, the system pulls exact font names from @font-face declarations, Google Fonts links, or hard-coded font-family CSS properties. Image mode relies on visual similarity to infer type classifications without accessing underlying font files (lines 22-44).

4. Structure Extraction

The page architecture is matched against one of 21 named macro-structures documented in skills/hallmark/references/macrostructures.md. Each visible region receives an archetype classification plus its specific "knob" variations—parameterized adjustments that define spacing, alignment, and container behavior. This mapping occurs in lines 45-58 of the study reference file.

5. Motion and Rhythm Capture

The final phase inspects motion libraries (framer-motion, gsap, etc.) and reveal patterns from scripts and CSS. Notably, rhythm remains a blind spot in URL mode because timing functions and animation curves cannot be reliably inferred from static analysis; the final report explicitly notes this limitation (lines 60-78).

Output Generation and Schema

All extracted values populate a strict JSON schema defined at the bottom of skills/hallmark/references/study.md. The system then renders this data into a concise, human-readable diagnosis report using either the image-mode or URL-mode template (lines 68-98).

The report contains no pixel-exact content—only the distilled architectural DNA:

• Colour tokens and accent relationships
• Typography scale and role assignments
• Macro-structure archetype with knob variations
• Motion library detection and timing notes

Locking DNA to a Portable Specification

Once the diagnosis displays, you can persist the extracted DNA by responding "lock the DNA" when prompted. This action writes a design.md file following the format specified in skills/hallmark/references/design-md.md.

The locked file contains:

• Exact design tokens and font specifications
• Provenance information linking back to the original reference
• Reusable component archetypes

Subsequent builds can reference this portable specification using the default Hallmark verb, enabling recreation of the same macro-structure and style with fresh content.

Content Safety and Refusal Rules

Before any extraction begins, Hallmark evaluates a set of refusal rules defined in skills/hallmark/references/study.md (lines 75-88). The system automatically declines to process:

• Paid template marketplaces
• Signature designer work
• Copyrighted imagery

This ensures the tool extracts only architectural patterns and publicly observable design principles, never copying protected creative assets.

Practical Usage Examples

Extract DNA from a local screenshot:

hallmark study ./screenshots/hero-mybrand.png

Extract DNA from a public URL to access the full URL-mode pipeline:

hallmark study https://www.usehallmark.com/examples/tally/

Lock the generated DNA to a portable spec after the diagnosis appears:

# Respond "lock the DNA" when prompted

# File written to ./design.md

Use the locked specification in a subsequent build:

hallmark default --design-md ./design.md

Summary

• hallmark study is the diagnostic verb that extracts design DNA from screenshots or URLs without copying pixels.
• The five-step protocol (source detection, surface, type, structure, motion) is implemented in skills/hallmark/references/study.md.
• URL mode provides deeper extraction (exact fonts, CSS tokens) compared to image mode (visual inference only).
• The 21 macro-structures that define page architecture are cataloged in skills/hallmark/references/macrostructures.md.
• Locking the DNA generates a design.md file per the specification in skills/hallmark/references/design-md.md.
• Built-in refusal rules prevent extraction from copyrighted or restricted sources.

Frequently Asked Questions

What is the difference between image mode and URL mode when extracting design DNA?

Image mode processes uploaded screenshots through visual inference, detecting colors, layouts, and typography appearances without accessing underlying code. URL mode analyzes the live site's CSS and HTML, extracting exact values from :root custom properties, @font-face declarations, and linked font services. URL mode provides more precise token extraction but requires a publicly accessible webpage.

How does Hallmark prevent copying protected assets during extraction?

The system implements refusal rules evaluated before processing begins, as defined in skills/hallmark/references/study.md (lines 75-88). These rules automatically block paid template marketplaces, signature designer portfolios, and copyrighted imagery. The extraction captures only architectural patterns—the "grammar" of the design—never pixel-exact copies or proprietary creative assets.

What file format stores the locked design DNA for portable reuse?

When you respond "lock the DNA" after a study completes, Hallmark writes a design.md file following the schema defined in skills/hallmark/references/design-md.md. This portable specification contains the exact tokens, font names, macro-structure archetype, and provenance information, allowing the design DNA to be reused across different projects via the hallmark default --design-md command.

Where are the 21 macro-structure definitions documented in the Hallmark repository?

The complete catalog of macro-structures that hallmark study uses to classify page layouts resides in skills/hallmark/references/macrostructures.md. This file defines the architectural patterns (such as "Bento Grid," "Editorial," or "Dashboard") that the study verb matches against during the structure extraction phase of the protocol.

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