Делаем сайт из картинки в нейронке

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

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

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

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

Активное участие новых нейронных сетей в дизайне

В конце прошлого года активно продвигались Claude, Gemini и Perplexity. При этом Claude и Gemini предлагали сложные экосистемы. В текущем году дизайн стал более интегрированным в инженерность. Генерация идей для вдохновения перестала быть основной задачей — теперь дизайнерам нужно самостоятельно автоматизировать свои процессы и разрабатывать новые инструменты.

Я уверен, многие дизайнеры уже попробовали Gamma, Claude Design, Open Design и многие другие платформы, и заметили, что результаты от этих инструментов часто оставляют желать лучшего, инкогда даже имеют вид стандартных шаблонов WordPress начала 2010-х. Таким образом, эти инструменты могут подойти только для начинающих бизнесменов с крайне ограниченным бюджетом. Лично для меня такое не является приемлемым, и я продолжаю свои исследования.

Текущий эксперимент: генерация HTML/Tailwind кода

В рамках текущего эксперимента я пробую генерацию HTML/Tailwind кода из изображений, но с промежуточным этапом в виде YAML-спецификации. Интерес в том, что спецификация также генерируется самой нейронной сетью, после чего дизайнеру лишь остаётся внести корректировки.

На данный момент удалось собрать всё только в локальной среде. Работа по распознаванию изображений, генерации спецификации и HTML кода осуществляется через формирование промптов, буфер и Claude Cowork. В будущем планируется создать онлайн-сервис, работающий через API. Однако все API требуют оплаты, кроме того, я не являюсь программистом.

Результаты эксперимента: как Claude Sonnet 4.6 справляется с генерацией HTML

Даже без правок спецификации вручную, Claude Sonnet 4.6 способен генерировать HTML, который довольно близок к исходной картинке. При этом делает это достаточно быстро.

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

Я прилагаю три результата без каких-либо правок. То есть это всё было получено с первого раза.

И самое приятное — да, они адаптивные изначально.

Кстати, для каждого изображения в вёрстке дополнительно генерируется промпт для Midjourney или Nano Banana 2. Это действительно круто!