SnapSpec

About

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.