WebSnatch

Reverse-engineer any website's design system. Extract colors, fonts, spacing, animations, and generate AI-ready prompts to recreate components and full pages with pixel-perfect accuracy. Whether you're rebuilding a landing page, studying how top sites are built, or pulling design tokens for your next project — WebSnatch gives you everything in one click. 🎯 VISUAL INSPECTOR - Hover over any element to see its complete CSS properties - Visual box model showing margin, padding, and border - Measure pixel distances between elements (Figma-style guides) - Generate detailed AI prompts to recreate any component - Export styles as Tailwind CSS or vanilla CSS 🎨 COLOR STUDIO - Native EyeDropper tool to grab any color on screen - Automatic palette extraction from any webpage - Organize colors by role: text, background, border, accent - WCAG contrast checker for accessibility compliance - Copy in HEX, RGB, or HSL formats 🎭 THEME STUDIO - Apply preset themes (Dark, Warm, Ocean, Forest, High-Contrast) to any site in real time - Swap colors and fonts with live preview - Semantic color slot mapping for precise control - Undo/redo support and exact color replacement rules ✍️ TYPOGRAPHY & ASSETS - Scan all fonts, weights, sizes, and line heights on a page - Typography scale detection (Minor Third, Perfect Fourth, etc.) - Browse curated font presets - One-click download for images and SVGs ⚡ ANIMATION DETECTOR - Detect GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, AOS, and CSS animations - View timing, easing, and trigger details - Scrub through detected animations 📐 SPACING ANALYSIS - Detect recurring margin and padding patterns - Identify the spacing scale used across the page 🤖 SITE CLONE & AI PROMPT GENERATION - Generate comprehensive prompts to recreate entire pages - Includes screenshot, HTML structure, and design tokens - Works with ChatGPT, Claude, Gemini, and other AI tools 🔍 DEEP SCAN - Identify accessibility violations and missing alt text - Detect SEO issues like missing meta tags and heading hierarchy - Flag UX red flags: excessive DOM nesting, layout shifts, missing landmarks 🛠️ TECHNOLOGY DETECTION - Identify CSS frameworks, animation libraries, and JavaScript tools used on any site 📌 ADDITIONAL FEATURES - Side panel mode for persistent analysis while browsing - Record user interaction flows (clicks, navigation, inputs) - Works on any website with no setup required Built for developers, designers, and anyone who learns by deconstructing great websites.