Does my source code get uploaded?
Not while you are typing. The instant token scan, the clipping and every export run entirely in your browser. Your code is sent to the model only when you press Extract it, and only the text in the two boxes is sent.
Can it invent tokens that are not in my code?
The prompt forbids it, and the page checks it rather than trusting it. Every color and length literal in the consolidated token block is looked up in the source you submitted, and anything that is not there is listed under the block as an ungrounded value.
What formats can I export the tokens in?
CSS custom properties, a Tailwind theme.extend config, SCSS variables, a TypeScript token object, and DTCG/Figma Tokens JSON. The conversion happens in your browser from the token block, so switching format costs nothing and never re-runs the model.
What happens if I run it again after fixing things?
The result is compared against your previous extraction: each dimension shows how far it moved, the total shows its change out of 60, and the page counts how many of the previously flagged inconsistencies no longer appear.
What does a run cost?
The meter beside the button shows the maximum reserved before you run, and you are charged only what the run actually uses. The token scan, the examples and every export are free. Loading either bundled example replays a saved run and is never billed.
My file is huge — what gets sent?
Source is capped at 120,000 characters and stylesheets at 40,000. Over that, the middle is dropped and both ends are kept, with a marker in place of the removed section; the page tells you how many characters were cut.
Nothing to hand? Load the seeded with classic token drift, or the to see what a well-codified system looks like — both replay a saved run for free.
Paste or drop the source
The instant token scan extracts the mechanical signals for free while you type — distinct colors, near-duplicate shades, font and size zoos, off-grid spacing, radius and shadow drift, !important abuse — before you run anything.
The AI extracts the system
Six dimensions scored for codification: Color, Typography, Spacing & layout, Shape & depth, Components, Consistency. Every inconsistency quotes the exact code, names what it undermines, and gives the concrete token to use. The AI must also confirm or dismiss each scan signal — disagreements are shown, not hidden.
Commit the DESIGN.md
A consolidated token block built only from values in your paste — checked here in the browser, with any ungrounded value called out — exportable as CSS custom properties, a Tailwind theme.extend config, SCSS variables, a TypeScript object or DTCG/Figma Tokens JSON. Plus a ranked fix list, a complete DESIGN.md ready to commit, history saved to your account, and a score comparison against your previous run.
Derived from the @google-labs-code/extract-design-md skill.