Media
3 items
Description
Capture a website's DOM structure, exact CSS, real content, CDN assets, and animations — then generate an AI build prompt. SiteScan inspects and captures a website's complete design specifications — DOM structure, computed CSS tokens, animations, real content, and CDN assets — directly from your active browser tab. It then synthesizes the captured data into an implementation-ready AI build prompt (PROMPT.md) and design token bundle. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • DOM Structure Extraction: Captures semantic component hierarchy, headings, CTAs, navigation links, and layout regions. • Computed CSS & Design Tokens: Extracts colors, fonts, spacing, shadows, and responsive breakpoints. • Animation Fingerprint: Detects static CSS keyframes, animation libraries (GSAP / Framer Motion), and scroll-reveal triggers. • Asset Inventory: Logs image, font, and SVG asset URLs referenced on the webpage. • AI Prompt Synthesis: Merges tokens and page specs to generate clean Next.js + Tailwind implementation prompts via Google Gemini AI. • Multi-Page Capture: Accumulate captures across multiple pages of the same domain into a single cohesive project bundle. • Downloadable Project Bundle: Exports PROMPT.md, design-tokens.json, and per-page specs in a clean ZIP file. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Navigate to any website in Chrome. 2. Click the SiteScan icon in your Chrome toolbar to open the Side Panel. 3. Click "Capture this page" to extract DOM hierarchy, CSS tokens, and viewport screenshot. 4. (Optional) Open DevTools > "SiteScan Assets" tab to capture network-level CDN assets. 5. (Optional) Sign in with your Google account to claim your free AI prompt generation credit, or enter your own Gemini API key in Options. 6. Click "Generate bundle" to create and download your complete PROMPT.md bundle. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIGN IN & ACCOUNTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Free Tier: 1 free AI prompt generation upon signing in with your Google account. • BYOK (Bring Your Own Key): You can also configure your own Google Gemini API key in the extension Options page. • Optional Pro Upgrade: Users who wish to unlock unlimited generations can upgrade via the in-app account section. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY & PERMISSIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SiteScan respects your privacy: • Page data is processed locally in your browser and is only analyzed when you explicitly click "Capture this page". • Your authentication is securely handled via Google OAuth and Firebase Auth. • We never sell or transfer your personal data to third parties. Permissions: • scripting / <all_urls>: Required to inspect DOM elements, styles, and animations on the active webpage when requested by the user. • storage: Required to save captured page tokens and your settings locally on your machine. • sidePanel: Displays the interactive inspection and export interface. • downloads: Allows downloading the generated ZIP bundle to your computer. • identity: Enables Google Sign-In for free prompt credit allocation. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT & FEEDBACK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Need help or found an issue? Contact: sayansenapati2544@gmail.com