Скриншоты сайта в адаптивную Tailwind верстку

Я знаю, что существует 100500 способов перекинуть картинку в готовую вёрстку.
Но когда у меня дошло до дела, результат оказался так себе.
То ли я криворукий, то ли все эти инструменты ещё далеки от совершенства.
В итоге понял, что мне проще накидать свой собственный велосипед — скрипт на Python (~200 строк).

Решил выложить, может, кому-то пригодится.

Скрипту можно скормить три скриншота сайта:

• Десктоп-версия

• Планшет

• Мобильная версия

На выходе получим одну HTML-адаптивную вёрстку (десктоп, планшет, мобила) с использованием Tailwind CSS ^[1].

Результаты работы

Habr

Вот так скрипт отработал на хабре:

На вкус ^[3] и цвет фломастеры разные, но по мне в tailwind Хабр становится красивее.

rbc.ru

Для теста ещё, РБК-инвестиции пробовал заскринить и получить HTML.

stackoverflow.com

https://codepen.io/Rilkener/pen/NPGyWeb ^[5]

Как сделать скриншоты сайта

Быстро через DevTools:

1. Десктоп: 1440×900 (viewport). Масштаб 100%

2. Мобильный: Mobile S — 320 px

3. Планшет: 768×1024 (iPad портрет)

CTRL + SHIFT + P внутри меню разработчика и дальше выбрать

Capture full size screenshot

Проверяйте скриншоты.

Если DevTools не справился — используйте плагины:

• GoFullPage ^[6] (Chrome/Opera/Edge) — делает полный скриншот всей страницы.

• Fireshot ^[7]— то же самое, но можно обрезать, выбрать область.

Установка и запуск

Зарегистрироваться на https://platform.openai.com/docs/overview ^[8] и получить ключ API.

Далее

git clone https://github.com/Rilkener/screen2html.git
cd screen2html
pip install -r requirements.txt

Положите скриншоты в папку data/input/, например:

data/input/desktop.png

data/input/mobile.png

data/input/tablet.png

Запуск:

python screen2html.py data/input/desktop.png 
  --mobile data/input/mobile.png 
  --tablet data/input/tablet.png 
  --api-key 'YOUR_API_KEY' 
  --model gpt-5 
 --out data/screen2html.html

Если все пройдет без ошибок скрипт отдаст готовый html.

Ссылка на гитхаб: https://github.com/Rilkener/screen2html ^[9]

Работа с напильником

Модель будет пытаться подобрать стандартные цвета от tailwind в виде классов.
Если принципиально, чтобы цвета совпадали, то можно просто пробежаться
и заменить их таким образом: bg-[#ваш_hex], text-[#ваш_hex], border-[#ваш_hex].

Возможно, какие-то элементы будут неадаптивные, и с этим отдельно придётся немного поваландаться.

Сколько берёт OpenAI за такое?

На 15 августа 2025 года за скрины Хабра с меня взяли $0.12, ну или около 9 руб. Делала это модель gpt-5. Если бы это была gpt-4, было бы ещё дешевле.

Я не пробовал жать и оптимизировать скриншоты, и не знаю, как модель при этом справится.

Если скрин весит, например, 1.5 MB, а после оптимизации станет 400 KB, то base64-строка уменьшится примерно в 3 раза → токенов уйдёт меньше.

Если не принципиален PNG (без альфа-канала, без идеальной чёткости), то можно перегонять в JPEG с качеством 85–90%. Визуально почти не заметно, а вес упадёт в 3–5 раз.

Теоретически, можно, наверное, и в 2 рубля уложиться.