Screenshot to Tokens

At a glance

Screenshot to Tokens is an open-source Node command-line tool that extracts a design token set from a live web app that has none. It captures the page, groups near-identical colors and spacing, names them as primitive, semantic and component tokens, and rewrites hardcoded values to var(--token, original). Pixel checks then confirm the rewrite changes nothing visible before a pull request opens. It began as a hackathon project in late October 2026.

Good fit

Front-end teams with an older web app whose CSS is full of hardcoded colors and spacing, who want a reviewable token file and a mechanical rewrite instead of a manual audit. It also fits teams chasing text contrast and visible keyboard focus problems, because it checks rendered pixels against WCAG contrast rules and blocks token changes that make text harder to read.

Consider something else when

Skip it if your app already has a design system, or if your styles live mostly in SCSS. The rewriter covers plain .css, Vue style blocks that are not lang="scss", inline styles and styled-components in JS and TS files, and fill and stroke on inline SVG in HTML. Also skip it if your pages hold sensitive data, since the author's policy sends only public pages to hosted models.

Start here

Clone the repository, run pnpm install --ignore-workspace, then pnpm demo. That runs the bundled acme-shop storefront through every stage with offline stand-ins and writes out/acme-shop/report.html, where you accept, rename or merge tokens. Next, point it at your own dev server with node src/cli.js run --url http://localhost:3000 --target ./src/styles, review, and use the pr command to branch and commit.

Cost and requirements

The code is Apache-2.0 and runs without any API key using heuristic stand-ins, though the author notes the offline segmenter reads DOM boxes and overstates quality. You need Node and pnpm, and capture uses Playwright. The model steps use SAM 3.1 on Meta's Model API and Muse Spark, hosted or as open weights on Baseten, with Ollama as a local naming option. The author reports one full dashboard run at about $0.007.

Limits to know

Every figure in the repository, including 0 px changes across 23 stable public sites, 291 passing tests and 99.9% agreement with axe-core, is the author's own measurement from a hackathon build. Live token preview needs a separate Sorb bridge or a script added to plain HTML pages, and voice-driven point-and-say editing runs locally only. Keys are read from the macOS Keychain or a .env file, and helper scripts assume a Mac with zsh.

Still unclear

• Will the project be maintained after the hackathon that ended on 4 November 2026?
• Does it run cleanly on Linux or Windows, given that the doctor command checks Mac headroom and keys can come from the macOS Keychain?
• What does access to SAM 3.1 and Muse Spark on Meta's Model API cost or require for a team outside the hackathon?