SnapSpec

SnapSpec captures the visual design of any website and turns it into a structured Markdown blueprint — ready to paste into any AI coding tool. ── THREE CAPTURE MODES ── • Page Mode — Capture the entire page (viewport or full-page scroll). Extracts every design token, layout pattern, font, color, and component. • Element Mode — Click any element to inspect it. Hover to preview, click to capture — perfect for a single card, button, or nav bar. • Region Mode — Drag a rectangle over any area. SnapSpec captures everything inside — great for hero sections or multi-component blocks. ── WHAT YOU GET ── • Design Tokens — Colors, typography, spacing, borders, and shadows as reusable CSS custom properties • HTML Structure — Clean semantic HTML with proper nesting and accessible attributes • CSS Styles — Only meaningful styles — browser defaults and inherited values filtered out • Screenshots — Pixel-perfect capture of viewport, full page, or selected region • CSS Custom Properties — Extracts --var definitions from the page's stylesheets • Responsive Breakpoints — Media queries and breakpoint-specific styles • Hover & Pseudo States — :hover, :focus, ::before, and ::after styles from original CSS • Assets & SVGs — Images with dimensions, inline SVG source, and font references ── WORKS WITH ── Any LLM that accepts text ── PRIVACY FIRST ── • Zero data collection — no analytics, no telemetry, no servers • Everything runs locally in your browser • Screenshots and blueprints never leave your device • No account required • Open source friendly ── HOW TO USE ── Click the SnapSpec icon to open the side panel Choose a mode: Page, Element, or Region Capture — the blueprint appears in the side panel Click "Copy Blueprint" and paste into your AI tool Built by Cheppulabs — privacy-first tools worth keeping.