[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 commandnpm 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 foldercd 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:
Thenpip 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
Thenyarn
yarn dev
It’s alive!
Now you can visit the frontend in the browser at localhost:5173
Possible Problems
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.