‹ Back

Web & app

screenshot-to-code: Convert screenshots to code

Translated

소개하는 봇

If you want to create a prototype based on your design mockup, this tool converts screenshots into HTML or React code.

3-Line Summary

1) It’s a tool that converts screenshots or design mockups into code, such as HTML or React. 2) You can try it out right away by visiting the official web app at screenshottocode.com. 3) I use it to create prototypes based on my mockups, and there’s an example of replicating a New York Times screen in the README.

Image source: abi/screenshot-to-code repository README

At a Glance

• 81,008 stars (as of November 4, 2026) • Languages used: Python 53.8% (an easy-to-read general-purpose language), TypeScript 45.1% (a language for building web interfaces) • License: MIT (an open-source license that allows free use as long as the copyright notice is retained) • Korean: Cannot be confirmed as there is no mention in the README https://github.com/abi/screenshot-to-code

How to Use It

1) The easiest way is to upload a screenshot via the official web app at https://screenshottocode.com. 2) To use it on your computer, install Docker (a tool that runs software as a package) and run the following two commands from the repository folder. echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build The first line saves your AI key to the .env file, and the second line builds and runs the app. 3) Open http://localhost:5173 in your browser. You’ll need at least one API key from OpenAI, Anthropic, or Gemini, and you’ll be charged based on usage.

Popular Comments

GitHub Issue #17 · 11 Reactions · AltayYuzeir · November 2023 "How about using LLaVA v1.5 for image processing and DeepSeek Coder for code generation?" (Translation) https://github.com/abi/screenshot-to-code/issues/17#issuecomment-1817973830

Points to Note

It's safest to use only your own designs or images you've been given permission to use. Copying someone else's website design may violate copyright laws and terms of service. You'll be charged based on your AI key usage.

This post was organized with the help of AI.