Что не получится из скриншота: ограничения генерации вёрстки

Генерация вёрстки по скриншоту даёт черновик HTML, а не готовую страницу. Программа видит картинку: прямоугольники, текст, цвета. Она не знает сетку из редактора, имена шрифтов, правила адаптива и состояния кнопок. Из одного кадра десктопа вы не получите рабочую мобильную раскладку. Hover, фокус и открытое меню на статичном снимке отсутствуют. Фирменный шрифт подменяется системным. Колонки часто превращаются в набор блоков с фиксированной шириной. Pixel perfect по макету Figma из PNG не выходит: исходник .fig на Тулси не принимают. Откройте Скриншот → Код, скачайте файл и сверьте сетку, отступы, шрифты и поведение глазами. Ниже: что ломается чаще, как проверить результат и чем задача отличается от копирования текста со скрина.

Почему картинка не содержит вёрстку

Скриншот это растр. Пиксели держат цвет и форму. В файле нет колонок CSS, нет списка брейкпоинтов, нет имени гарнитуры и нет правил :hover. Верстальщик читает макет как набор решений. Программа читает пятна на плоскости.

Запрос «ограничения генерации вёрстки» обычно приходит после первого прогона: блоки узнаваемы, а отступы пляшут, кнопка не подсвечивается, на узком окне всё сыпется в одну колонку. Ожидание было другим: картинка равна коду. Равенства нет. Картинка равна одному кадру в одном размере.

Макет в редакторе хранит автолейаут, отступы в переменных, стили текста и скрытые слои. PNG хранит то, что вы экспортировали в этот момент. Спрятанное меню, второй брейкпоинт и тень при наведении в кадр не попали. Генератор не восстанавливает скрытое. Он угадывает видимое.

Путь «картинка → HTML» экономит старт разметки. Он не снимает работу с сеткой, типографикой и состояниями. Если вам нужен готовый сайт без правки тегов, смотрите соседний разбор для владельца макета: сделать сайт по скриншоту без знания вёрстки. Если нужен маршрут загрузки и правки черновика, откройте скриншот дизайна в HTML и CSS. Здесь список провалов: что программа не вытаскивает из кадра.

Вы загружаете один файл. Один прогон. Один HTML со стилями внутри. Это ограничение формата, не «недоработка кнопки». Несколько экранов, несколько состояний и несколько ширин окна вы закрываете отдельными кадрами и ручной сборкой.

Сетка и колонки: типичные провалы

Сетка в макете это договор: колонки, желоба, выравнивание по базовой линии. На скрине вы видите прямоугольники рядом. Программа ставит div с шириной в пикселях или процентах, которые выглядят похоже на этом кадре. Сдвиг окна на 80 пикселей ломает ряд: карточка уезжает вниз или налезает на соседнюю.

Три колонки одинаковой высоты на картинке часто становятся тремя блоками разной высоты. Текст в средней карточке длиннее, нижний край «пляшет». Выравнивание по низу ряда в растре не записано. Flex и Grid вы пишете сами, если ряд должен держать высоту.

Вложенность тоже страдает. Карточка внутри колонки внутри секции на скрине выглядит как набор рамок. Генератор сплющивает уровни: внутренний отступ становится внешним, секция получает лишнюю обёртку, заголовок выпадает из потока. Вы открываете инспектор и видите лишние слои без роли.

Фиксированные ширины вместо резины

Черновик любит width: 1200px или набор фиксированных карточек по 380px. На кадре десктопа это совпадает с макетом. На ноутбуке 1366 и на мониторе 1920 уже другой воздух по краям. Горизонтальный скролл появляется, когда сумма ширин плюс отступы больше окна.

Проверьте файл: найдите жёсткие width и min-width у секций. Замените ряд на display: grid с minmax или на flex с flex-wrap. Числа с картинки оставьте как ориентир максимальной ширины контейнера, не как закон для каждой карточки.

Вложенные карточки, оверлеи и абсолют

Модальное окно, подсказка поверх формы, бейдж на углу карточки: на скрине это пятно поверх другого пятна. Генератор часто ставит position: absolute с координатами из кадра. Прокрутите страницу: бейдж уезжает, модалка «прилипает» не к центру окна, а к точке на длинной странице.

Оверлей меню на скрине выглядит как ещё один блок в потоке. В коде его нужно прятать и показывать. Статичный снимок не содержит правила «закрыто по умолчанию». Вы получите открытую панель на всю высоту или дубль шапки. Слои и z-index сверяйте глазами: что должно перекрывать, что должно жить в потоке.

Шрифты, кегль и межстрочный интервал

Гарнитура на скрине это рисунок букв. Имя файла шрифта в PNG не записано. Программа подставляет системный стек или ближайший веб-безопасный набор. Inter на макете становится Arial в черновике. Кириллица в декоративном шрифте ломается ещё сильнее: глифы «похожи», ритм строки другой.

Кегль с картинки программа оценивает приблизительно. Заголовок 42px может выйти 36 или 48. Межстрочный интервал на скрине вы видите как воздух между строками. В CSS это line-height. Генератор ставит значение «на глаз». Абзац из трёх строк на макете занимает другую высоту в браузере, и карточка под ним съезжает.

Межбуквенный интервал и выключка по ширине на растре почти не читаются. Журнальная вёрстка с плотным заголовком и широким трекингом в черновике выглядит «как обычный текст». Для лендинга с одной гарнитурой это терпимо. Для фирменного экрана с точным ритмом типографики вы подключаете файлы шрифтов и правите шкалу сами.

Подмена гарнитуры

Сверьте font-family в черновике с макетом. Если в проекте уже есть @font-face или подключение с площадки шрифтов, вставьте те же имена. Не ждите, что генератор угадает коммерческий шрифт по скрину. Он не имеет каталога лиц и лицензий.

Вес начертания тоже плавает. Medium на макете становится font-weight: 400 или 700. Кнопки «жирные», подписи «тонкие»: инвертируйте веса вручную. Иконки-шрифты на скрине превращаются в картинку или в пустой квадрат. Их вы заменяете на SVG или на свой набор иконок.

Мелкий текст, подписи и кернинг

Подписи 11px на сером фоне после сжатия в мессенджере читаются вами с трудом. Программа читает их ещё хуже: путает буквы, обрезает хвост, склеивает две строки. Для вёрстки это ломает ширину колонки: короткий лейбл стал длинным, поле ввода съехало.

Кернинг пар вроде «AV» и кириллических «Ты» на скрине не извлечь. Оставьте фирменный заголовок как задачу после черновика. Сначала структура блоков, потом типографика. Если со скрина нужен только текст ошибки или лога, не гоните его в HTML: откройте Текст с скриншота и статью текст со скриншота: ошибки и лог.

Состояния интерфейса, которых нет на кадре

Скриншот ловит один момент. Кнопка в покое. Поле без фокуса. Меню закрыто. Чекбокс снят. Генератор рисует этот момент. Правила :hover, :focus-visible, :disabled и открытого списка он не выдумывает из воздуха, если на картинке их нет.

Вы наводите курсор в браузере: кнопка не меняет цвет. В макете дизайнер показал второй кадр «hover». В прогон вы его не положили. Даже если положите второй файл, это второй HTML, не одно правило в одном файле. Состояния вы дописываете в CSS сами.

Клавиатура и скринридер на картинке отсутствуют. Фокус-кольцо, порядок таба, подписи к полям label и alt у картинок программа угадывает слабо. Черновик может поставить кнопку без текста и иконку без описания. Для учебной раскладки это терпимо. Для страницы, которую откроют люди, вы проходите доступность руками.

Анимация и переход. На скрине тень уже «лежит». В коде тени нет до наведения, или она висит всегда. Длительность transition из растра не следует. Не ждите, что генератор восстановит микровзаимодействие из одного кадра.

Формы: валидация, маска телефона, ошибка под полем. На макете часто показан счастливый вид. Красная подпись «заполните поле» живёт на другом фрейме. Черновик соберёт поля. Поведение отправки и сообщений об ошибке вы добавляете скриптом или бэкендом. Скрипты аналитики и трекеры в файл не попадают.

Адаптив из одного скрина десктопа

Один кадр 1440px не содержит правил для 375px. Адаптивная вёрстка это набор решений на разных ширинах: что в ряд, что в столбик, какой кегль, прятать ли боковое меню. На скрине десктопа боковое меню видно. На телефоне его обычно прячут за кнопку. Генератор оставляет меню как колонку и сжимает её вместе со страницей.

Запросы вроде «адаптивная вёрстка макет» и «сделать адаптивную вёрстку» ждут медиазапросы и брейкпоинты. Черновик по одному PNG чаще отдаёт одну раскладку. Иногда появляются @media, скопированные «как принято»: 768 и 1200. Они редко совпадают с сеткой вашего макета. Проверьте, что внутри медиазапроса меняется. Пустой брейкпоинт не считается адаптивом.

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

Брейкпоинты и размеры экранов

Типовые точки 320, 768, 1024, 1440 живут в учебниках. У вашего продукта могут быть 390 и 1280. Генератор не читает гайдлайн из Figma. Он не знает, что карточки переходят в одну колонку с 900px, а не с 768. Вы открываете файл, тянете край окна и смотрите, где ряд ломается. Точку излома записываете в @media сами.

Высота окна и «липкая» шапка на скрине выглядят как обычный блок сверху. При прокрутке шапка должна оставаться или уезжать. Растр этого не кодирует. position: sticky вы ставите после проверки.

Отдельный мобильный кадр

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

Сравните два HTML глазами: порядок секций должен совпадать по смыслу. Если на мобильном кадре дизайнер убрал блок отзывов, в общем файле этот блок нужно прятать медиазапросом, а не надеяться, что один прогон «догадается».

Pixel perfect, Figma и роль верстальщика

Запросы «макет Figma в HTML», «figma экспорт в HTML», «pixel perfect вёрстка по макетам Figma» ждут прямой мост из исходника. На Тулси вход: PNG, JPG или похожий растр. Файл .fig сервис не разбирает. Плагин «экспорт в HTML» из редактора это другой продукт с другими обещаниями и другими ошибками.

Pixel perfect значит совпадение с макетом по пикселям: отступы, кегль, цвет в hex. Генерация по скрину даёт приближение. Цвет кнопки может отличаться на несколько единиц канала. Тень размытия 24px станет 16. Иконка 24×24 растянется. Для согласования структуры этого хватает. Для сдачи заказчику по чек-листу пикселей вы сравниваете файл в браузере с оверлеем макета и правите числа.

Нейросеть не заменяет верстальщика на боевом сайте. Она убирает пустую страницу в редакторе. Дальше человек подключает шрифты, сетку проекта, состояния, адаптив, доступность и сборку. Обещать «Figma сразу на прод» нельзя: в исходнике компоненты, варианты и токены, которых нет в одном экспорте кадра.

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

Как проверить черновик после генерации

Откройте скачанный HTML в браузере. Положите рядом макет. Смотрите порядок секций сверху вниз. Пропущенный блок и перепутанная колонка видны сразу. Потом отступы между секциями: слишком плотно или дыра в половину экрана.

Тяните край окна. Ловите горизонтальный скролл и момент, когда ряд карточек ломается. Откройте инструменты разработчика, эмуляцию телефона. Если эмуляция показывает ту же десктопную сетку в узкой колонке с микроскопическим текстом, адаптив в файле отсутствует или не работает.

Наведите курсор на кнопки и ссылки. Проверьте фокус клавишей Tab. Откройте форму и попробуйте отправить пустую. Поведение, которого нет, вы дописываете. Цвета сверьте пипеткой: фон страницы, фон кнопки, цвет ссылки. Шрифты: выберите заголовок и посмотрите font-family.

Текст на странице сверьте со скрином. Генератор вёрстки переносит видимые строки в разметку, но путает мелкие подписи. Для точного копирования стектрейса или кода ошибки используйте Текст с скриншота, не правку HTML. Личные данные на кадре попадут в файл как есть: уберите токены и почту до загрузки.

Пройдите список проверки: сетка, ширины, шрифты, состояния, адаптив, текст, доступность полей. Где пункт красный, там граница генерации, а не «ещё один прогон с тем же кадром». Второй прогон с тем же PNG редко чинит hover и брейкпоинты. Меняйте кадр или правьте код.

Смежные задачи на Тулси

Нужен сам прогон картинки в HTML: Скриншот → Код. Маршрут загрузки и ожидания от черновика для верстальщика: скриншот дизайна в HTML и CSS. Тот же инструмент глазами человека без тегов: сайт по скриншоту без знания вёрстки.

Нужна строка с экрана, не разметка: Текст с скриншота и как скопировать ошибку со скрина. Тяжёлый кадр перед загрузкой: изменение размера и сжатие изображений.

Черновик HTML это старт разговора с кодом. Граница старта: сетка без резины, шрифт без имени, кадр без состояний, десктоп без мобильной раскладки. Дальше работа человека.

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

Почему генерация вёрстки по скриншоту ошибается в сетке?

Программа видит прямоугольники на картинке и подбирает ширины, которые похожи на этот кадр. Колонки, желоба и одинаковая высота ряда в растре не записаны. На узком окне фиксированные ширины складываются и дают горизонтальный скролл. Вы заменяете жёсткие width на сетку CSS после прогона.

Можно ли получить pixel perfect из одного PNG?

Совпадение по пикселям требует чисел из макета и ручной сверки с оверлеем. Генерация даёт приблизительные отступы и цвета. Тень, кегль и иконки часто расходятся на несколько пикселей. Для сдачи по чек-листу пикселей вы правите значения в CSS сами.

Макет Figma в HTML: почему файл .fig не подходит?

Инструмент на Тулси принимает картинку экрана или экспорта, не исходник редактора. В .fig лежат компоненты, варианты и автолейаут. PNG хранит один видимый кадр. Плагины экспорта из Figma это отдельный класс программ. Запрос «figma в html css» здесь закрывается через экспорт фрейма в PNG, затем черновик, затем ручная доводка.

Адаптивная вёрстка сайта получается из скрина десктопа?

Один кадр широкого экрана не содержит мобильной раскладки. Медиазапросы в черновике либо отсутствуют, либо стоят шаблонно и не совпадают с вашими точками. Сделайте отдельный экспорт узкого фрейма и склейте правила вручную. Запрос «сделать адаптивную вёрстку» после генерации остаётся работой со @media.

Hover и фокус кнопки появятся сами?

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

Шрифты из скриншота совпадут с макетом?

Имя гарнитуры в растре отсутствует. Черновик ставит системный стек или близкий веб-безопасный набор. Кегль и межстрочный интервал программа оценивает на глаз. Подключите свои файлы шрифтов и выставьте шкалу заголовков по макету. Декоративная кириллица расходится сильнее гротеска.

Верстка по макету нейросетью заменяет верстальщика?

Черновик снимает пустую страницу и набор первых тегов. Боевой сайт просит сетку проекта, состояния, адаптив, формы и доступность. Это работа человека. Генерация не выкладывает страницу на домен и не подключает оплату. Для лендинга из нескольких крупных блоков экономия на старте есть. Для кабинета с виджетами чаще быстрее сетка руками.

Как проверить HTML после генерации?

Откройте файл рядом с макетом. Проверьте порядок блоков, отступы, горизонтальный скролл и эмуляцию телефона. Наведите курсор, пройдите Tab, сверте font-family и цвета пипеткой. Мелкий текст сверьте со скрином построчно. Повтор того же PNG редко чинит адаптив и hover: меняйте кадр или правьте код.

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

Вёрстка собирает страницу: теги, стили, раскладка. Распознавание текста отдаёт копируемую строку без разметки. Ошибка ОС, стектрейс и диалог идут в Текст с скриншота. Макет интерфейса идёт в Скриншот → Код. Путать входы вредно: из лога вы не соберёте лендинг, из лендинга плохо копируется код ошибки.

Стоит ли гонять сложный кабинет аналитики в генератор?

Плотный экран с десятками виджетов, таблицами и оверлеями даёт кашу из блоков и абсолютных координат. Проще набросать сетку в своём шаблоне и перенести подписи. Генератор уместнее на форме, карточке и короткой секции с крупными прямоугольниками. Сложный кадр оставьте человеку с инспектором макета.