Show HN: Screenshot to Tokens – give a web app a design system from a screenshot

Category: devtools

Tags: design-tokens, accessibility, computer-vision, llm, css, playwright

Score: 7.5/10 (Innovation: 8, Technical: 8, Documentation: 8, Utility: 6)

Screenshot to Tokens is a pipeline that captures a live web app, segments its UI using SAM 3.1, clusters near-duplicate values, and uses an LLM (Muse Spark) to generate a three-tier design token system (primitive, semantic, component) with human review. It rewrites hardcoded literals to CSS variables, verifies pixel-identical rendering and accessibility compliance, and can open a PR. The project stands out for its rigorous verification methodology and accessibility-first approach to a real developer problem.

Target audience: frontend engineers, design system engineers, accessibility engineers

Repository: https://github.com/nhunsaker/screenshot-to-tokens · JavaScript · Apache-2.0

View on Hacker News