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

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

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

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

Затем, Ideogram обновила модель, вроде как сохранив предыдущую. Но нет. Они что-то сделали и предыдущая модель стала работать в половину хуже. Снова появились однотипные шаблоны. Идеи стали стандартные. Печаль.

В конце прошлого года

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

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

Текущий эксперимент

Попытка генерации HTML/Tailwind кода из картинки, но через прокладку в виде YAML-спеки. Фишка в том, что спеку тоже генерирует сама нейронка. Дизайнеру остаётся только внести коррективы.

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

Какие результаты?

Даже без правки спеки руками, Claude Sonnet 4.6 умудряется делать HTML-ки достаточно близко к картинке-референсу. И при том довольно шустро.

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

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

И, самое приятное — да, они адаптивные из коробки ))

А, кстати, для каждого изображения в вёрстке дополнительно генерируется промпт для Midjourney или Nano Banana 2. Ну круто же? ))

Больше информации в ТГ-группе и в Максе.