Colors
The page palette grouped by use: backgrounds, text, borders, accents
Export Pro
Extract the design system from any website
Smart Design Inspector scans a page, pulls out its design tokens (colors, type scale and spacing) and exports them to Tailwind v4 @theme, CSS variables or a DESIGN_SPECS.md ready for your project or your AI assistant.
Pro feature, free in early access until the Pro launch (date TBD)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* CSS variables */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Design system · tucliente.example
## Colors
- primary #2563eb · buttons and links
- ink #0b0b0b · text
## Typography
- H1 · Inter 600 · 48 px / 1.1
## Spacing
- Section · 96 px01
The work it saves you
The problemYour client sends you a reference website: “I want something like this.” To match its style you need its colors, font sizes and spacing. Pulling them out with an eyedropper and DevTools takes dozens of clicks, and you end up with a loose list of values, not a system you can use.
02
What it exports
3 tokensTypography
Every style (H1-H6, body, buttons) with family, size, weight, line height and letter spacing, plus the @font-face or the Google Fonts link
Spacing
The scale of margins and paddings that repeats across the page
03
Three output formats
Copy or downloadTailwind v4 @theme
To paste into your CSS:
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}CSS variables
In :root, for any project without Tailwind.
DESIGN_SPECS.md
A document that explains the whole system. It works for your team and for handing to Claude, Cursor or any AI assistant when you ask it to build in that style.
04
How to use it
3 steps- 01
Open the reference website.
- 02
Choose Design → Export system.
- 03 Pro
Pick the format and copy or download it.
| Free€0forever | Pro€49one-time payment | |
|---|---|---|
| See the page’s palette, fonts and type scale | ||
| Export the design system: Tailwind v4 @theme, CSS variables or DESIGN_SPECS.md | — | Free early access |
06
Ethics and licenses
Get inspiredA website’s style (colors, sizes, spacing) isn’t protected. Its text, images, logos and commercial fonts are. The extension exports values, not content, and flags the license of every font. Use it for inspiration, not to copy a brand.
Is it free?
It’s a Pro feature. Until the Pro launch (date TBD), it’s in free early access for everyone. After that it’s included in the €49 one-time Pro.
Which version of Tailwind does it use?
Tailwind v4, with the @theme directive. If you use another version, export to CSS variables.
Does it extract the system from the whole website or from one page?
From the page you have open. If the other pages use the same system, the result is the same.
Does it work with an AI like Claude or Cursor?
Yes. The DESIGN_SPECS.md is written so an AI assistant can read it and build in that style.
Does it export components?
No. It exports tokens. To copy a section as a component, use website to Tailwind.
Which browsers and operating systems does it work on?
Chrome, Edge, Brave, Arc, Opera and Vivaldi, on Windows, Mac and Linux, from version 1.0. It works the same everywhere because the browser runs the extension, not the operating system. The code is ready to be brought to Firefox and Safari without a rewrite. While it’s in development, things may change.
08
Keep exploring
Related featuresColors
The page palette, an eyedropper and WCAG contrast for every text and background pair.
Website colors →Fonts
Family, weights, source, license and type scale for the whole page.
Website fonts →Website to Tailwind
Copy a section as JSX + Tailwind or as HTML/CSS.
Convert a website to Tailwind →Pricing
Free forever. Pro, €49 one time.
See pricing →Waitlist
Be one of the first to try it
Smart Design Inspector is in development. Leave your email and we’ll let you know the day it goes live on the Chrome Web Store, with the 3 Pro features free in early access.
One email on launch day and very few more · Unsubscribe in one click