Каждый фронтенд-разработчик сталкивался с этим: структура страницы написана, компоненты собраны, запускаешь и смотришь — пусто, не хватает картинки.
Может быть, Empty State нужна placeholder-иллюстрация, Feature Card — маленькая иконка, или Demo-странице нужен набор моковых миниатюр. Раньше для этого приходилось переключаться на инструмент генерации изображений, переписывать промпт, скачивать картинку, переименовывать файл, перетаскивать в директорию проекта, возвращаться в код и менять импорт. Один-два раза нормально, но повторяя это многократно при создании продукта, весь ритм разработки ломается.
Теперь Codex может встроить этот шаг прямо в процесс разработки.
От «нарисуй мне картинку» к «интегрируй этот ассет в проект»
Ключевое отличие: не относиться к этому как «случайно нарисовать картинку внутри Codex», а как «заставить Codex сгенерировать ассет разработки на основе текущего проекта и продолжить его подключение к коду».
Первое — просто генерация изображений. Второе — прямое исправление точки разрыва в разработке.
Самый практичный подход: описывая нужный визуальный ассет в Codex, включите путь сохранения, интеграцию компонентов и модификации кода — всё вместе. Пишите промпт как задачу разработки, а не как запрос на генерацию изображения.
Пять реальных примеров, которые напрямую идут в проект
Иллюстрация Empty State
Середина разработки страницы, страница Projects пуста и нуждается в картинке. Просто скажите Codex:
Пожалуйста, сгенерируйте иллюстрацию empty state в стиле текущего UI проекта и интегрируйте её в текущую страницу. Сценарий использования — когда на странице Projects нет проектов. Требования к изображению: 4:3, светлый фон, чистый SaaS UI-стиль, содержит пустую папку, карточку «создать проект», маленькую кнопку плюс. Без читаемого текста, без логотипов брендов. Сохранить в
/public/images/empty-projects.png, сослаться в компоненте ProjectsEmptyState, сохранить текущий стиль Tailwind.
Codex генерирует изображение, сохраняет файл и модифицирует ссылку на компонент — всё за один разговор. Дело не в «сделать красиво» — а в том, чтобы сделать состояние страницы завершённым.
Маленькая иллюстрация Feature Card
Функциональной карточке на лендинге нужна маленькая иллюстрация. Чёткие размеры (1:1, помещается наверху карточки шириной 320px), требование низкой визуальной сложности, конкретное назначение — это именно то, где Codex сияет.
Моковые миниатюры / Demo-контент
Странице Video Projects нужно 6 миниатюр для заполнения демо-контента. Codex может пакетно сгенерировать единые миниатюры 16:9, сохранить их в указанную директорию и обновить данные mockProjects, чтобы каждый проект ссылался на свою миниатюру. Страница мгновенно переходит из «пустой» в «почти настоящую».
Sprite Sheet для игрового прототипа
Делаете прототип 2D dungeon-игры и нужен sprite sheet персонажа. Скажите Codex сгенерировать pixel art с прозрачным фоном, 4 набора действий по 4 кадра, затем пусть обновит конфигурацию анимации на основе размеров sprite sheet и подключит состояния idle, walk, attack, hurt в Player.ts.
Игровые прототипы особенно подходят для этого использования. Codex не просто «рисует персонажа» — он генерирует sprite sheet + обновляет конфиг + подключает логику, от начала до конца.
Набор иллюстраций статусов
Нужно 6 иллюстраций статусов (processing, success, failed, no connection, locked, empty) для страниц результатов задач. После генерации оберните их в компонент StatusIllustration, который автоматически выбирает нужное изображение по пропу status — превращая это в ассет библиотеки компонентов, переиспользуемый на каждой странице.
Когда это стоит использовать (а когда нет)
Стоит использовать: Чем ближе к коду, тем лучше. Empty States, Feature Cards, Mock Thumbnails, Sprite Sheets, Status Illustrations — это «небольшие наборы критичных ассетов разработки», которые напрямую интегрируются в компоненты или конфиги после генерации.
Не рекомендуется: Пакетные маркетинговые материалы (50 рекламных изображений, десятки итераций обложек), бренд-герои. Они потребляют много и требуют высокой согласованности — лучше использовать API или выделенный дизайн-процесс.
Одно предложение: используйте это для «небольших наборов критичных ассетов» внутри разработки продукта. Вам не нужна галерея — вам нужно, чтобы страницы завершались быстрее, демо запускались sooner, а компоненты становились usable quicker.
Четыре проверки перед публикацией
Сгенерированные изображения не означают, что можно публиковать вслепую. Минимум проверьте:
- Нет ли ошибочного текста
- Нет ли реальных брендов, товарных знаков или логотипов
- Согласованность стиля между несколькими изображениями
- Соответствие требованиям бренда и авторского права продукта
Соло-разработчики продуктов теперь могут исправлять эти точки разрыва разработки прямо внутри Codex. Без переключения инструментов, без ожидания, без потери контекста — вот настоящий шаг вперёд.