Stop Inspecting Elements by Hand — My New Extension Scrapes Entire Design Systems in One Click

If you've ever joined a new project and spent the first two hours right-clicking every button to figure out what shade of gray the team uses, this post is for you.

I just shipped a browser extension that scrapes a site's entire CSS design system — colors, typography, spacing, shadows, component tokens — and sends it instantly to Claude, Cursor, GPT, Manus, or Lovable. One click. No DevTools. No copy-pasting hex codes.

UIDrop — Read any site's design system in one click

Colors, fonts, spacing and components from any live site — sent straight to Claude, Cursor or ChatGPT. Free Chrome extension.

uidrop.site

The Problem: Manual Inspection is a Tax on Your Time

Every frontend developer knows the ritual. You open a Figma handoff, a staging environment, or a competitor's site, and you need to understand how it's built. So you:

Open DevTools
Click on a heading — inspect the font, the size, the weight, the line-height
Click on a button — check the border-radius, the padding, the background color
Repeat for 40 more elements
Try to mentally reconstruct a coherent system from the noise

This isn't design work. It's archaeology.

The worst part? You're not even capturing the system — you're capturing fragments. You might notice the primary button uses #2563EB, but miss that there are six other blue variants defined in custom properties elsewhere. You get the font size but not the scale. You see one shadow but not the elevation system behind it.

Manual inspection gives you data points. What you actually need is the design language.

What the Extension Does

The extension runs a content script that walks the entire computed stylesheet of any page — including CSS custom properties (design tokens), utility classes, component styles, and media query breakpoints. It structures all of that into a clean, readable format and gives you a one-click send to whichever AI tool you're working in.

Here's what gets extracted:

Color tokens — every --color-* variable and their resolved values
Typography — font families, size scales, weights, line-heights
Spacing system — margin/padding scales, gap values
Border radius & shadows — the full elevation and rounding vocabulary
Breakpoints — the responsive grid behind the layout
Component patterns — repeated class structures that hint at a component system

Once it lands in your AI tool of choice, you can ask things like:

"Replicate this button style in Tailwind"
"What's the spacing scale? Give me a cheat sheet"
"Build a card component that matches this design system"

And the AI actually has enough context to do it accurately — instead of hallucinating a generic design system that vaguely resembles what you wanted.

Why This Matters for AI-Assisted Development

AI coding tools are powerful, but they're only as good as the context you give them. When you paste a vague prompt like "make it look like the existing site", you're asking the model to guess. It will guess wrong.

When you give it the actual design system — the tokens, the scale, the vocabulary — it stops guessing and starts matching. The output goes from "plausibly styled" to "actually consistent with your codebase."

This is especially useful when:

Onboarding to a legacy codebase with no design documentation
Reverse-engineering a competitor's UI for inspiration or competitive analysis
Handing off context to Cursor or Lovable so generated components stay on-brand
Auditing design inconsistencies before a refactor

The extension essentially turns any website into a structured design brief that your AI tools can work from immediately.

The Time Math

Let's be honest about what manual inspection costs:

Task	Manual	With Extension
Extract full color palette	15–30 min	< 5 seconds
Document typography scale	20–40 min	< 5 seconds
Understand spacing system	30–60 min	< 5 seconds
Brief an AI tool with full context	Not really feasible	One click

For a mid-complexity site, you're looking at 1–2 hours of manual work replaced by a single click. Across a month of projects, that compounds fast.

What's Next

A few things on the roadmap:

Token diff mode — compare two sites' design systems side by side
Export to design tokens JSON (Style Dictionary format)
Figma sync — push extracted tokens directly into a Figma Variables file
CI integration — flag design drift between your staging and production stylesheets

Try It

The extension is now available for Chrome. If you work with design systems, AI coding tools, or just spend too much time in DevTools — give it a shot and let me know what you think.