Screenshot-To-Code is a free and open-source tool that uses GPT-4 Vision API to convert any website or UI design screenshot to code. It takes screenshot image from you and then writes the HTML/CSS code to replicate the designs. It closely analyzes the given design, decides the HTML blocks and then write the code for it. For many designs, it can also generate mobile responsive code as well.
To design the elements, it uses Tailwind CSS and gives you the full code of the generated web design in output. The tool is free, but it uses GPT-4 Vision API which requires some paid credits. In my case, 1 successful run costed $0.05. If you are a front-end developer or UI/UX designer, then you will find it useful. You can self-host it on your own server or run it on personal computer in just a few seconds.
What is GPT-4 Vision?
GPT-4 Vision is an extension to the OpenAI’s SOTA language model, GPT-4! Now, not only can it comprehend text, but with its brand-new visual processing abilities, GPT-4 Vision, it can also analyze images. Picture this: you can feed in images and get text outputs that perfectly combine the relevant information from both the text and the image itself.
This remarkable breakthrough in the existing GPT-4’s capabilities, allowing it to tackle an even large variety of tasks and provide responses that are richer, more comprehensive, and simply more informative.
Here are some of the key capabilities of GPT-4 Vision:
- Object detection and recognition.
- Image captioning: GPT-4 Vision can generate natural language descriptions of images.
- Visual question answering: GPT-4 Vision can answer open ended questions about images.
Just these are the few top things GPT-4 can do. And the tool, Screenshot to Code I am mentioning here leverages these capabilities to new extent by generating code by learning from a given image.
How to Install and Run this Screenshot to Code Tool?
The very first you have to do is start by cloning the GitHub repository of the projects. Next, you change the directory to the root and then run these commands. But before all this, you need to make sure that you have Docker and Git installed.
git clone https://github.com/abi/screenshot-to-code
cd screenshot-to-code
Now, you need to set the OpenAPI key. Set it as environment variable. Also, start the docker container. Just run these two commands one by one.
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up
Now, when the UI is up, simply type http://localhost:5173 in the address bar and then main UI will show up. It looks like as shown below.
At this point, you have successfully run the tool and is ready to do its job. In the next section, you will see how to use it to convert an image to code.
Converting Screenshot to Code with this Tool:
Simply start by uploading a screenshot. You can give it any screenshot of a website or web component.
After a few seconds, it will show you the finally generated UI. It will look mostly like the input image.
You can also switch to code view to see the generated HTML and Tailwind CSS code. You can copy this code and download the final HTML file as well.
You can now use this tool in this way to convert a screenshot to code anytime. Just upload an image and then let it perform the magic. Each generation will cost you around 0.05 dollars, so, you also need to keep check on the usage graph in your OpenAI dashboard.
Closing thoughts:
If you are looking for an AI based tool that can generate code by reading a screenshot image, then the tool I have mentioned here will work perfectly. With this, you can take the capabilities of GPT-4 vision to the next level. Apart from the screenshot, you can simply give it an exported Figma UI design as an image and it will generate the code for you.
