Design Snap
Generate a style guide from any website
Design Snap is a free Chrome extension that generates a style guide from the website in front of you: the color palette ranked by usage, the type scale, radii, shadows and CSS variables, with a live preview rebuilt from those values. Share it as a downloadable Design DNA card (PRO) or export it as Tailwind, shadcn/ui, CSS, Figma or Style Dictionary tokens.
Rated 5.0/5 on the Chrome Web Store · read the reviews · Free plan · No account · 100% local analysis
How to generate a style guide from a website
Documenting an existing site's style guide by hand takes hours of DevTools work. Design Snap does the inventory in about a second, from the page's computed styles.
-
Install
Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.
-
Extract
Open the website and press Extract. Colors, typography, radii, shadows and variables appear in tabs, with a live preview in the Theme tab.
-
Share or export
Download the Design DNA card (PRO) to share the style guide, or export it as code for your project.
What goes into a website style guide
A web style guide documents the visual rules an interface follows: the color palette (brand, neutrals, feedback colors), the typography (families, type scale, weights), the shape language (border-radii, shadows) and, in modern codebases, the tokens that encode all of it as variables. Design Snap extracts each of these from the live page.
Three common reasons to generate one
- Auditing your own site. Years of patches leave 14 grays and 9 radii. Extracting the real values shows the drift, ranked by usage, so you know which ones to keep.
- Inheriting a project without documentation. No Figma file, no token repo — just a production site. The extraction is a starting style guide in seconds.
- Building a mood board or a client brief. Capture the style guide of reference sites and compare them side by side with snapshots.
A style guide you can ship, not just read
A PDF style guide gets out of date. Design Snap outputs the same information as code — tailwind.config.js, CSS variables, shadcn/ui theme, Figma tokens or standard Style Dictionary v3 tokens — so the style guide becomes the source of truth in your project. For AI-assisted work, the AI prompt and AGENTS.md exports turn it into rules a coding agent follows.
The inventory, done for you
Everything a style guide documents, read from the live page and organized in one place.
- Palette ranked by real usage, exact hex values
- Type scale, weights and line-heights
- Radii and shadows deduplicated with previews
- Live preview rebuilt from the extracted values
- Downloadable Design DNA card (PRO) and nine code exports
Style guide generator — FAQ
Install the Design Snap Chrome extension, open the website and press Extract. You get the color palette ranked by usage, the type scale, radii, shadows and CSS variables, which you can share as a Design DNA card (PRO) or export as code.
Yes. The Figma tokens export (free) produces a Tokens Studio JSON file you can import into Figma.
Yes. Snapshots save extractions so you can come back to them — 5 on the free plan, unlimited with PRO.
Yes. Design Snap works on any page Chrome can open, including localhost and staging environments behind a login.