Website to Design Kit: DESIGN.md & Tokens from a URL

Paste any URL and get DESIGN.md, AGENTS.md, tokens.css and a W3C DTCG token file, read from the rendered page and its CSS. Free, no account needed.

What is in the kit

  • DESIGN.md: How to compose a page in this style: hierarchy, spacing rhythm, colour, copy and the patterns to avoid. Written for a coding agent to read before it writes UI.
  • AGENTS.md: The rules and the component catalogue the site appears to use, with the names other libraries give the same components.
  • tokens.css: Every value as a CSS custom property. Link it, then style with var(--token).
  • tokens.dtcg.json: The same values in the W3C Design Tokens format, for Style Dictionary or Tokens Studio.

How it reads a site

  1. Read the page. Flash fetches the HTML and its stylesheets, and renders the page in a headless browser at the same time, so values set by JavaScript or hidden behind a build step still count.
  2. Name what it finds. A model sorts the colours, type, spacing, radii and shadows into a token set and picks out the components the markup repeats. Custom properties the site already defines keep their names.
  3. Write the files. The same writers Flash uses for a design system you own produce the four files, so the kit you download here is the kit you would get after signing up.

Questions

Is it free?

Yes, with no account. There is an hourly limit per address and a daily limit across everyone, because every new site costs a model call. A site someone scanned in the last day is served from the cache and does not count.

Can I use the values?

The kit is a reference of a site's style values, not its source. Respect the site's brand and licensing if you reuse anything beyond them. The kit carries no logo.

Why do some sites come back thin?

A site that blocks automated browsers, or builds its styles at runtime behind a login, gives the scan little to read. For pages the server cannot reach, Flash Inspect reads them in your own browser.

What does Open in Flash do?

It saves this scan as a page you can share and claim. Claiming it turns the tokens into a design system in your account, where you can edit them, publish versions and connect a repo or an AI editor.