Design tokens
Extract colors, typography, spacing, radii, shadows, and reusable visual values.
A screenshot shows what a design looks like. SnapSpec explains how it is built—turning the page into structured context that an AI coding tool can actually use.
Page, element, region
A complete design blueprint.
HTML structure
Give AI tools a clear view of the hierarchy behind the pixels.
Computed styles
Capture the CSS rules that produce the selected page or component.
Responsive details
Record breakpoints and layout clues needed to recreate adaptive behaviour.
Assets and SVGs
Identify the visual resources that give a design its specific character.
Copy and go
Produce a clean Markdown specification ready for ChatGPT, Claude, or Cursor.
AI-ready, private by design
Inspect locally. Share intentionally.
SnapSpec performs its capture work in your browser. You decide which resulting blueprint to copy into another tool.
Local captureAnalysis happens in the extension.
No accountStart capturing immediately.
Selective modesCapture a page, element, or region.
Portable MarkdownYour blueprint works across AI tools.