Как ИИ-агент делает дизайн красивым и редактируемым

Дизайн, который можно править

Генераторы картинок научились делать красивые постеры. Агенты для программирования научились собирать аккуратные страницы на HTML и CSS. Но между этими двумя мирами до сих пор была неприятная дыра.

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

Авторы статьи Editable Visual Design предлагают собрать оба подхода в один пайплайн. Идея простая: пусть одна модель сначала представит будущий дизайн, а другая потом соберёт его как редактируемый артефакт. На выходе получается макет, где текст живой, элементы лежат по слоям, а результат можно открыть и дальше править руками.

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

В чём проблема нынешних генераторов

Сегодня у автоматического дизайна есть два крайних режима.

🟠 Генерация изображений даёт композицию, свет, фактуру и общий визуальный тон, но почти всегда отдаёт финальный результат как цельную картинку.

🟠 Генерация кода даёт слои, настоящий текст и удобство редактирования, но плохо чувствует композицию и стиль.

Авторы формулируют это почти по-человечески: у одних систем есть «правое полушарие», у других — «левое». Одни умеют делать красиво, другие — структурно. Вместе это до сих пор почти не работало.

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

🟣 Постеры с плотным текстом, где ошибка в буквах недопустима.

🟣 Инфографика, где элементы должны двигаться независимо друг от друга.

🟣 Маркетинговые материалы, которые потом меняют под другой размер, язык или бренд.

Если вы хоть раз пытались править текст внутри сгенерированной картинки, вы уже понимаете, где проблема. Если вы пробовали поручить LLM сверстать красивый промо-постер, то знаете и вторую часть: всё формально правильно, но выглядит бедно.

Что предлагают авторы

Авторы называют свой подход редактируемый визуальный дизайн. По сути это многоэтапный пайплайн, где у разных моделей разная роль.

Общий пайплайн: одна модель планирует и воображает дизайн, другая генерирует визуальные ассеты, после чего агент собирает редактируемый макет в HTML/CSS/SVG.

В центре здесь агент для программирования. Но он не начинает с кода. Сначала система строит воображаемый референс будущего макета — не черновой каркас, а почти визуальное предчувствие готовой работы. Авторы называют это логикой «сначала представь, потом делай».

Дальше происходит разделение труда:

🟠 Мультимодальная модель понимает бриф, решает, что и где должно быть, выбирает стиль и оценивает результат.

🟠 Модель генерации изображений по запросу делает отдельные визуальные ассеты: фон, объект, иллюстрацию, декоративный элемент.

🟠 Агент для программирования собирает всё это в нативный HTML/CSS, раскладывает по слоям и добавляет настоящий текст.

Ключевой момент в том, что итоговый макет не вырезают из сгенерированной картинки. Картинка здесь нужна как визуальная опора. Финальный артефакт строится заново: текст отдельно, фон отдельно, иллюстрации отдельно.

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

Как устроен пайплайн

Пайплайн состоит из пяти шагов.

1. Понимание брифа и планирование

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

Это не финальный результат. Это скорее визуальный ориентир для самого агента. Он помогает понять композицию, палитру, ритм и общее настроение до того, как начнётся вёрстка.

2. Визуальная симуляция

Дальше агент анализирует этот ориентир как источник визуальных подсказок. Он не копирует картинку пиксель в пиксель. Он извлекает из неё полезные вещи:

🟣 Цветовую схему

🟣 Распределение акцентов по холсту

🟣 Общий стиль и плотность композиции

Проще говоря, агент сначала смотрит, каким дизайн мог бы быть, и только потом решает, как это перевести в код.

3. Сборка структуры и ассетов

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

HTML и CSS отлично подходят для типографики, сетки и позиционирования. Но они плохо подходят для сложной иллюстрации или фактуры. Авторы не пытаются заставить код делать всё. Они делят задачу по ролям.

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

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

4. Проверка и исправление самой себя

На первом проходе даже хороший агент ошибается. Элементы могут наехать друг на друга, текст может выйти за границы, картинка — перекрыть важный блок.

Поэтому в пайплайне есть двойная проверка:

🟠 Формальная проверка смотрит на ошибки в DOM, загрузку ресурсов и переполнение блоков.

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

Если находится проблема, агент вносит локальную правку в код и заново рендерит результат.

Это похоже на работу живого дизайнера: сначала собрал, потом отошёл на шаг назад, посмотрел, заметил перекос, поправил.

5. Выдача результата и история процесса

Финальный результат — это редактируемый макет на нативных DOM-элементах. Текст можно редактировать, ассеты можно двигать и масштабировать, слои можно экспортировать отдельно.

Но авторы добавляют ещё одну вещь: Design Replay, то есть полную запись истории создания макета.

История работы агента по шагам: понимание задачи, генерация и сборка, затем проверка и исправления; в плотных макетах слоёв и правок заметно больше.

В этой записи видно:

🟣 как агент понял бриф

🟣 какой визуальный ориентир он выбрал

🟣 какие ассеты запросил

🟣 как менялся код

🟣 что именно было исправлено на последнем этапе

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

Что показывают результаты

В статье нет привычной таблицы с метриками и бенчмарками. Авторы честно говорят: в дизайне трудно измерить красоту одной цифрой. Поэтому они показывают кейсы и сравнения.

Самое наглядное сравнение — с двумя базовыми режимами: чистая генерация картинок и чистая генерация кода.

Сравнение трёх подходов на одном брифе: генератор картинок даёт красивый, но запертый битмап; кодовый агент даёт редактируемость, но слабую композицию; новый пайплайн соединяет оба свойства.

Что видно в этом сравнении:

🟠 Генератор изображений делает визуально богатый макет, но текст местами искажается, а всё содержимое слеплено в один слой.

🟠 Чистый агент для программирования выдаёт код и формально редактируемую страницу, но композиция рыхлая, а пространство заполнено плохо.

🟠 Editable Visual Design сохраняет чистую типографику, отделяет слои и при этом выглядит ближе к дизайнерской работе, а не к шаблонной вёрстке.

Авторы также показывают несколько сценариев: постеры, инфографику, длинные текстовые макеты. В плотных кейсах система собирает десятки и даже сотни редактируемых слоёв. В более простых постерах слоёв меньше, но принцип тот же: фон, текст и графика не склеены между собой.

Коротко о результатах:

🟣 Текст остаётся настоящим текстом, а не частью картинки.

🟣 Слои отделены друг от друга, значит их можно двигать и править.

🟣 Визуальный стиль берётся не из шаблонной вёрстки, а из предварительной визуальной симуляции.

🟣 Ошибки правятся итеративно, а не скрываются одним красивым рендером.

Почему это важно

На первый взгляд это статья про автоматический дизайн. На деле она затрагивает более общий вопрос: как ИИ-системам сочетать воображение и структуру.

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

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

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

Ограничения

Авторы не обещают магию и довольно честно описывают, где система упирается в потолок.

🟠 Качество зависит от базовых моделей. Если модель изображений даёт скучный визуальный ориентир, агенту не на что опираться.

🟠 Сложные ассеты всё ещё остаются хрупким местом. Их нужно генерировать отдельно и чисто отделять от фона.

🟠 Длинные многополосные проекты пока не разобраны. Статья показывает в основном одностраничные макеты.

🟠 Оценка красоты остаётся субъективной. Здесь нет простой метрики, которая скажет, что один постер объективно лучше другого.

Это полезное напоминание: обвязка может сильно улучшить результат, но не отменяет ограничений самих моделей.

Вывод

Editable Visual Design предлагает практичный ответ на старую проблему генеративного дизайна: красоту и редактируемость не обязательно разделять.

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

Из этого следует несколько выводов.

🟣 Генерация изображений полезна как промежуточный этап, а не только как финальный результат.

🟣 Код остаётся лучшим носителем редактируемого дизайна, если вы хотите править текст, двигать элементы и экспортировать слои.

🟣 История шагов агента становится частью продукта: она помогает и пользователю, и будущему дообучению систем.

🟣 Следующий шаг для генеративного дизайна — структурированный артефакт, который можно взять в работу.

Если вы ждёте, что ИИ начнёт делать не просто демки, а полезные дизайнерские заготовки, то именно в эту сторону сейчас и идёт прогресс.