SnapSpec

Three capture modes

Page. Element. Region.

Choose exactly what you want to capture — from a full page overview to a single button.

📄

Page Mode

Capture the entire page — viewport or full-page scroll. Extracts every design token, layout pattern, font, color, and component in one shot.

🔎

Element Mode

Click any element to capture it. Hover to preview, click to extract — perfect for inspecting a single card, button, or navigation bar.

▢

Region Mode

Drag a rectangle over any area of the page. SnapSpec captures everything inside — great for sections, hero areas, or multi-component blocks.

What you get

A complete design blueprint.

Everything an AI tool or developer needs to recreate the design — structured as clean Markdown.

🎨

Design Tokens

Colors, typography scales, spacing values, border radii, and shadows — extracted as reusable CSS custom properties.

💻

HTML Structure

Clean semantic HTML with proper nesting, closing tags, and accessible attributes. Ready to paste into any project.

🖌

CSS Styles

Only meaningful styles — browser defaults and inherited values are filtered out. Grouped by semantic class names.

🖼

Screenshot

Pixel-perfect screenshot of the captured area — viewport, full-page scroll, or cropped region. Copy to clipboard instantly.

🔧

CSS Custom Properties

Extracts --var custom properties from the page's stylesheets, so you get the design system, not just computed values.

⚙

Responsive Breakpoints

Media queries and breakpoint-specific styles extracted from the page's CSS — understand how the design adapts.

👁

Hover & Pseudo States

Captures :hover, :focus, ::before, and ::after styles from the original stylesheets.

🌐

Assets & SVGs

Images with dimensions and alt text, inline SVG source code, and font references — everything needed to match the original.

📋

Copy & Go

One click to copy the full Markdown blueprint or the screenshot. Paste directly into ChatGPT, Claude, Gemini, Cursor, or any AI tool.

FAQ

Common questions.

What does SnapSpec actually capture?

SnapSpec captures the visual design of a webpage — colors, fonts, spacing, layout, HTML structure, CSS styles, images, and SVGs. It outputs a structured Markdown blueprint that an AI tool or developer can use to recreate the design. It does not capture JavaScript logic, backend data, or user-entered content.

Does it work on Edge too?

Yes! SnapSpec works on both Chrome and Edge. Both browsers support Manifest V3 extensions. Install from the Chrome Web Store or the Edge Add-ons store.

Does it send my data anywhere?

No. Everything runs locally in your browser. SnapSpec makes zero network requests. Your screenshots, blueprints, and page data never leave your device. There are no servers, no analytics, and no telemetry.

What AI tools work with SnapSpec blueprints?

Any AI tool that accepts text input. The blueprint is plain Markdown, so it works great with ChatGPT, Claude, Gemini, Cursor, GitHub Copilot, v0, Bolt, and any other LLM-based coding assistant. Just copy and paste.

Can I capture pages behind a login?

Yes. SnapSpec captures whatever is currently rendered in your browser tab. If you're logged in and can see the page, SnapSpec can capture it. It cannot capture chrome:// pages, extension pages, or the browser's internal UI.

Is it free?

Yes, completely free. No premium tier, no feature gates, no subscription. All features are available to everyone.