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
Break down the design system of an inspiration or competitor site in seconds, instead of measuring by hand.
Skip picking CSS variables out of DevTools one by one — start from a ready-made DESIGN.md instead.
Quickly audit a client site's brand consistency before you ship.
Browse the community gallery and import any published site's tokens as Figma variables with one click.
Features
Instead of scraping CSS out of DevTools, StyleKit turns the design DNA of the page you're looking at into something structured.
Color palette, typography, spacing scale, shadows, and border-radius — on the active tab, one click, fully automatic.
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.
A readable, structured markdown file for developers; commit it to your repo or send it to a teammate.
Paste extracted tokens into the companion Figma plugin, or one-click import any published site's tokens from the gallery as native styles/variables.
Share a site's extracted tokens to the community gallery; visible with its source URL, entirely opt-in.
Privacy
One optional community feature is switched on deliberately — everything else stays in your browser.
Pricing
The Chrome extension and companion Figma plugin are free, forever.
Free
Chrome extension and Figma plugin, no account required
$0 — forever
You can also download the Figma plugin for free from the Figma Community: Open in Figma Community
FAQ
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.
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.
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.
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.
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.
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.
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
