# 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.

- Source: https://flashdsm.com/tools/website-design-kit
- Site: Flash DSM (https://flashdsm.com)

---

## 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.