Trace
Paste a screenshot and get a React component you can run and edit. Gemini 2.5 Flash recreates the layout from a shadcn-style component catalog, then shows which part of the screenshot became which component, with a confidence tag on each. Won the DEV GitHub Finish-Up-A-Thon.
- Role
- Creator
- Years
- 2026
- Status
- Live
- Automated tests
- 30
See it work
Real output, captured from the product. Open Inspect to see how it got there.
Trace
Screenshot to React, grounded
- 8 grounded
- 5 inferred
- 0 guessed
The brief
Screenshot-to-code output often ignores the design system it has to fit into, and gives you no way to check it.
The build
Generation is limited to a component catalog listed in the prompt, so no vector database is needed. An inspector marks each element as grounded, inferred or guessed. The preview runs in an editable Sandpack sandbox, generated code is compile-checked and re-prompted on failure, and axe-core scores accessibility.
What shipped
Winner of the DEV GitHub Finish-Up-A-Thon, July 2026. Live at trace-seven-ashen.vercel.app.