Site DNA

Site DNA analyzes a website across routes, screen sizes, themes, and UI states. It produces structured reports from the rendered page, including design tokens, layout measurements, assets, motion, and accessibility signals.

I designed and built the application, the browser analysis runtime, and a Chrome companion for user-directed capture of signed-in products.

Public-site analysis starts with robots.txt and sitemap discovery, then follows same-origin links from rendered pages. Dynamic identifiers are normalized into route templates to reduce duplicate work.

A session tracks a graph of routes and states. Each route is captured, failed, blocked, or explicitly excluded. Reports distinguish complete coverage from complete-with-gaps, and include warnings, truncation, and inaccessible routes in exports.

The route queue and reports are stored in IndexedDB. Sessions can pause, resume, retry, and survive page refreshes or serverless execution limits.

Each route is measured at desktop, tablet, and mobile sizes in both light and dark system preferences. The six-state matrix uses the rendered DOM, computed CSS, geometry, semantic structure, and timing signals.

The analyzer extracts colors, typography, spacing, corners, shadows, CSS variables, assets, repeated component groups, and responsive differences. Motion Filmstrips record element-level changes during passive entrances, scrolling, and safe hover states.

Accessibility diagnostics cover contrast, alternative text, control labels, link names, focusable elements, heading order, and overflow. These automated signals help identify issues but do not replace a full accessibility audit.

The Manifest V3 Chrome companion records an explicitly selected tab using the user’s existing browser session. The user navigates; the extension measures approved application routes and named UI states.

Capture pauses at identity providers, cross-origin MFA, and CAPTCHA challenges. A new application origin requires approval. The companion does not request or extract credentials, passwords, OTP values, reusable session cookies, or form values, and has no cookie API access.

Chrome DevTools Protocol is used for responsive and media emulation and rendered-page measurements. Captured reports remain in extension-local storage until export or deletion.

The application exports a compact machine-readable manifest, a detailed reproduction brief, and a full session archive. Each includes the evidence supporting its findings and a record of missing or excluded content.

The output can be used to inspect a design system, investigate responsive or accessibility issues, or provide measured implementation details to a coding agent.

The public analyzer validates DNS and blocks local, private, link-local, reserved, and credential-bearing targets. The same rules apply to redirects, documents, and asset requests.

Automatic analysis uses public GET traversal. It does not submit forms, perform general clicks, enter keyboard input, or follow interaction-driven navigation.

Playwright runs Chromium in isolated temporary profiles with cleanup, readiness checks, settled fonts, and recoverable operation limits. Browser-heavy work is serialized within shared serverless instances. API routes return no-store responses, and there is no connected backend database or remote session store.

Tests cover route normalization, session recovery, request security, responsive behavior, authenticated capture, MFA and CAPTCHA handoff, exports, and secret exclusion.

GitHub Actions runs the quality suite before Vercel preview deployment and deployed-browser checks. Production receives the tested prebuilt artifact. Automatic Git deployment is disabled so releases follow that process.

Site DNA is a working application with automatic public-site analysis and user-controlled capture of signed-in products. Design values are measured from the browser, and incomplete coverage is recorded explicitly.