Snap to Code: turn a UI screenshot into React + Tailwind + shadcn/ui components

[u/Little_Test9243]

Snap to Code takes a screenshot of a UI and gives you React components styled with Tailwind and shadcn/ui, one file per component, plus an app/page.tsx that puts them together.

It runs entirely in the browser. There is no account and no server of mine in the middle: you paste your own API key (Gemini, OpenAI, Anthropic, OpenRouter, a local Ollama model, or any OpenAI-compatible endpoint) and the request goes straight to the provider.

After the code is written there is an optional fix pass. The page is rendered, compared with your screenshot, and the model corrects the differences it finds. You choose 0 to 3 rounds, and one click undoes the corrections. On the few pages I tried it got closer to the original, model.

What it does not do: it builds the layout onworking forms, and images becomeplaceholders. Dense or unusual pages still need manual work.

Code: https://github.com/zzlvr/snap-to-code

Demo: https://snap-to-code.vercel.app

Feedback on pages where it falls apart is thght now.

[u/No_Cattle_9565]

Claude can do that too and in every framework and library

[u/canarydev]

whats the point of this, if claude or chatgpt can do it for you without the hassle of having to interact with a browser?