Как доработать сгенерированный HTML/CSS руками: список проверки

Сгенерированный HTML по скриншоту: черновик, не готовая вёрстка. После Скриншот → Код вы скачиваете один файл со стилями внутри и правите его руками. Сетка часто сидит на фиксированных ширинах. Шрифты системные вместо фирменных. Hover и фокус на статичном кадре отсутствуют. Адаптив с одного скрина десктопа сам не появляется. Ниже список проверки: сетка, типографика, состояния, мобильная колонка, доступность и чистка лишних обёрток. Пройдите пункты сверху вниз, прежде чем отдавать страницу в прод или заказчику. Повторная генерация того же PNG редко чинит дыры: нужна ручная правка. Соседние разборы: как нейросеть читает макет, ограничения генерации вёрстки, скриншот в HTML и CSS, сайт по скриншоту без кода. Цель статьи: порядок правок, а не обещание pixel perfect из одного PNG.

Зачем нужен список проверки после генерации

Первый прогон радует узнаваемыми блоками. Второй взгляд в инспекторе показывает лишние обёртки, жёсткие width и кнопки без состояний. Без списка вы правите глазами хаотично и пропускаете адаптив.

Запрос «доработать сгенерированный html» обычно приходит в момент: файл уже скачан, дедлайн близко, макет в Figma рядом. Нужен порядок, а не ещё одна генерация того же кадра.

Повторная загрузка того же скрина редко чинит сетку. Меняется ваша правка в коде и, если надо, новый кадр под другую ширину окна.

Черновик экономит старт набора тегов. Ответственность за доступность, семантику и поведение остаётся на вас.

Когда черновика достаточно как базы

Простой лендинг из секций, карточка товара, экран формы без сложной логики. Блоки узнаваемы, тексты на месте, цвета близки. Вы готовы заменить шрифты и переписать ряд на Grid за полчаса.

Сложный дашборд, интернет-магазин с фильтрами, анимации и дизайн-система из токенов: генерация даёт лишь намёк. Закладывайте больше ручной работы.

Когда лучше верстать с нуля

Скрин кривой, низкого разрешения, с сжатым JPEG-шумом на тексте. Или макет требует строгой сетки из восьми колонок и состояний, которых на кадре нет. Тогда каркас из генерации мешает больше, чем помогает. Ограничения: ограничения генерации вёрстки.

Сетка, колонки и контейнер

Откройте файл в браузере и сузьте окно. Если сразу появляется горизонтальный скролл, ищите фиксированные ширины секций и карточек. Замените ряд на display: grid или flex с переносом. Числа со скрина оставьте как ориентир max-width контейнера.

Выровняйте высоты карточек в ряду, если макет так задуман. На картинке одинаковый низ ряда не записан в CSS. Flex и Grid вы задаёте сами.

Уберите лишние вложенные div без роли. Генератор часто сплющивает или наоборот размножает уровни. Семантика: header, main, nav, footer там, где по смыслу уместно.

Как модель «видит» прямоугольники: как нейросеть читает макет. Маршрут загрузки: скриншот в HTML и CSS.

Отступы и ритм

Сверьте padding и margin с макетом по ключевым секциям: герой, карточки, подвал. Мелкие расхождения в 4–8px на черновике нормальны. Пляска в 40px между блоками одного уровня: правьте.

Сведите повторяющиеся отступы к двум-трём значениям. Так проще держать ритм, чем править каждый блок уникальным числом со скрина.

Картинки и иконки

Проверьте пути к изображениям. В однофайловом черновике картинки иногда встроены или потеряны. Замените на ваши ассеты с осмысленным alt. Декоративные иконки спрячьте от скринридера через пустой alt или aria-hidden, по смыслу.

Сжатие тяжёлых PNG перед продом: соседние инструменты сжатия изображений на сайте.

Типографика, цвет и состояния

Подключите фирменные шрифты через @font-face или хостинг шрифтов проекта. Системный шрифт черновика: временная подстановка. Кегль и межстрочный интервал сверьте с макетом на заголовках и основном тексте.

Контраст текста и фона проверьте глазами и, при необходимости, отдельной проверкой контраста. Светло-серый текст на креме со скрина часто не проходит доступность.

Кнопки и ссылки: добавьте :hover, :focus-visible, состояние disabled. На статичном скрине их нет. Клавиатура должна доходить до каждого действия.

Формы и ошибки

Поля должны иметь подписи. Плейсхолдер подпись не заменяет. Сообщения об ошибках свяжите с полем. Автозаполнение и тип email / tel ставьте по смыслу.

Если на скрине только «красивая форма» без текста ошибок, всё равно заложиьте место под сообщение. Иначе вёрстка разъедется в проде при первой валидации.

Интерактив, которого не было на кадре

Модальные окна, открытое меню, табы, слайдер: на одном кадре обычно одно состояние. Дорисуйте остальные в коде или сделайте отдельные скрины и перенесите куски вручную. Генератор не восстанавливает скрытые слои Figma из PNG.

Владельцу макета без кода: сайт по скриншоту без кода. Там другие ожидания и другой объём ручной доводки.

Адаптив, семантика и чистка перед сдачей

С одного кадра 1440px мобильная раскладка не выводится надежно. Задайте брейкпоинты сами. На узкой ширине: одна колонка, крупные зоны нажатия, меню, которое не перекрывает контент навсегда.

Проверьте заголовки по уровням: один h1, дальше по смыслу. Не делайте вид заголовка через увеличенный div.

Удалите мёртвые стили и дубли классов, если правите файл долго. Вынесите CSS из огромного <style> в модули проекта, когда черновик переезжает в репозиторий.

Откройте страницу без мыши: Tab по интерактиву. Включите приближение текста в браузере. Прогоните базовую проверку доступности, если она есть в вашем процессе.

Список проверки перед «готово»

1. Нет горизонтального скролла на рабочих ширинах.
2. Шрифты проекта подключены.
3. Hover и focus на кнопках и ссылках есть.
4. Картинки с alt, декоративное помечено.
5. Формы с подписями.
6. Мобильная колонка собрана руками.
7. Контраст текста приемлемый.
8. Лишние обёртки убраны, семантика на месте.
9. Тексты сверены с макетом (опечатки генератора).
10. Файл открывается у коллеги без ваших локальных шрифтов-заглушек.

Пункты можно сократить под размер задачи. Для учебного лендинга хватит сетки, шрифта и адаптива. Для клиента: полный проход.

Что не чинит повторная генерация

Чужой фирменный шрифт, которого нет на скрине как файла. Логику корзины. Контент из CMS. Pixel perfect по гайду дизайн-системы. Эти слои вы добавляете в проекте. Повтор того же PNG даст похожий черновик с теми же дырами.

Смежные материалы

Как модель разбирает макет: как нейросеть читает макет. Что не вытащить из кадра: ограничения генерации вёрстки. Путь загрузки и правки: скриншот в HTML и CSS. Ожидания без кода: сайт по скриншоту без кода.

Собрать новый черновик: Скриншот → Код.

Частые вопросы

С чего начать доработку сгенерированного HTML?

Откройте файл рядом с макетом и сузьте окно браузера. Сначала уберите горизонтальный скролл и зафиксируйте контейнер. Потом шрифты и отступы ключевых секций. Состояния кнопок и адаптив оставляйте после того, как сетка перестала «плыть». Так вы не красите фасады на кривом каркасе.

Нужно ли каждый раз генерировать заново после правок?

Нет. Повторная генерация затрёт ручные правки и снова даст фиксированные ширины. Меняйте скачанный файл. Новый прогон имеет смысл только для другого кадра: другая ширина, другое состояние меню, другой экран.

Как починить сетку из фиксированных пикселей?

Найдите жёсткие width и min-width у секций и карточек. Замените ряд на Grid или flex с flex-wrap. Оставьте max-width у контейнера. Проверьте три ширины окна: мобильная, планшет, десктоп. Детали провалов: ограничения генерации вёрстки.

Почему шрифты не как в макете?

На скрине нет файла гарнитуры, только рисунок букв. Генератор подставляет системный шрифт. Подключите шрифты проекта и сверьте кегль. Если нужен разбор «что видит модель», читайте как нейросеть читает макет.

Как добавить адаптив, если был один скрин десктопа?

Задайте брейкпоинты сами по макету или здравому смыслу. На узкой ширине соберите одну колонку и меню. При необходимости сделайте отдельный скрин мобильного макета и перенесите блоки вручную. Один PNG 1440px мобильную сетку не кодирует.

Что проверить для доступности после генерации?

Подписи полей, фокус с клавиатуры, контраст текста, alt у смысловых картинок, уровни заголовков. Черновик об этом не знает. Даже короткий проход Tab и увеличение шрифта ловят половину дыр до сдачи.

Можно ли сдать клиенту файл сразу после генерации?

Только как демо-черновик с явной пометкой, что это заготовка. Для продакшена пройдите список проверки выше. Иначе заказчик увидит сломанный мобильный вид и кнопки без hover. Ожидания «сайт без кода»: сайт по скриншоту без кода.

Чем доработка черновика отличается от вёрстки с нуля?

Вы начинаете с уже размеченных блоков и текстов, а не с пустого файла. Экономия: на стартовом наборе секций. Работа: на сетке, типографике, состояниях и адаптиве. Если черновик сильно врёт, быстрее набрать каркас руками по макету.

Куда деть CSS из одного большого HTML?

Для учебного примера можно оставить <style> внутри. В проекте вынесите стили в файлы или CSS-модули, подключите шрифты и токены дизайн-системы. Черновик: транспорт. Репозиторий: структура команды.

Где заново собрать черновик на Тулси?

Откройте Скриншот → Код, загрузите чистый PNG или JPG экрана, скачайте HTML и вернитесь к списку проверки в этой статье. Пошаговый маршрут: скриншот в HTML и CSS. Ограничения кадра: ограничения генерации вёрстки.

Скачайте черновик в Скриншот → Код и пройдите сетку, шрифты, состояния и адаптив по списку выше. Как модель читает макет: как нейросеть читает макет. Что не выйдет из одного PNG: ограничения генерации вёрстки.