63 lines
2.9 KiB
Markdown
63 lines
2.9 KiB
Markdown
|
# 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](https://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.
|