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

Дайте IMG2HTML картинку интерфейса (экран приложения, макет, компонент, который вы где-то увидели), и он напишет для неё код: сначала HTML с Tailwind CSS, а если нужен компонент, в редакторе можно получить React, Vue или Angular.

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

Превратить картинку в код Посмотреть пример

Макет

Сгенерированный HTML при ширине 390 пикселей: приветствие, кольцо прогресса, строки привычек с отмеченными и пустыми чекбоксами и закреплённая внизу панель вкладок — Сгенерированная страница

Макет мобильного приложения

Вход: Макет экрана мобильного приложения (PNG, 864 x 1536)

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

Приветствие с именем в бирюзовом акцентном цвете, дата и скруглённая карточка со сводкой.
Кольцо прогресса, нарисованное в SVG и заполненное на 3 из 5, с надписью «Keep going!» рядом.
Пять строк привычек с правильными отмеченными и пустыми состояниями и нижняя панель вкладок с иконками Font Awesome и подчёркнутой активной вкладкой.

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

Эмодзи-иконки привычек записаны как картинки placehold.co с эмодзи в тексте и отображаются пустыми квадратами. Вставьте эмодзи напрямую или свои иконки.
Панель вкладок закреплена внизу экрана, а у списка нет нижнего отступа, поэтому она закрывает последнюю привычку. Добавьте снизу отступ высотой с панель.

habit-app-mockup.html (первые строки body)

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

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

Разбор сгенерированного кода

Файл (строк: 191) идёт по картинке сверху вниз: блок шапки с приветствием, карточка со сводкой с инлайновым SVG для кольца прогресса, по одному div на привычку и nav, закреплённый внизу для вкладок. Цвета взяты с картинки (бирюзовый задан произвольными значениями Tailwind), а отмеченные чекбоксы сделаны стилизованными div с галочкой Font Awesome, а не поля формы. Если они должны переключаться, превратите их в чекбоксы или кнопки и добавьте состояние в своём фреймворке.

Как получить код, который можно вставить в приложение

Сконвертируйте картинку и проверьте превью при ширине целевого устройства.
Исправьте то, чего модель знать не могла: ваш набор иконок, данные, которые должны быть динамическими, и отступ под закреплёнными панелями (здесь панель вкладок закрыла последнюю привычку).
Переключите вывод на React, Vue или Angular в редакторе. Разметка станет компонентом, который можно разбить на более мелкие, например HabitRow, повторённый пять раз.

Какие картинки лучше подходят

Экспорт из графических редакторов в 1x или 2x, где текст чёткий.
Один экран на картинку, чтобы каждая конвертация соответствовала одной странице или одному компоненту.
Настоящие тексты вместо lorem ipsum: текст переносится как есть, и он у вас останется.

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

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

Какие языки программирования поддерживаются?

Конвертация выдаёт HTML с Tailwind CSS. В редакторе его можно превратить в HTML с инлайновым CSS, компонент ReactJS, VueJS или AngularJS либо вписать название другого фреймворка. На этой странице показан только вывод по умолчанию, HTML с Tailwind.

Подходит ли это для дизайна мобильных приложений?

Да, в виде веб-страницы. Трекер привычек выше превратился в страницу шириной 390 пикселей с закреплённой внизу панелью вкладок. Это хорошая основа для веб-приложения или прототипа; для нативного приложения используйте её как образец структуры и текстов.

Как обрабатываются иконки?

Типовые иконки интерфейса (дом, график, галочка, пользователь, настройки) сопоставляются с Font Awesome 5. Эмодзи, знаки брендов и собственные иконки там есть не всегда, поэтому они могут прийти заглушками или приближёнными значками, как в этом примере.

Можно ли распознать рисунок от руки или картинку плохого качества?

Модель читает то, что смог бы прочитать человек. Чёткое фото бумажного вайрфрейма на телефон подходит (пример есть на странице о конвертации картинки в HTML); размытый текст, крошечные подписи и сильные артефакты JPEG приводят к угаданным словам, так что проверяйте тексты.