StyleSnap

Capture a page's design system (colors, type, spacing, layout) as a design.md ready to paste into an AI coding agent.

Turn any website into a design file your AI coding agent actually follows. Open the side panel, click Capture, and StyleSnap reads the page's real design system: its colors, typography, spacing and components, including the dark theme. It writes them as a compact design.md you paste into your AI coding agent. The agent then builds in that site's style instead of its own generic look. WHAT YOU GET • design.md: a short brief for any agent, with the exact values. • DESIGN.md in Google's official format, which passes Google's own linter with zero errors and zero warnings. • Ready-to-use code exports, such as CSS variables, for when you want the values without the brief. TRUSTWORTHY VALUES • Every token says where it came from: declared by the site in its own CSS variables, measured on the rendered page, or inferred by StyleSnap and flagged for review. Declared values always win. • Reads CSS variables even when stylesheets are served from a CDN, and recognizes a brand color by its value whatever the site calls it. • Keeps headings apart from body text: their own font and their own color. • Checks real WCAG contrast on the pairs the page actually uses. • Tells you what it could not read: blocked stylesheets, a narrow window, a third-party widget. PRIVATE BY DESIGN • Runs entirely in your browser. No server, no account, no analytics. • Optional on-device AI (Chrome's built-in Gemini Nano) writes the design intent and names the colors. It never invents a value: every color comes from the page. • Settings and your last 40 captures stay in local storage on your device. ALSO • Pick element: capture a single component instead of the whole page. • Output in English or French.