[Tutorial]Install screenshot-to-code Step by Step

So, I recently discovered this really cool tool called Screenshot-to-Code that converts screenshots and designs into actual working code using AI. Pretty neat, right? While there’s a paid version out there, I decided to host it myself to save some money and learn in the process.

I’m writing this down mainly as a note to my future self (because let’s be honest, I’ll probably forget how I did this), but also for anyone else who wants to give it a try without spending money on the hosted version.

My disappointment on Claude: the claude.ai is independent from console.anthropic.com, which means even if you are a pro plan user on the former, you’ll have to pay for use of API keys for the latter.

Why I Chose to Self-Host

You know how it goes – sometimes the paid options are great, but:

• I love tinkering with things myself
• It’s totally free this way
• I get to learn how everything works
• Plus, I have full control over my stuff!

Dummy Tutorial For screenshot-to-code Installation

If you’re like me and using Windows 10, here’s what you’ll need:

Enough space on your computer (I’ll add the exact requirements once you share them)

A Windows 10 computer (obviously! 😄)

Some basic knowledge of using command prompt

Install GitHub Desktop

If you have GitHub Desktop installed, you don’t need to install Git separately – GitHub Desktop includes Git as part of its installation.

Clone using GitHub Desktop

• Open GitHub Desktop
• Click on “File” -> “Clone Repository”
• Go to the “URL” tab
• Paste this URL: https://github.com/abi/screenshot-to-code.git
• Choose where you want to save it on your computer
• Click “Clone”

Install Python

Go to Python.org’s download page
Click the yellow button that says “Download Python” (it will show the latest version)
Once downloaded, run the installer
Please see step7, Python 3.13 is very new, and some packages haven’t been updated to support it yet. Install Python 3.11 (which has better compatibility)

Go to https://www.python.org/downloads/release/python-3117/
⚠️IMPORTANT: On the first screen of the installer, check the box that says “Add Python to PATH”
Click “Install Now”, and wait for installation to complete and click “Close”

To verify Python installation:

• Open Command Prompt (Win+R -> cmd -> Enter)
• Type python --version
• You should see something like “Python 3.x.x”

Install Node.js

Go to Node.js download page
Download the “LTS” (Long Term Support) version

• Run the downloaded installer
• Follow the installation wizard: Click “Next”
• Accept the license agreement
• Keep clicking “Next” with default options
• Click “Install”
• Click “Finish”

To verify Node.js installation:

• Open a new Command Prompt
• Type node --version
• You should see something like “v18.x.x”
• Type npm --version
• You should see the npm version number

⚠️IMPORTANT: If you get “command not found” errors, you might need to restart your computer

Install Yarn

After Node.js is installed, type this command
npm install --global yarn
⚠️Wait for installation to complete

To verify yarn installation:

• In Command Prompt
• Type yarn --version
• You should see a version number

Go to the Backend Folder

In the cmd, go to the backedn folder
cd screenshot-to-code/backend
⚠️IMPORTANT: my backend folder is “D:\BaiduSyncdisk\github\screenshot-to-code\backend”

On Windows, if you want to change to a different drive (like from C: to D:), you need to:

cd /d D:\BaiduSyncdisk\github\screenshot-to-code\backend
because with cd D:\BaiduSyncdisk\github\screenshot-to-code\backend you will still be in Disk C:

Then
pip install poetry

Install Poetry dependencies

poetry install

⚠️I got errors here because I installed Python 3.13, which is very new and some packages haven’t been updated to support it yet.

So I have to uninstall Python 3.13 (go to windows settings to uninstall)and uninstall poetry and its virtual environment:

poetry env remove python

Install Python 3.11 (which has better compatibility)
Go to https://www.python.org/downloads/release/python-3117/
verify it’s installed:
python --version

Then do this again:
pip install poetry
Try installing dependencies again:
poetry install

successfully installed

Activate Backend Server

Make Sure you are in the right path:
cd /d D:\BaiduSyncdisk\github\screenshot-to-code\backend
poetry run uvicorn main:app --reload --port 7001

Run the frontend

Open a new cmd, go to the frontend path:
cd /d D:\BaiduSyncdisk\github\screenshot-to-code\frontend
Then
yarn

yarn dev

It’s alive!

Now you can visit the frontend in the browser at localhost:5173

Don’t forget to set the key

Tough we’ve set it in the previous step, you might want to set it again in the setting dialogue.

You might as well met this problem:

It means you don’t have enough credit in the AI balance.