# Metatoy

- **Event:** [Meta Global AI Developer Hackathon](https://cerebralvalley.ai/e/meta-ai-developer-hackathon)
- **When:** Oct 26, 12:00 PM – Nov 4, 9:00 PM (EST)
- **Where:** Online
- **Team:** [Nathan O'Brien](https://cerebralvalley.ai/u/metatoy)
- **GitHub:** https://github.com/nhunsaker/screenshot-to-tokens
- **Demo video:** https://www.youtube.com/watch?v=RpnO9HfF98E
- **Gallery:** https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery
- **Page:** https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1254

Screenshot to Tokens: a design system from a screenshot in seconds, and a more accessible app from the tokens in one change.

Most web apps have no design tokens. Every color is a bare value typed into a stylesheet, with no name to say what it's for, so neither a person nor an AI can change it safely in one place. Low-contrast text, the web's most common accessibility failure (on 84% of home pages, WebAIM 2026), stays unfixed for exactly that reason.

Screenshot to Tokens points at a live web app and gives it a design system in seconds:

1. SAM 3.1 reads the interface from pixels, finding the buttons, inputs and icons the code never describes (0 of 8 buttons from the page's code, 8 of 8 from SAM, on a page built of divs and a canvas).
2. Muse Spark names every value on three tiers (the raw color, what it means, where it's used) with a reason for each, in 3 to 5 seconds.
3. A person reviews it: accept, rename, merge.
4. The hardcoded values in the real source are rewritten to `var(--token, original)`.
5. Four checks run before any pull request: zero pixels changed, merged colors invisible, the cleanup shown for approval, and no text made harder to read (measured on the rendered pixels).

Once the tokens exist, making the app more accessible is one checked change. With Point and say, you click a control in the live app and say the fix ("This label is too light. Make it readable, keep our gray."): Meta's speech model transcribes it, SAM outlines what you clicked, the change is applied as a token, never raw CSS, and every text pair on the page is re-checked. On Argon Dashboard that one change takes 21 labels from 2.95:1 to 4.53:1. A focus-ring request takes visible keyboard focus from 0 to 25 of 25 controls. A request that would make any text harder to read is blocked and reverted.

Tested on 28 public sites we didn't build: 3,687 values rewritten, 0 pixels changed on all 23 stable sites with edits. Our text-contrast check agrees with axe-core 4.14 on 99.9% of its verdicts and settles 97% of the items axe-core leaves for a person. Open source (Apache-2.0), with every number in the demo traceable to a committed run summary.

Live demo: https://s2t.sorbcloud.com (try Point and say at /try/). Pull request on our fork of Argon Dashboard React: https://github.com/nhunsaker/argon-dashboard-react/pull/2

## More from Meta Global AI Developer Hackathon

- [sparsadev](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1251)
- [Food Bundles](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1252)
- [WRU](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1253)
- [Girl Dad Gaming](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1255)
- [Shine](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1256)
- [StitchCheck](https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1257)

---

Markdown version of https://cerebralvalley.ai/e/meta-ai-developer-hackathon/hackathon/gallery/1254. Site index for agents: https://cerebralvalley.ai/llms.txt · full text: https://cerebralvalley.ai/llms-full.txt