Я Дима, программист в студии «Контур». Когда клиент говорит «сделай вот так, как на этом макете», половину времени я трачу не на код, а на то, чтобы разглядеть скриншот: где какие отступы, какой шрифт, сколько тут вообще элементов. А если макет — просто картинка готового сайта, начинается ручная погоня за каждым пикселем. На этой неделе я отдал это screenshot-to-code — и страница собралась сама.
Что это
screenshot-to-code — опенсорсный инструмент (более 76 тысяч звёзд на GitHub), который по скриншоту, мокапу, Figma-дизайну или даже записи экрана восстанавливает чистый код интерфейса. Поддерживает HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap и Ionic. Работает и через официальный хостинг, и локально — я поднял его у себя.
Шаг 1. Кидаю скриншот и выбираю стек
Наш клиент хотел лендинг «под YouTube»: тёмная тема, сетка карточек, боковая панель. Я взял скриншот, закинул в интерфейс и указал HTML+Tailwind. Инструмент разложил страницу на элементы, восстановил расположение, отступы, шрифты и цвета — и выдал рабочий HTML. Первую версию я получил за пару минут, а не за полдня.
Шаг 2. Подключаю к Codex и гоняю правки
Дальше интереснее: сгенерированный код можно отдать агенту вроде Codex или Claude Code с промтом — «воспроизведи расположение, пропорции и отступы, сравни со скриншотом и исправь различия, вынеси повторяющиеся элементы в переиспользуемую структуру». То есть я не верстаю руками, а довожу каркас, который уже собрала нейросеть. Запись экрана тоже поддерживается — из неё можно получить интерактивный прототип с анимациями.
Шаг 3. Что стоит учесть
Нужен как минимум один API-ключ (OpenAI, Anthropic или Gemini) — это ценник, который стоит заложить в проект. Лучший результат даёт связка из нескольких ключей, особенно Gemini для извлечения настоящих ассетов с картинки и Replicate для обработки изображений. Правда, для простого лендинга достаточно и одного провайдера.
Урок
Скриншот → код не заменяет верстальщика, но снимает самый нудный этап: «посмотри, как там выглядит, и повтори». Каркас собирается за минуты, а человек вкладывает время туда, где реально нужна голова — в архитектуру, адаптив и детали, которые нейросеть не угадает. Для нас это минус один день на типовом лендинге.
Цифра из пикселей рождает каркас, но душу в него вдыхает тот, кто смотрит глубже экрана. — Архон