screenshot-to-code README

The project's README from github.com/abi/screenshot-to-code. As one markdown file: README.md.

screenshot-to-code

Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. The easiest way to try this is using the official, hosted product at screenshottocode.com →

https://github.com/user-attachments/assets/ec08a5e6-9606-41c5-b03a-1bf47dfeba75

Supported stacks:

Default AI models:

See the Examples section below for more demos.

Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.

google in app quick 3

🛠 Getting Started

Choose the path that fits what you want to do:

Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend.

API keys

You need at least one model provider key (OpenAI, Anthropic, or Gemini). Gemini and Replicate are strongly recommended for the best quality of screenshot-to-code accuracy — Gemini powers asset extraction (reusing the real logos/images from your screenshot) and Replicate powers image generation, background removal, and image editing. Adding all four keys gives the best results and lets you compare multiple models per generation.

Key Required? What it unlocks
OPENAI_API_KEY One of these three GPT code-gen variants (GPT-5.5, GPT-5.4 Mini)
ANTHROPIC_API_KEY One of these three Claude code-gen variants (Opus 5, Opus 4.8, Fable 5, Sonnet 4.6)
GEMINI_API_KEY One of these three — strongly recommended Gemini code-gen variants (3 Flash, 3.1 Pro); extracts real assets from the screenshot; required for video mode
REPLICATE_API_KEY Strongly recommended Image editing, background removal, and Replicate-backed image generation — without it, edit_images and remove_backgrounds are unavailable

With more keys, the app automatically picks a stronger mix of models per variant; with a single key it uses that provider's models only.

If you'd like to run the app with Ollama open-source models (not recommended due to poor-quality results), follow this comment.

Run the backend (I use Poetry for package management; run pip install --upgrade poetry if you don't have it):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
poetry install
# Install the Chromium browser used by the screenshot preview tool.
# On Linux, use `poetry run playwright install --with-deps chromium` to also
# install the required system libraries (needs sudo/apt).
poetry run playwright install chromium
poetry env activate
# run the printed command, e.g. source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

You can also set up OpenAI, Anthropic, and Gemini keys using the settings dialog in the frontend (click the gear icon after loading the app). Replicate must be configured in backend/.env as REPLICATE_API_KEY. The Settings dialog also shows whether screenshot preview is available on your backend.

Screenshot preview (optional) lets the agent render its own generated page in a headless browser and visually check its work. It's enabled automatically once Chromium is installed (the playwright install chromium step above, or automatically in the Docker image). If Chromium is missing, the app just skips the tool — the Settings dialog shows whether it's available.

Run the frontend:

cd frontend
pnpm install
pnpm dev

Open http://localhost:5173 to use the app.

If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in frontend/.env.local.

Docker

If you have Docker installed, run this from the root directory:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

The app will be up and running at http://localhost:5173. Note that you can't develop the application with this setup, as file changes won't trigger a rebuild.

🙋‍♂️ FAQs

📚 Examples

NYTimes

Original Replica
Screenshot 2023-11-20 at 12 54 03 PM Screenshot 2026-06-15 at 3 06 37 PM

Instagram

https://github.com/user-attachments/assets/a335a105-f9cc-40e6-ac6b-64e5390bfc21

Hacker News

https://github.com/user-attachments/assets/205cb5c7-9c3c-438d-acd4-26dfe6e077e5

screenshot-to-code (abi/screenshot-to-code)

Searching Database…

80.4K ·GitHub
Screenshot-to-code
Что это такое?Screenshot-to-code превращает скриншоты, макеты, дизайны из Figma и записи экрана в аккуратный и работающий код с помощью ИИ-моделей вроде GPT, Claude и Gemini.
Это веб-приложение, которое работает в сети, или то, что я запускаю у себя?И то, и другое: есть готовый продукт на screenshottocode.com для быстрого использования, а также можно запустить приложение локально, с фронтендом на React/Vite и бэкендом на FastAPI, чтобы развернуть его у себя и настроить под себя.
Как запустить это локально?Запустите бэкенд через Poetry (pip install --upgrade poetry), а фронтенд на Vite запустите отдельно, или используйте входящую в проект Docker-конфигурацию, чтобы поднять всё приложение сразу.
Нужны ли мне API-ключи OpenAI, Anthropic или Gemini?Да, нужен хотя бы один из ключей: OPENAI_API_KEY, ANTHROPIC_API_KEY или GEMINI_API_KEY; для лучшего качества и извлечения ресурсов настоятельно рекомендуются ключи Gemini и Replicate.
Могу ли я использовать бесплатные локальные модели вместо платных API?Открытые модели Ollama поддерживаются, но их не рекомендуют: результаты заметно хуже, чем у стандартных коммерческих моделей.
Работает ли это на Windows, а не только на Mac и Linux?Да, работает на всех платформах; в README даже есть отдельное исправление для Windows, связанное с ошибками кодировки UTF-8 при редактировании файла .env.
Какие стеки для результата поддерживаются?HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap и Ionic+Tailwind.
Может ли он превратить и запись экрана в код?Да, поддерживается и запись экрана работающего сайта, из которой создаётся функциональный прототип.
Он просто генерирует код вслепую или может проверить свою работу?Если установлен Chromium (через Playwright или автоматически в Docker-образе), агент может отрисовать сгенерированную страницу в безголовом браузере и визуально проверить результат.
Для чего в этом проекте используется Replicate?Replicate обеспечивает редактирование изображений, удаление фона и генерацию изображений с помощью ИИ, например модель z-image-turbo; без REPLICATE_API_KEY эти функции недоступны.
What are similar projects?gpt4free, openui, onlook, gemini-fullstack-langgraph-quickstart, scira, draw-a-ui, LibreChat, lobehub
Which topics is it in?design-to-code, figma, screenshot, code-generation, fastapi, gpt, tailwindcss, vite, chatbot, vue, gemini, docker-compose
Creator
abi
Size
10.9 MB
Stars
80.4K
Updated
CommitOct 09
Age
2y
Commits · 90 Days