Design-to-Code

Screenshot to Code

An open-source tool that converts a screenshot, mockup, or Figma export into working HTML/CSS, React, or Vue code using a vision-capable AI model.

Pricing

Open source, free (hosted version available)

Visit site ↗

Screenshot to Code takes a single image — a screenshot, a hand-drawn mockup, or a Figma export — and uses a vision-capable AI model to reconstruct it as working front-end code, with no design file required.

Why it stands out

Works from any image, including screenshots of competitor products or a photo of a whiteboard sketch, no source design file needed.
Open source, so teams can self-host and swap in their preferred underlying model.
Multiple output targets, including plain HTML/CSS, React, and Vue.

Good for

Developers who want a fast starting point for cloning or prototyping a UI from nothing but an image.