В этом видеокейсе показан полный процесс редизайна лендинг-страницы с нуля. Использована связка из трёх инструментов: GPT 5.5 для кода, Images 2.0 для графики и Seedance для анимации. Автоматизация заменяет недели ручной работы на несколько итераций генерации.
Какие инструменты использовались
В работе применены решения от OpenAI и сторонние расширения:
- OpenAI Codex (GPT 5.5) — генерирует и редактирует код (HTML/CSS/JS) по текстовым промптам.
- ChatGPT Images 2.0 — создаёт кастомные изображения с учётом контекста страницы: фоны, иконки, иллюстрации.
- Seedance 2.0 — анимирует статичные картинки, превращая их в короткие видео для фона и акцентов.
- Taste Skill — расширение для Codex из GitHub. Добавляет команды для улучшений дизайна: редизайн секций, градиенты, hover-эффекты.
Этапы редизайна
Работа строится последовательно — от базовой версии к финальному результату.
1. Генерация базовой версии
В Codex создаётся папка проекта, затем вводится промпт с описанием лендинга. На этом этапе сравниваются результаты GPT 5.5 и Claude Opus — для оценки качества кода и структуры.
2. Улучшение через Taste Skill
После установки расширения применяется команда redesign. Она добавляет:
- бенто-грид для структуры контента;
- fade-in-эффекты при скролле;
- плавные переходы между секциями.
3. Работа с изображениями
Каждая секция анализируется в ChatGPT Images 2.0. Генератор создаёт новые изображения под конкретный контекст лендинга. Затем они интегрируются в Codex через промпты с указанием путей к файлам.
4. Анимация и финальная полировка
Фоновые изображения анимируются в Seedance. Через аннотации в Codex удаляются лишние элементы. В hero-секцию добавляется видеофон вместо статики.
Выводы для практики
Подход работает для реальных задач — не только для демо.
Экономия времени. Результат, на который вручную ушли бы недели, получается за несколько итераций генерации.
End-to-end автоматизация. Связка Codex + расширения + генерация изображений закрывает весь цикл: от кода до визуала.
Где применять. Метод подходит для быстрого прототипирования лендингов, маркетинговых страниц и презентаций продуктов. Для сложных проектов с уникальной логикой потребуется доработка вручную.
