WebSnatch

About

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.