# Screenshot to Code

> Скриншот на входе — готовый код на выходе: дизайн превращается в вёрстку

Превращайте скриншоты, макеты Figma и записи экрана в чистый код: HTML+Tailwind, CSS, React, Vue, Bootstrap, Ionic. Работает на моделях Gemini, GPT и Claude.

- Что делает: превращает скриншоты и макеты в код
- Категории: Opensource, Инструменты разработчика, Помощники в кодинге
- Работает из России: Нет
- Бизнес-модель: Бесплатно
- Ограничения: нужны свои API-ключи (OpenAI/Anthropic/Gemini, Replicate) и локальная установка
- Модели: Gemini 3.1 Pro Preview, Gemini 3 Flash Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 5, Claude Opus 4.8, Claude Opus 4.6, Claude Fable 5, Claude Sonnet 4.6, z-image-turbo
- Сайт сервиса: https://github.com/abi/screenshot-to-code
- Карточка в каталоге: https://ailibri.com/screenshot-to-code
- Обновлено: 2026-09-21

## Описание

Screenshot to Code — открытый проект на GitHub, который превратит скриншот, макет или даже запись экрана в готовый код интерфейса. Кидаешь картинку сайта, получаешь разметку на HTML с Tailwind, React, Vue или Bootstrap. Пригодится фронтендерам, дизайнерам и всем, кому нужно быстро воспроизвести чужую вёрстку или оживить свой макет.

Работает через модели OpenAI, Anthropic и Gemini — ключ хотя бы от одного провайдера обязателен. Чем больше ключей добавишь, тем интереснее: приложение само подберёт более сильную комбинацию моделей и даст сравнить несколько вариантов генерации за один заход. Gemini здесь особенно важен — он вытаскивает реальные логотипы и картинки прямо из скриншота, а ещё без него не заработает режим видео. Ключ Replicate отвечает за генерацию картинок, удаление фона и редактирование изображений.

Отдельная фишка — режим записи экрана. Снимаешь видео, как сайт работает вживую, и на выходе получаешь функциональный прототип, а не статичную картинку. Есть и необязательный инструмент предпросмотра: агент отрендерит сгенерированную страницу в headless-браузере и сам визуально проверит, что получилось. Включается автоматически, если установлен Chromium через Playwright.

Запустить можно двумя путями. Локально — фронтенд на React и Vite, бэкенд на FastAPI, ключи прописываются в backend/.env или через окно настроек с шестерёнкой. Есть готовый docker-compose, если не хочется возиться со зависимостями: одна команда, и приложение доступно на localhost:5173. Вариант с Ollama и открытыми моделями технически возможен, но автор сам его не советует — качество выходит слабое.

Код открыт под лицензией MIT, у репозитория почти 80 тысяч звёзд и подробная документация по устранению проблем. Если не хочется настраивать ничего вручную, есть официальная хостинговая версия на screenshottocode.com — самый быстрый способ попробовать. В примерах на странице — воспроизведённые NYTimes, Instagram и Hacker News, чтобы оценить точность до того, как возиться с ключами.

## Похожие сервисы в каталоге

- [AI-First Development Framework](https://ailibri.com/ai-first-development-framework): Методология AI-First разработки для Claude Code и Codex: планирование по спецификациям, Project Knowledge, фокусное выполнение задач и проверка результатов на о
- [Repowise](https://ailibri.com/repowise): Repowise — интеллектуальный анализ кода: оценка качества, авто-документация, git-аналитика, поиск мёртвого кода и архитектурные решения через MCP.
- [I Have ADHD](https://ailibri.com/i-have-adhd): Skill для кодинг-агентов: выводит ответ сразу, без "закапывания" в длинных объяснениях. ADHD-friendly формат ответов для Claude Code и Codex.
- [Rigor Dushno](https://ailibri.com/rigor-dushno): Расширение для Claude Code, позволяющее настроить уровень критичности ИИ-ассистента от 0 до 10: от полного согласия до максимальной проверки решений и архитекту
- [bb](https://ailibri.com/bb): bb — агентная IDE с открытым кодом, которая настраивает и автоматизирует себя. Работа в потоках с живым контролем через desktop, web, CLI и HTTP API.
- [Strands Labs](https://ailibri.com/strands-labs): Strands Labs - экспериментальные проекты для разработки AI-агентов: управление роботами, симуляции, Python-функции с AI. Открытый код на GitHub.

---
Источник: AILibri — каталог нейросетей и ИИ-инструментов, https://ailibri.com