SiteDNA

About

SiteDNA extracts the "design DNA" of any web page in one click — so you can study, document, or rebuild a site without manually digging through DevTools.

WHAT IT CAPTURES
• Tech stack — frameworks (React, Vue, Angular, Svelte…), meta-frameworks (Next.js, Nuxt, Astro…), libraries, UI/CSS frameworks, analytics & bundler hints
• Design tokens — color palette (dominant / secondary / accent + real area share), typography (families, size scale, weights), spacing, radius and shadow scales, plus CSS custom properties
• Components — buttons, cards, header/nav/footer and more, re-rendered from their captured styles with type labels (filled / outline / text / nav / icon…)
• Images — every asset's natural & displayed size, ratio, format and role
• Layout skeleton — a nested wireframe tree of the page's regions, columns and content
• Motion — transitions (with easing-curve previews) and keyframe animations

THREE OUTPUT VIEWS
• Visual report (default) — charts, swatches, live previews
• Markdown — clean, AI-ready report
• JSON — full machine-readable spec
Copy or download in the format you're viewing (Visual = self-contained HTML).

MULTILINGUAL
English by default, switchable to Traditional Chinese — UI, report and data values.

PRIVACY-FIRST
Everything runs locally in your browser. SiteDNA does not collect, store remotely, or transmit any data. It only reads the page you explicitly choose to analyze, using minimal permissions (activeTab + scripting).

Perfect for designers, front-end developers, and anyone using AI to understand or recreate web designs.