Screenshot To Tokens

Screenshot To Tokens is a command-line tool that extracts design tokens from web app screenshots and rewrites hardcoded styles to CSS variables.

Screenshot To Tokens captures a live web app or static page to build a complete design system from pixels. It uses SAM 3.1 to segment the interface and Muse Spark to name a three-tier token set consisting of primitive, semantic, and component tokens. Users can review, accept, rename, or merge tokens before the tool rewrites hardcoded literals to CSS variables. Multiple verification checks ensure the rewrite preserves the original appearance and maintains text contrast compliance. It supports plain HTML, CSS, Vue files, and React applications with styled components.

Screenshot To Tokens at a glance

Best for: Designer, Software engineer
Runs on: CLI, Web, macOS, Windows, Linux, self-hosted, open source
Pricing: Free
Released: November 2026
Category: AI chat assistant
Website: github.com/nhunsaker/screenshot-to-tokens

Key features

Segment web interfaces from pixel data using SAM 3.1
Name a three-tier token set with Muse Spark
Rewrite hardcoded literals to CSS variables automatically
Run verification checks to guarantee pixel-identical output
Preview token changes live in the web app
Audit text contrast against accessibility standards
Support point-and-say voice commands for edits

Use it for

Extract a design system from an existing web application
Rewrite hardcoded style values to CSS variables safely
Audit and fix text contrast and accessibility issues
Generate dark mode token files for dashboards

Alternatives to Screenshot To Tokens

Flowstep — Generates interactive multi-screen UI directly from text prompts, specs, or code.
UI Design Editor — Collaborate directly with AI assistants and people on a shared canvas without signups.
OpenFlowKit 2 — Generates architecture diagrams automatically from GitHub repositories and code files.
Designobo — Prototype complex web flows on an infinite canvas using text or image input.
Diagramly — Generates hand-drawn diagrams instantly from plain text or AI prompts without sign-up.
Text Generation WebUI — Run local LLMs with multiple backends, multimodal input, and tool calling 100% offline.

All Screenshot To Tokens alternatives