Скриншот в код

Сделайте скриншот страницы, которую видите в браузере, и IMG2HTML напишет HTML с Tailwind CSS, который её воссоздаёт: навигация, заголовки, кнопки, списки и блоки кода становятся настоящей редактируемой разметкой. Ниже реальный прогон на главной странице upload-post.com, с результатом ровно в том виде, в каком он пришёл.

Конвертировать скриншот Снять скриншот в Chrome

Скриншот живого лендинга

Скриншот главной страницы Upload-Post: навигация с выпадающими меню, заголовок «Social Media API, One Call, Every Platform», ряды иконок соцсетей, окно терминала с командой curl и кнопка «Create your free account» — **Вход:** Скриншот upload-post.com из браузера (PNG, 1280 x 800)

Сгенерированный HTML в браузере: та же навигация, двухцветный заголовок, иконки соцсетей, терминал с командой curl, список возможностей, кнопка призыва к действию и плашки интеграций — **Результат:** сгенерированный HTML открыт в Chrome при ширине 1280px, без правок. Строк HTML с Tailwind CSS: 463, ответ пришёл за 27 с.

Что получилось правильно

Навигация со стрелками выпадающих меню, кнопкой тёмной темы, выбором языка и кнопкой «Try for free».
Двухцветный заголовок, зелёный бейдж со счётчиком, список возможностей с мелкими иконками и кнопка «Create your free account».
Окно терминала со всеми восемью строками команды curl, причём настоящим текстом, который можно править, а не картинкой.
Узнаваемые иконки брендов из Font Awesome для TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV и Google.

Что придётся поправить руками

Бренды, которых нет в Font Awesome 5, заменены похожими значками: у X старая птица Twitter, у Threads знак @, у Bluesky облако. Поставьте официальные SVG.
Аватары пользователей и флаг стали заглушками placehold.co (U1, U2, U3).
Иконки переносятся в три ряда вместо двух, а первый экран стоит чуть ниже, чем в оригинале, так что отступы нужно пройти заново.

upload-post-screenshot.html (первые строки body)

 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">

Открыть всю сгенерированную страницу (строк: 463)

Как сделать скриншот, который хорошо конвертируется

Модель воссоздаёт всё, что есть на картинке, поэтому чем чище снимок, тем меньше потом удалять. Скриншот Upload-Post выше снят при 1280 x 800 после закрытия баннера cookie; с открытым баннером он тоже попал бы в вёрстку.

Chrome или Edge: откройте DevTools (F12), нажмите Ctrl+Shift+P (Cmd+Shift+P на Mac) и выполните Capture screenshot для видимой области или Capture node screenshot, предварительно выбрав нужный блок в панели Elements. Без панелей браузера и без масштабирования.
macOS: Cmd+Shift+4 и выделите нужную часть, или нажмите пробел, чтобы снять одно окно.
Windows: Win+Shift+S открывает панель «Ножниц»; снимок попадает в буфер обмена, а сохранить его можно из уведомления.

Держите масштаб браузера 100% и обычную десктопную ширину (от 1280 до 1440 пикселей). Сначала закройте баннеры cookie, окна чатов и всплывающие окна. Если страница длинная, снимите первый экран, сетку с преимуществами и подвал отдельными картинками.

От скриншота к рабочей странице

Загрузите скриншот. Для этого примера конвертация заняла 27 с.
Сравните превью с оригиналом. В этом прогоне структура, тексты и команда curl были верными; иконки X, Threads и Bluesky пришлось заменить.
Попросите редактор исправить что-то обычными словами или поправьте код сами. Потом замените заглушки (здесь аватары и флаг) своими файлами.
Экспортируйте как Tailwind HTML или переключитесь на React или Vue, если страница пойдёт в приложение.

Скриншоты приложений и дизайнов

Скриншот не обязательно должен быть с сайта. Экраны десктопных приложений, админки и шаблоны писем конвертируются так же. Для мобильных экранов и макетов смотрите картинку в код, для фреймов из графического редактора Figma в HTML. Все четыре реальных примера рядом друг с другом собраны на странице конвертера картинки в HTML.

Если у вас уже есть HTML страницы и его нужно только посмотреть, бесплатный просмотр HTML онлайн покажет его при ширине телефона, планшета и десктопа.

Вопросы о конвертации скриншота в код

В какой код превращается скриншот?

В один HTML-файл с утилитарными классами Tailwind CSS, иконками Font Awesome и шрифтом Google Fonts, близким к шрифту на картинке (все четыре примера на этом сайте вернулись с Inter). В редакторе его можно переключить на инлайновый CSS, React, Vue или Angular.

Копируются ли картинки и поведение страницы?

Нет. Фотографии, аватары и логотипы становятся заглушками с описанием, а меню, выпадающие списки и вкладки собираются как статичная разметка. Ни в одном из четырёх примеров не было JavaScript, кроме скрипта Tailwind CDN.

Стоит ли делать скриншот всей страницы целиком?

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

Можно так сконвертировать любой сайт?

Используйте это для страниц и дизайнов, которые принадлежат вам или которые вам разрешено воспроизводить. Вы получаете воссозданную копию того, что показано на скриншоте, а не исходный код сайта.