How does the skill handle sites without standard section tags?

The skill includes a structural detection script that identifies content boundaries using framework roots like #__next or #app and visual height analysis.

What is the 'Anti-Flattening Doctrine'?

It is a core requirement of this skill that forbids vague summaries; every visual element and value must be documented specifically so a developer can rebuild it without guesswork.

Can this skill identify components hidden in tall scrolling pages?

Yes, it implements a 'Tall Section Scroll Mandate' which triggers incremental screenshots and DOM inspection for sections exceeding 2000px in height.

What is a 'Site DNA' document?

A Site DNA document is the output of this audit, containing structured data on layout grids, color palettes, typography, and component relationships.

Forensic Site DNA Audit

Name: Forensic Site DNA Audit
Author: akornmeier

byakornmeier

0•

Design Tools

Performs a clinical forensic analysis of websites to extract high-fidelity design tokens, architecture, and layout patterns.

The Forensic Site DNA Audit is the foundational phase of the UI cloning pipeline, designed to deconstruct a target website with extreme precision. By enforcing a strict 'Anti-Flattening' doctrine, the skill ensures that every visual detail—from exact hex codes and typography scales to complex motion patterns and z-index behaviors—is captured in a structured Site DNA document. It uses specialized DOM traversal techniques to identify non-standard layout sections and hidden components, providing a comprehensive blueprint for pixel-perfect frontend replication.

Key Features

010 GitHub stars

02Anti-Flattening Doctrine to prevent loss of visual and motion detail

03Tall-section scroll mandate for comprehensive component identification

04Automated extraction of design tokens including color palettes and typography scales

05Vertical ASCII wireframe generation for macro page architecture

06Exhaustive sub-section discovery to catch mixed component types

Use Cases

01Performing competitive design audits to extract design systems from live sites

02Generating detailed documentation for existing frontend architectures

03Replicating complex UI layouts for rapid prototyping or site migrations

Key Features

010 GitHub stars

02Anti-Flattening Doctrine to prevent loss of visual and motion detail

03Tall-section scroll mandate for comprehensive component identification

04Automated extraction of design tokens including color palettes and typography scales

05Vertical ASCII wireframe generation for macro page architecture

06Exhaustive sub-section discovery to catch mixed component types

Use Cases

01Performing competitive design audits to extract design systems from live sites

02Generating detailed documentation for existing frontend architectures

03Replicating complex UI layouts for rapid prototyping or site migrations