Chrome Extension (Manifest V3) · Powered by Gemini 3.6 Flash

REVERSE ENGINEER
ANY WEBSITE TO PROMPT

Capture DOM. Extract Tokens. Synthesize Build Prompt.

SiteScan inspects live websites directly inside Chrome to generate a complete, implementation-ready AI build prompt (PROMPT.md)—complete with computed CSS tokens, real DOM card seed data, CDN asset manifests, and reference screenshots.

Add to Chrome — Free

Interactive Sandbox

Experience SiteScan in Action

Select a site below or type a target URL to simulate how SiteScan extracts tokens and synthesizes a master prompt.

Presets:

SidePanel Engine

IDLE

Console Extraction Feed

Ready to scan. Click "Run Scan" to launch simulation.

Output Package Preview

/* Generated export artifacts will display here during scan */

Engineered For Precision

100%

Deterministic JS Token Merging (0 AI token waste)

3-Pass

Gemini AI Anti-Hallucination Pipeline

100+

CDN Asset Scanners (Images, Fonts, SVGs, Preloads)

v1.0.0

Production Ready Chrome Web Store Extension

Capabilities Overview

Why SiteScan Beats Simple Screenshots

🌳

Semantic Component Tree

Parses DOM hierarchies up to depth 10, cleaning away script noise while retaining exact layout structures, button groups, and nav bars.

🎨

Computed CSS Token Merge

Extracts exact computed hex colors, font-size scales, line-heights, radii, and shadows across N pages using zero-LLM statistical ranking.

🧠

3-Pass Anti-Hallucination AI

Combines vision grounding (Pass 1) with verification diffs (Pass 1.5) and prompt synthesis (Pass 2) to prevent fictitious class names or broken layouts.

📦

CDN Asset & Font Inventory

Captures preloaded web fonts (`.woff2`, `.ttf`), favicons, OG social cards, image srcsets, and generates Next.js `remotePatterns` configuration.

📑

Repeating Card Seed Extractor

Automatically identifies sibling lists (e.g. video grids, product cards, post feeds) and extracts real structured JSON seed data for mock props.

⚡

Chrome MV3 SidePanel UI

Runs entirely within Chrome's native SidePanel with real-time extraction feeds, DevTools asset logging, and 1-click Google Sign-In.

Pipeline Steps

From Live Page to Runnable AI Prompt

STEP 01

DOM & CSS Extraction

`dom-extractor.js` parses the DOM tree up to depth 10, extracting computed font sizes, exact hex colors, repeating card list structures, breakpoints, and `@keyframes` animations.

STEP 02

Deterministic Token Merge

`token-merge.js` operates purely in client JS without LLM overhead. It statistically ranks colors, typography scales, radii, and custom properties across 1–N pages on the domain.

STEP 03

3-Pass Gemini Pipeline

Pass 1 (Summarize + Multimodal Screenshot Grounding) → Pass 1.5 (Anti-Hallucination Verify Diff) → Pass 2 (Synthesize Master `PROMPT.md` + `next.config.mjs` CDN rules).

STEP 04

ZIP Bundle Download

SiteScan packages `PROMPT.md`, `design-tokens.json`, `assets-manifest.json`, `pages/*.md`, `screenshots/*.jpg`, and `AGENTS.md` for instant setup in Cursor or Claude Code.

Architecture & Codebase

Built With Vanilla JS & MV3 Architecture

/* Select a tab above to view the implementation details */

Frequently Asked Questions

Got Questions? We Have Answers.

Screenshots only give pixels, forcing AI models to guess colors, font sizes, margins, and HTML structures. SiteScan inspects computed DOM styles, exact CSS tokens, repeating list structures, preloaded web fonts, and CDN asset URLs directly from the browser runtime.

No! Token extraction and merging across N pages are performed 100% deterministically in client-side JavaScript (`lib/token-merge.js`) with zero LLM API calls.

The exported `PROMPT.md` and `AGENTS.md` bundles are specifically formatted for Cursor, Claude Code, Antigravity, GitHub Copilot, Windsurf, and ChatGPT.

You can get a free Gemini API key from Google AI Studio (aistudio.google.com/apikey) and enter it into the extension Options page, or click 1-click Google Sign-In.

REVERSE ENGINEER ANY WEBSITE TO PROMPT