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, чтобы оценить точность до того, как возиться с ключами.
Блог