userscripts/ui-token-extractor/README.md

UI Token Extractor

A userscript that reads the live, computed DOM of whatever page you're on and extracts design tokens — colors, typography, spacing, effects, component styles — into an on-screen panel you can select and copy from. No AI, no network requests, nothing sent anywhere. Inspired by uidrop.site's extraction categories; deliberately without its "send to Claude/ChatGPT/etc." step.

What it captures

• Colors — the most-used text and background colors on the page (by computed value, ranked by frequency), plus any :root CSS custom properties it can read from same-origin stylesheets (the usual home for a site's real design tokens).
• Typography — distinct font families, sizes, and weights in use, ranked by frequency.
• Spacing — distinct padding and margin values in use.
• Border radius — distinct values in use.
• Effects — box-shadows, CSS gradients, and any non-default opacity values.
• Components — up to 5 examples each of buttons, inputs, cards, and chip/badge/tag-like elements, with their full style snapshot (colors, padding, radius, border, shadow, font).
• Color scheme — whether the page matches prefers-color-scheme: dark, and whether the body background itself reads as dark.

How to use it

1. Install the script (see the top-level repo README).
2. On any page, click the floating 🎨 button in the bottom-right corner, or press Alt+Shift+U.
3. A panel opens with everything formatted as plain text in a read-only textarea. Click the text to select all of it, then copy normally (Ctrl/Cmd+C) — or use the Copy all button, which uses the browser's local clipboard API and never touches the network either.
4. Press Esc, click outside the panel, or hit Close to dismiss.

Guarantees

• No fetch/XMLHttpRequest/WebSocket/sendBeacon/GM_xmlhttpRequest anywhere in the script. Extraction only reads getComputedStyle() and same-origin stylesheet rules already loaded by the page you're viewing.
• No AI integration. This is deliberately a strict subset of what uidrop.site does — the "send to an AI tool" step from the original is not implemented here at all.
• @grant none — the script doesn't request any special userscript- manager permissions.

Known limitations

• Cross-origin stylesheets can't be read for :root custom properties (a browser security restriction, not something this script can work around) — the color/typography/spacing extraction from computed styles still works fine regardless, since that doesn't depend on reading stylesheet source.
• Component detection (buttons/cards/chips) uses heuristics (tag name, class name patterns, role="button") — it won't catch every custom component naming convention, and may occasionally mis-tag something.
• Capped at scanning 4,000 elements for performance on very large pages; the report notes when a page was truncated.