Look at any website.
Extract its design system in seconds.
Colors, typography, spacing scale, shadows, and border-radius — StyleKit extracts them in one click and saves a structured DESIGN.md file. Working in Figma? The companion plugin imports the same tokens directly as native styles and variables.
Only activeTab + scripting permissions · No account or credit card · Nothing runs in the background
Extracted tokens
# DESIGN.md
## Colors
--color-primary: #8b5cf6;
--color-accent: #10b981;
## Typography
font-family: Inter;
## Spacing
4px 8px 16px 24px 32px
0
permissions: activeTab + scripting
$0
account or credit card
0
token categories extracted
0%
local by default
Who it's for
Anyone who works with design systems
UI/UX designers
Break down the design system of an inspiration or competitor site in seconds, instead of measuring by hand.
Frontend developers
Skip picking CSS variables out of DevTools one by one — start from a ready-made DESIGN.md instead.
Agencies & production teams
Quickly audit a client site's brand consistency before you ship.
Figma users
Browse the community gallery and import any published site's tokens as Figma variables with one click.
Features
One click, one complete design breakdown
Instead of scraping CSS out of DevTools, StyleKit turns the design DNA of the page you're looking at into something structured.
Design token extraction
Color palette, typography, spacing scale, shadows, and border-radius — on the active tab, one click, fully automatic.
Minimal permissions, maximum trust
Requests only activeTab and scripting — no broad host permissions, no cookie or history access. It only reads the page you're actively looking at, nothing else, nothing in the background.
DESIGN.md export
A readable, structured markdown file for developers; commit it to your repo or send it to a teammate.
Import via Figma plugin
Paste extracted tokens into the companion Figma plugin, or one-click import any published site's tokens from the gallery as native styles/variables.
Publish to Gallery (optional)
Share a site's extracted tokens to the community gallery; visible with its source URL, entirely opt-in.
Privacy
Privacy-first by default
One optional community feature is switched on deliberately — everything else stays in your browser.
Runs locally
- Extraction happens entirely in your browser, no data is sent to any server
- Only activeTab + scripting permissions — no broad host permissions
- No access to cookies, browsing history, or other tabs
- Nothing runs in the background — only when you actively trigger it
Optional: publish to the gallery
- Click "Publish to Gallery" and that page's extracted tokens plus its source URL are shared in a public community gallery
- From the Figma plugin, browse that same gallery and import any published site's design in one click
- Without that click, nothing is shared — the default behavior is entirely local
Pricing
Completely free, no account needed
The Chrome extension and companion Figma plugin are free, forever.
Free
Chrome extension and Figma plugin, no account required
$0 — forever
- Unlimited token extraction
- Unlimited DESIGN.md exports
- Figma plugin included (also free)
- Community gallery access via Publish to Gallery
- No account or credit card required
- Automatic updates via the Chrome Web Store
You can also download the Figma plugin for free from the Figma Community: Open in Figma Community
FAQ
Frequently asked questions
Is StyleKit really free, do I need an account?
Yes, it's completely free and no account is required. Install the Chrome extension and start using it right away; the companion Figma plugin is free as well.
Why does the Chrome extension ask for so few permissions?
StyleKit's manifest declares only activeTab and scripting. No broad host permissions, no cookie or browsing history access — it only reads the page you're actively looking at, nothing else.
Where does my data go?
Extraction happens entirely in your browser; no data is ever sent to a server. The one exception is the separate, explicitly opt-in "Publish to Gallery" feature.
What does "Publish to Gallery" do, does it share my data?
Clicking that button shares that page's extracted tokens and its source URL in a public community gallery, browsable from the Figma plugin. Without that click, nothing is shared — the default is entirely local.
How do I use the Figma plugin?
The Figma plugin lets you browse the community gallery and one-click import any published site's design tokens as native Figma styles/variables. You can also paste in tokens you extracted yourself with the Chrome extension.
What exactly is in the DESIGN.md file?
The extracted color palette, typography scale, spacing values, shadows, and border-radius values in structured markdown format — a readable reference file developers can commit straight to a repo.
Extract your next project's design system today
Add it to Chrome, try it on any site — no account or credit card needed.
Have a feature request or partnership idea? Write to us
We'll get back to you by email as soon as possible.
Instagram: @digitalexpertde