screenshot-to-code

Screenshot-to-code is a tool that takes an image, such as a screenshot of a website, a UI mockup, or a Figma design, and uses AI to convert it into working front-end code. The problem it solves is the tedious work of manually translating a visual design into HTML, CSS, or a component framework. You drop in an image and get back functional code that reproduces the visual layout.

The tool works by sending the image to an AI vision model, which analyzes the visual layout and generates corresponding code. It supports multiple output formats including HTML with Tailwind CSS (a popular utility-based styling framework), plain HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and SVG. The supported AI models include options from Google, Anthropic, and OpenAI. There is also experimental support for video input, where you can record a screen interaction and the tool will try to generate a working prototype based on what it sees. The architecture is a React frontend built with Vite (a fast build tool) and a Python FastAPI backend. You run both locally and connect them, or use the hosted version at screenshottocode.com.

You would use this if you are a designer who wants to quickly prototype from mockups without writing code, a developer who wants a starting point when implementing a design handoff, or someone experimenting with AI-assisted UI development. It requires an API key from at least one of the supported AI providers. The tech stack is TypeScript and React on the frontend, Python with FastAPI on the backend, and Poetry for Python dependency management. Docker is also supported for running the whole stack together.