В поиске «screenshot to code», «скрин в код» и «Figma в React» часто склеивают три разных инструмента. Superdesign — плагин ChatGPT под лендинги. Claude Code /design — research preview с артбордами через artifacts внутри Claude Code. Screenshot to Code — отдельный open-source проект: самохост или hosted-сайт, который по скриншоту, мокапу, макету Figma или screen recording собирает рабочий UI-код. Это не плагин ChatGPT и не официальный skill Anthropic.

Репозиторий: github.com/abi/screenshot-to-code, лицензия MIT. Hosted-продукт: screenshottocode.com. На 28 августа 2026 у репозитория около 75 тысяч звёзд. README формулирует задачу прямо: convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. Ниже — что это даёт вайб-кодеру, чем отличается от соседей, какие ключи и стеки нужны, где ломается самопроверка в браузере. Без обещаний «заменит Figma» и «продакшен CSS без ревью».

Чем Screenshot to Code не является

Три путаницы, которые мешают выбрать инструмент.

Не Superdesign. Superdesign живёт внутри ChatGPT как плагин и заточен под лендинги в том контуре. Screenshot to Code — отдельное приложение: React/Vite фронт + FastAPI бэкенд, либо готовый сайт screenshottocode.com. Вы не ставите его «как GPT-плагин из магазина».

Не Claude Code /design. /design публикует editable артборды через artifacts в сессии Claude Code и ведёт к реализации выбранного варианта в репозитории. Screenshot to Code принимает картинку или запись экрана и генерирует код в выбранном стеке (HTML+Tailwind, React+Tailwind и др.). Разные входы, разные поверхности, разный контроль над ключами.

Не «официальный плагин Claude Code / Codex». Репозиторий открыт (MIT). Идея обернуть его как plugin под Claude Code или Codex для вайб-кодера выглядит логично именно потому, что код открыт. На 28 августа 2026 это возможность, а не готовый официальный плагин в каталоге. Не путайте с Superdesign, который уже существует как ChatGPT-плагин.

Если вам нужен быстрый черновик UI из скрина без привязки к Claude Code и без плагина ChatGPT — смотрите этот репозиторий или hosted. Если нужен workflow артбордов внутри Claude — смотрите /design. Если нужен GPT-плагин под лендинг — Superdesign.

Hosted или локально

Два пути из README.

Hosted. Самый быстрый старт: открыть screenshottocode.com. Локальный стек не нужен. Подходит, чтобы понять качество генерации на своих скринах до установки у себя.

Локально. Имеет смысл, если хотите кастомизировать, self-host или контрибьютить. Архитектура: React/Vite frontend + FastAPI backend. Нужен хотя бы один ключ провайдера моделей: OpenAI, Anthropic или Gemini. Для качества README сильно рекомендует связку Gemini плюс Replicate: Gemini тянет реальные ассеты со скрина и обязателен для video mode; Replicate закрывает image editing, background removal и генерацию картинок. Без ключа Replicate недоступны edit_images и remove_backgrounds.

Ключи OpenAI, Anthropic и Gemini можно задать в шестерёнке Settings на фронте после запуска. Ключ Replicate задаётся только в окружении бэкенда (файл .env в каталоге backend), не через UI. Для прокси OpenAI задаёте base URL в .env или в Settings; в пути обязательно должен быть сегмент v1 — так пишет FAQ README.

Ollama в README допускается, но не рекомендуется из‑за плохого качества; детали — в комментарии к issue #354.

Зачем вайб-кодеру отдельный screenshot-to-code

Типичный день: скрин из чата, кусок Figma или запись кликов по чужому UI. Нужен черновик разметки, который уже открывается в браузере. ChatGPT с плагином, Claude Code с /design и self-hosted Screenshot to Code решают соседние задачи, но вход и выход разные.

Screenshot to Code заточен под картинку или запись → код. Вы загружаете вход, выбираете стек, получаете варианты. С несколькими провайдерами можно сравнить модели на одном скрине. Hosted снимает возню с окружением; локальный репозиторий даёт контроль над ключами, прокси и preview. MIT означает, что форк и встройка в свой tooling — легальны. Идея «обернуть как plugin под Claude Code или Codex» — инженерная возможность, не официальная кнопка в магазине. Superdesign уже живёт в ChatGPT; этот репозиторий — другое.

Screen recording и video mode

README: можно снять screen recording сайта в действии и превратить в функциональный прототип. Для video mode нужен Gemini; он же вытаскивает реальные ассеты со скрина. Без Gemini код с другим ключом всё ещё генерируется, но видео-ветка и точность ассетов страдают.

Не ждите готовые анимации, состояние форм и бэкенд-логику. Цель — прототип разметки и стилей, который вы дальше правите в Cursor, Claude Code или руками.

Ключи: что реально включает фичи

Минимум — один ключ из трёх провайдеров кода. Лучшее качество по README — Gemini плюс Replicate (а лучше все четыре: OpenAI, Anthropic, Gemini, Replicate). Больше ключей — больше вариантов; один ключ — только модели этого провайдера.

Не храните ключи в публичном форке и не коммитьте .env.

Имена переменных из README: OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY, REPLICATE_API_KEY. Прокси: OPENAI_BASE_URL (в пути нужен v1). Фронт к другому порту бэкенда: VITE_WS_BACKEND_URL в frontend/.env.local.

Запуск: backend, frontend, Docker

Backend на Poetry: каталог backend, зависимости Poetry, при необходимости Chromium через Playwright, FastAPI на порту 7001 с reload.

Frontend: каталог frontend, установка и режим разработки через менеджер пакетов проекта. UI на порту 5173. Если бэкенд на другом порту, правите WebSocket URL бэкенда в локальном env фронта.

Вариант через контейнеры: сборка из корня репозитория, тот же порт 5173. Такой запуск не для разработки — правки файлов не пересобирают приложение. Для правок кода держите локальный backend плюс frontend.

Точные команды — в README секций Getting Started и Docker. В статье ниже они собраны в блоки bash.

Backend (Poetry):

``bash cd backend # ключи в .env: OPENAI / ANTHROPIC / GEMINI / REPLICATE poetry install poetry run playwright install chromium # Linux: poetry run playwright install --with-deps chromium poetry run uvicorn main:app --reload --port 7001 ``

Frontend:

``bash cd frontend pnpm install pnpm dev ``

Открываете http://localhost:5173.

Docker из корня:

``bash docker-compose up -d --build ``

Модели и стеки из README

Модели, которые README называет по умолчанию:

Чем больше ключей, тем шире микс вариантов на одну генерацию; с одним ключом приложение использует только модели этого провайдера.

Поддерживаемые стеки:

Выбор стека — про то, в каком виде вы хотите черновик. Это не «автоматический дизайн-токен пайплайн» и не гарантия пиксель-перфекта под ваш дизайн-системный гайд.

Screenshot preview: самопроверка в Chromium

Опциональный, но полезный контур. Агент рендерит сгенерированную страницу в headless Chromium и визуально сверяет результат. Chromium ставят через Playwright в окружении Poetry; на Linux для системных библиотек нужен флаг with-deps. В Docker-образе Chromium ставится автоматически. Если браузера нет, инструмент просто пропускается — генерация кода продолжается. Диалог Settings показывает, доступен ли screenshot preview на вашем бэкенде.

Для вайб-кодера это ближе к «агент посмотрел свой HTML глазами», чем к ручному Figma-handoff. Это не замена дизайн-ревью и не обещание, что вёрстка уйдёт в прод без правок.

Установка Chromium:

``bash poetry run playwright install chromium ``

На Linux: poetry run playwright install --with-deps chromium.

Ожидания по качеству: что править руками

README обещает clean, functional code — не пиксель-перфект и не продакшен без ревью. После генерации почти всегда смотрите сетку и мобильные отступы, шрифты, картинки и логотипы (с Gemini ближе к оригиналу), кликабельность без вашей логики, отсутствие ваших дизайн-токенов.

Screenshot preview ловит грубые визуальные промахи в headless Chromium. Это не замена дизайнеру. Если Chromium нет, preview пропускается — статус в Settings.

| Задача | Инструмент | | --- | --- | | Скрин / Figma / запись → HTML/React/Vue код | Screenshot to Code | | Артборды UI в Claude Code через artifacts | /design | | Плагин ChatGPT под лендинги | Superdesign |

Как встроить в свой поток без хайпа

  1. Один реальный скрин (не галерея примеров).
  2. Hosted — оценить потолок без сетапа.
  3. Локально с Gemini и Replicate, включить preview.
  4. Стек под ваш репозиторий (React+Tailwind vs HTML).
  5. Перенести код, выкинуть лишнее, подключить токены и роуты.
  6. Потом решать, нужен ли форк или обёртка под агент.

Звёзды (~75 тыс. на 28 августа 2026) — про популярность, не про гарантию с первого скрина. Заложите время на ключи, Chromium и прокси, если не на hosted.

Когда брать Screenshot to Code

  1. Есть скрин / мокап / Figma / короткая запись экрана — нужен черновик HTML или React+Tailwind.
  2. Хотите сравнить Gemini / GPT / Claude на одном входе — локальный multi-key апп.
  3. Нужен self-host со своими ключами, без ChatGPT-плагина и без Claude Code /design.
  4. Нужен video mode (Gemini обязателен).

Когда не брать единственным инструментом:

Параллельно с UI-черновиками для Telegram-трафика на витрине есть TG Lead Finder — другой контур, не генератор вёрстки.

Где обычно ломается

Практика по FAQ и README, без выдуманных «багов»:

Ошибки сетапа бэкенда README отсылает к треду issue 3 и к Troubleshooting.md в репозитории. Если что-то не описано в README на дату статьи — лучше открыть issue у автора, чем гадать по чужим гайдам.

Короткий recap

Screenshot to Code — MIT-репозиторий abi/screenshot-to-code (около 75 тысяч звёзд на 28 августа 2026) и hosted на screenshottocode.com. Вход: скриншот, мокап, Figma, screen recording. Выход: код в HTML/CSS/Tailwind, React, Vue, Bootstrap или Ionic+Tailwind. Модели из README: Gemini 3 Flash / 3.1 Pro Preview, GPT-5.5 / 5.4 Mini, Claude Opus 4.6 / 4.8, z-image-turbo через Replicate. Локально: FastAPI на 7001 плюс Vite на 5173, опциональный visual self-check в headless Chromium. Это не Superdesign и не Claude Code /design. Обёртка под Claude Code или Codex как plugin — идея для вайб-кодера на базе OSS, не готовый официальный продукт на дату статьи.

Берите hosted, чтобы прощупать качество на своих скринах. Ставьте локально, если нужны свои ключи, Gemini с Replicate и preview-цикл. Правьте сгенерированный код руками перед продом — инструмент даёт черновик UI, а не готовый дизайн-системный пайплайн.