SiteDNA

One-click capture of any page's tech stack, design tokens, components, images and layout into JSON + Markdown for AI analysis.

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.