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

Сделайте скриншот страницы, которую видите в браузере, и 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)

Ищете screenshot-to-code?

abi/screenshot-to-code: популярный open-source проект, который вы запускаете сами со своим API-ключом OpenAI или Anthropic (автор также продаёт облачную версию). IMG2HTML делает то же самое как готовый сервис: ничего не нужно устанавливать, API-ключ не нужен, есть редактор, чтобы поправить результат промптом, и экспорт в HTML с Tailwind, React, Vue или Angular. Разверните open-source репозиторий у себя, если нужен полный контроль; выбирайте IMG2HTML, если хотите получить HTML за 30 секунд прямо в браузере или через расширение для Chrome.

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

Модель воссоздаёт всё, что есть на картинке, поэтому чем чище снимок, тем меньше потом удалять. Скриншот 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, окна чатов и всплывающие окна. Если страница длинная, снимите первый экран, сетку с преимуществами и подвал отдельными картинками.

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

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

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

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

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

IMG2HTML и другие инструменты «картинка в код»

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

ИнструментЧто этоРезультатЦена
IMG2HTMLОнлайн-сервис: веб-приложение, расширение для Chrome и APIHTML + Tailwind CSS; инлайн-CSS, React, Vue или Angular из редактораОт $1.99 в месяц за 3 конвертации
screenshot-to-code (abi)Open-source проект, который вы запускаете со своим API-ключом OpenAI, Anthropic или Gemini; есть и платная облачная версияHTML + Tailwind, React, Vue и другие стекиКод бесплатный; вы платите за API модели
v0 от VercelИИ-конструктор приложений, который начинает с промпта или картинкиReact и Next.js с Tailwind и shadcn/uiБесплатный тариф и платные планы
FrontyСервис «картинка в HTML/CSS» с визуальным редакторомHTML и CSSСм. fronty.com
AnimaПлагин для Figma, превращающий дизайн в кодReact, HTML и VueСм. animaapp.com

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

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

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

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

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

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

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

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

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