Проблема генеративного дизайна
Традиционные модели генерации изображений (Stable Diffusion, Midjourney) создают «плоские» растровые файлы. Любое локальное изменение текста или композиции требует полной перегенерации, что делает процесс неэффективным для коммерческих задач. С другой стороны, ручная верстка на HTML/CSS часто страдает от несогласованности визуального стиля.
Проект Editable Visual Design решает эту проблему, используя persistent Coding Agent. Агент не просто генерирует пиксели, а строит структуру: он понимает бриф, планирует композицию, генерирует ассеты и собирает финальный артефакт в виде семантического HTML, сохраняя при этом высокое качество арт-дирекшена.
Три ключевых принципа
- Визуальный приоритет без пикселей: Модель изображения задает композицию, иерархию и цвета, но ее выходные данные (пиксели) не попадают в финальный продукт. Агент перестраивает типографику и лейаут в коде.
- Редактируемость: Финальный артефакт содержит реальный текст, независимые изображения и семантические слои. Элементы можно выбирать, перемещать и экспортировать.
- Воспроизводимость: Процесс создания записывается через Agent Design Replay, что позволяет отлаживать и повторять путь от идеи до результата.
Сравнение подходов
| Характеристика | Генерация изображений | Прямая верстка (Coding) | Editable Visual Design |
|---|---|---|---|
| Арт-дирекшн | Сильный | Нестабильный | Сильный |
| Реальный текст и слои | Нет | Да | Да |
| Локальные правки | Нет (перегенерация) | Да | Да |
| Воспроизводимый путь | Нет | Частично | Да |
Инструментарий и запуск
Репозиторий поставляется с двумя независимыми навыками (Skills) для Codex:
editable-design: Основной рабочий процесс. Создает полированные дизайны с фиксированным холстом, включая HTML, PNG, редактор мыши и анимированную разборку слоев.html-to-pptx: Конвертирует чистые HTML-дизайны в редактируемые файлы PowerPoint (.pptx) с сохранением структуры элементов.
Для достижения наилучших результатов разработчики рекомендуют использовать модель GPT-5.6 с высоким уровнем рассуждения (high reasoning effort). Установка осуществляется через Codex или вручную через Git sparse-checkout.
Примеры использования
Галерея проекта демонстрирует способность системы работать с различными стилями:
- Кампании: Постеры для китайских брендов чая ("Shanchuan Tea") и косметики ("Clarifying Stabilizing Essence") с точным соблюдением иерархии текста и ценовых предложений.
- Инфографика: Энциклопедический гид по красной панде с научной визуализацией.
- Арт-дизайн: Яркие летние музыкальные постеры с 3D-элементами и сложной типографикой.
Источник: Github ↗