В Codex можно создать или изменить картинку прямо во время работы над проектом: опишите её назначение, вызовите $imagegen, проверьте результат и сохраните выбранный файл в рабочей папке. Это подходит для обложки, фона или иллюстрации. Для точного значка из готовой векторной системы обычно удобнее править исходный SVG. Встроенная генерация описана в документации OpenAI.
Что считать готовым результатом
Результат этой инструкции: отдельное изображение, которое вы можете открыть вне разговора и использовать в проекте. Картинка в сообщении ещё не подтверждает, что страница обращается к правильному файлу. Поэтому заранее определите и внешний вид, и место хранения. Для общей подготовки размера и формата пригодится разбор изображений для сайта.
- Назначение: обложка статьи, фон первого экрана или иллюстрация внутри страницы.
- Проверяемый вид: главный объект, пропорции, цвета и список недопустимых деталей.
- Рабочая папка: проект, в котором изображение действительно будет использоваться.
- Имя результата: понятное и новое, например
article-cover-v1.png, без замены существующего файла. - Приёмка: файл открывается отдельно, сохраняет нужный вид и отображается в предусмотренном месте.
Правило выбора: генерируйте изображение, если нужна новая иллюстрация или фотографический образ. Правьте существующий векторный файл, если важны точная геометрия и соответствие набору значков.
Красивые кадры это половина работы. Вторая половина это страница, на которой их видят люди. Как собрать её с помощью ИИ, показывают на бесплатном эфире.
Собрать страницу с ИИПодготовьте задание до генерации
Откройте проект в настольном приложении и назовите папку, в которой можно создать новый материал. Не передавайте весь архив ради одного рисунка. Если нужен образец, прикрепите только подходящую картинку. OpenAI описывает изображения как контекст: их можно приложить к сообщению, а в CLI передать через -i или --image. Это входной материал, который сам по себе не запускает генерацию. Источник: справка об изображениях на входе.
Различайте три задания. «Объясните этот скриншот» просит анализ. «Соберите страницу по этому скриншоту» просит код. «Создайте растровую обложку по этому образцу» просит новый файл изображения. Работа с кодом интерфейса отдельно разобрана в гайде о дизайне через Codex. Здесь цель состоит именно в готовом графическом материале.
- Укажите назначение и место показа. Обложка и мелкая иконка требуют разной детализации.
- Назовите главный объект и действие, которое должно быть видно.
- Задайте формат композиции: широкий, квадратный или вертикальный.
- Опишите стиль и важные цвета. Избегайте длинного списка противоречивых художественных требований.
- Перечислите запреты: текст, логотипы, лица или фон, если они не нужны.
- Отдельно укажите, что изображение должно быть сохранено новым файлом в проекте.
По теме: Codex для дизайна интерфейса: от макета до готовой страницы
Создайте одну картинку и проверьте её
В сообщении можно явно вызвать $imagegen. OpenAI документирует встроенную генерацию и отдельный путь через API; они имеют разные условия расхода. Если встроенный инструмент недоступен, не соглашайтесь на незаметную замену платным API: сначала выясните способ и условия. Навык задаёт рабочий порядок, а не превращает любую модель для кода в генератор картинок. Общая механика разобрана в статье про навыки Codex.
Используйте $imagegen. Создайте широкую растровую обложку для страницы о проверке сайтов.
Покажите окно браузера и лупу, без текста, логотипов и людей.
Стиль: простая плоская иллюстрация, кремовый фон, оранжевые и тёмные детали.
Создайте новый файл article-cover-v1.png в папке материалов этого проекта.
Покажите картинку, сообщите полный путь и фактический формат файла.
Существующие изображения не заменяйте.
Сначала смотрите на смысл: видны ли нужный объект и действие. Потом проверьте детали: края, тени, лишние предметы, похожие на буквы знаки. В конце оцените картинку в предполагаемом размере показа. Красивая большая иллюстрация может превратиться в неразличимый набор деталей на карточке.
Одними изображениями дело редко заканчивается: дальше нужен сайт, галерея или приложение. На бесплатном эфире по вайбкодингу показывают, как описать это словами и получить работающий результат, а участникам достаётся гайд.
Прийти на эфирИсправляйте один недостаток за проход
При правке прикрепите выбранный результат и назовите ровно то, что нужно изменить. Отдельно перечислите свойства, которые следует сохранить: кадрирование, палитру, главный объект. Такой порядок соответствует официальной инструкции по редактированию изображений.
- Лишние надписи: убрать только знаки, сохранив панели и предметы.
- Неправильные пропорции: изменить кадрирование под место показа, не добавлять новый сюжет.
- Слишком много мелких деталей: упростить второстепенные предметы и оставить главный объект.
- Объект сливается с фоном: усилить различие между объектом и фоном, сохранив выбранные цвета.
- Нужен прозрачный фон: явно попросить прозрачность и проверить файл на контрастной подложке.
Сохраните принятую версию новым именем. Не перезаписывайте исходный образец: он нужен для сравнения и возврата. Если несколько проходов изменили идею целиком, вернитесь к принятому образцу и короткому заданию. Добавление новых требований к уже потерянной композиции часто затрудняет проверку.
По теме: Codex и GLM: подключение Z.AI и проверка провайдера
Проверьте файл и его использование
Проверка делится на файл и место показа. Откройте сохранённое изображение обычным просмотрщиком, затем страницу или документ, для которого оно сделано. Если файл есть, а страница показывает старую картинку, проблема может быть в ссылке или сохранённом состоянии страницы.
- Сверьте полный путь с разрешённой папкой проекта. Если файл остался в каталоге генерации, попросите сохранить выбранную копию в проекте.
- Убедитесь, что расширение соответствует настоящему формату, а файл открывается без ошибки.
- Посмотрите размеры и пропорции. Не называйте файл готовым для печати только потому, что он выглядит чётким в окне.
- Для прозрачности проверьте картинку на светлом и тёмном фоне. Белый фон не доказывает наличие прозрачного слоя.
- Подключите файл к нужной странице и сравните вид на широком и узком экране.
- Проверьте подпись или альтернативный текст: они должны описывать реальное содержание изображения.
Безопасный выход: оставить прежний материал подключённым, пока новый не принят. Если обновление не подошло, верните ссылку на прежний файл. Такой возврат проще, чем восстановление удалённого исходника. Для сборки целой страницы изображение остаётся одним из материалов, а не заменой проверки кнопок, формы и текста.
Когда способ не подходит
Генерация не заменяет проверку прав на чужой образец, точную схему оборудования или документ с обязательными обозначениями. Для технического чертежа и набора стандартных значков выбирайте редактируемые исходники. Для изображения с обязательным текстом разумно отдельно проверить каждую надпись или добавить её в редакторе после генерации.
Если нужной возможности нет в вашей рабочей области, остановитесь на задании и образцах. Не вводите ключ API в обычный разговор. Сначала выясните, нужен ли отдельный платный способ и разрешена ли передача этих материалов. Эта инструкция не обещает доступ для любого аккаунта или региона.
Частые вопросы
Нужно ли писать код, чтобы получить картинку?
Нет. Для встроенного генератора достаточно понятного задания. Код нужен позже, если картинку надо подключить к странице.
Почему Codex сделал SVG вместо изображения?
Возможно, задача была понята как создание простой графики кодом. Уточните, что нужен растровый файл через $imagegen, и объясните его назначение.
Можно ли изменить только один предмет?
Да, сформулируйте локальную правку и перечислите свойства, которые должны сохраниться. После правки сравните весь кадр, а не только этот предмет.
Достаточно ли картинки в ответе?
Для просмотра достаточно. Для проекта нужен сохранённый файл и проверка того, что страница использует именно его.
На бесплатном вебинаре вы увидите, как соединять изображения, тексты и код в работающий сайт и проверять результат по понятному списку.
Записаться на вебинар