screenshot-to-code is an AI tool that converts visual designs into code. According to the project information, it can convert screenshots, mockups, Figma designs, and screen recordings into clean, usable code.
In terms of main capabilities, the project supports multiple output tech stacks, including HTML + Tailwind, React + Tailwind, and Ionic + Tailwind. The default AI models used include Gemini 3 Flash Preview and Gemini 3.1 Pro Preview, GPT-5.5 and GPT-5.4 Mini, Claude Opus 4.6 and Claude Opus 4.8, as well as z-image-turbo for image generation (based on Replicate). In addition, it also supports screen recording of website actions and converting them into usable prototypes, as well as a URL cloning feature.
In terms of usage, users can choose to run it locally or use the official hosted app. The official hosted product is located at screenshottocode.com. Running locally requires API keys and frontend/backend environments: the frontend is React/Vite, and the backend is FastAPI. Users need at least one model provider's key (OpenAI, Anthropic, or Gemini). The project strongly recommends using Gemini and Replicate to achieve the best screenshot-to-code accuracy—Gemini is responsible for asset extraction (reusing the real logos and images in the screenshot), and Replicate is responsible for image generation, background removal, and image editing. Configuring all four keys yields the best results and allows multiple models to be compared on each generation. The more keys there are, the app will automatically select a stronger model combination for each variant; with only one key, only that provider's models are used.
Local running steps include: the backend uses Poetry for package management (if not installed, you can run pip install --upgrade poetry), and after running the frontend, visit http://localhost:5173。用户也可以通过前端设置对话框（点击齿轮图标）配置 OpenAI, Anthropic, and Gemini keys, while Replicate must be configured in backend/.env as REPLICATE_API_KEY. The settings dialog will also show whether the backend supports screenshot preview. The screenshot preview feature (optional) allows the agent to render the page it generated in a headless browser and perform a visual check. It is automatically enabled after installing Chromium (automatically completed through the playwright install chromium step or the Docker image); if Chromium is missing, this tool is skipped.
The project also supports running with Docker. After executing the corresponding command in the root directory, the app will start at http://localhost:5173 , but in this mode file changes will not trigger a rebuild, so it is not suitable for development.
In terms of other configuration, if the backend runs on a different port, you need to update VITE_WS_BACKEND_URL in frontend/.env.local; if you need to change the backend host that the frontend connects to, configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL; if you cannot directly access the OpenAI API (for example, due to country restrictions), you can set OPENAI_BASE_URL to use a proxy, and the URL path must include v1. If a UTF-8 error occurs when running the backend on Windows, you can open the .env file with Notepad++ and set the encoding to UTF-8.
Applicable scenarios include: quickly converting mockups into frontend code, rebuilding pages from screenshots, converting screen recordings into interactive prototypes, and cloning the structure of existing websites via URL. In terms of limitations, the project information mentions that running with Ollama open-source models does not perform well and is not recommended; local running requires configuring API keys and frontend/backend environments yourself; the Docker method does not support hot reload during development.
