GPT Image 2.5 → Figma: макет через Codex и Astra

GPT Image 2.5 можно использовать для визуальной концепции сайта, а Codex с GPT-6 Astra и Computer Use — для её воссоздания в Figma. На выходе от второго этапа нужны отдельные текстовые слои, кнопки и контейнеры, которые дизайнер сможет править. Одна картинка, растянутая на весь фрейм, этой задачи не решает.

Если у вас уже есть официальная подписка с доступом к нужным моделям и Computer Use, начните с неё: изображение создайте в ChatGPT, затем передайте его в Codex. Если покупать официальную подписку не хочется, альтернативный путь — сгенерировать концепцию через Image 2.5 API BetterToken и подключить Astra в Codex через чистую API-конфигурацию. Computer Use при этом настраивается отдельно.

Подобный процесс показал Хидэки Кобаяси в X: он использовал изображение корпоративного сайта из ChatGPT Images 2.5, Astra и Computer Use для работы в Figma. Это пример автора публикации. Ниже — инструкция по подготовке и проверке такого процесса, без заявления о нашем собственном сквозном тесте или гарантии точного восстановления дизайна.

Сначала получите одну согласованную концепцию

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

Подготовьте точные тексты отдельно от изображения. В Figma они должны стать текстовыми слоями; не заставляйте агента угадывать мелкие надписи по пикселям.

Пример запроса для учебного сайта студии:

Создай концепт плоского десктопного дизайна сайта для вымышленной студии
дизайна интерьеров Northline. Покажи один экран, а не мокап браузера.
Используй молочно-белый фон, тёмно-зелёные акценты и чёткую сетку.
Включи панель навигации, главный заголовок, одну основную кнопку и три
карточки услуг. Без перспективы, рамок устройств или декоративных наложений интерфейса.
Используй именно эти надписи:
Навигация: Проекты | Услуги | О нас
Заголовок: Пространства для повседневной жизни
Кнопка: Обсудить проект
Карточки: Дома | Рабочие пространства | Консультация
Сохраняй читаемость текста и оставь достаточно места между секциями.

Путь 1: официальная подписка

В ChatGPT создайте изображение с Images 2.5 по этому запросу. Проверьте композицию, исправьте нужные элементы и сохраните выбранную версию как website-concept.png. Возможности текущего интерфейса, включая локальные правки, описаны в объявлении OpenAI об Images 2.5.

Откройте локальную задачу Codex, выберите GPT-6 Astra, если он доступен вашему аккаунту, и приложите файл. Дальше используйте общие шаги настройки Computer Use и Figma ниже. Подписка не заменяет доступ на редактирование файла Figma или разрешения операционной системы.

Путь 2: Image 2.5 API и Astra через BetterToken

На 10 сентября 2026 года в каталоге BetterToken уже представлены оба точных Model ID: gpt-image-2.5-flare и gpt-image-2.5-sunburst. Там же доступен gpt-6-astra для следующего этапа в Codex.

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

Сгенерируйте PNG через API

В Workspace BetterToken создайте или выберите ключ с доступом к нужной image-модели. Текущий каталог относит обе модели к группе GPT Image 4K, а Astra — к GPT. Не рассчитывайте, что один ключ с любой группой автоматически обслужит оба этапа. Если нужная группа недоступна в вашем аккаунте, сначала уточните доступ, затем отправляйте запрос.

Если не хотите писать вызов API вручную, откройте локальную задачу Codex в папке для этой работы и вставьте следующий запрос. Codex подготовит скрипт и выполнит один запрос к BetterToken. Это отдельный API-вызов, а не встроенный инструмент генерации изображений Codex. Для своего проекта замените описание Northline.

Создай и запусти в текущей папке Node.js-скрипт generate-design.mjs,
который получит одну концепцию веб-страницы через API BetterToken.
Используй HTTP API, не встроенный инструмент генерации изображений Codex.

Дизайн: один плоский экран сайта вымышленной интерьерной студии Northline,
без рамки браузера и перспективы. Фон молочно-белый, акценты тёмно-зелёные,
чёткая сетка. Навигация: Проекты | Услуги | О нас.
Заголовок: Пространства для повседневной жизни. Кнопка: Обсудить проект.
Три карточки: Дома | Рабочие пространства | Консультация.

POST https://www.bettertoken.ai/v1/images/generations
Content-Type: application/json
Authorization: Bearer <значение BETTERTOKEN_IMAGE_API_KEY>
Параметры: model="gpt-image-2.5-flare", size="1536x1024", n=1,
response_format="b64_json", output_format="png".

Сначала проверь Node.js и наличие переменной BETTERTOKEN_IMAGE_API_KEY,
не выводя её значение. Если ключ недоступен, объясни, как безопасно задать
его локально для процесса запуска; не проси присылать ключ в чат.
Не читай другие хранилища учётных данных и не меняй настройки Codex.
Используй встроенные средства Node.js, без установки зависимостей.
Не перезаписывай существующие файлы: при совпадении выбери новое имя.

Когда окружение готово, выполни ровно один платный запрос, n=1,
с тайм-аутом 300 секунд. Не повторяй запрос автоматически при ошибке
или тайм-ауте; сообщи статус и предложи проверить списания до повтора.
Не выводи ключ, заголовок Authorization или полный ответ с base64.
Декодируй data[0].b64_json и сохрани website-concept.png.
Проверь, что PNG открывается, покажи изображение и его фактические размеры,
укажи путь к скрипту и PNG. При неудаче не заявляй об успешной генерации.
На этом остановись: Figma пока не открывай и не изменяй.

Если PNG уже получен через этот запрос к Codex, повторно запускать пример ниже не нужно. Для ручного варианта сохраните следующий код в generate-design.mjs. Нужен Node.js с поддержкой fetch; ключ передайте локально через переменную окружения BETTERTOKEN_IMAGE_API_KEY. Не вставляйте его в текст запроса к модели, браузерный код или Git.

import { writeFile } from "node:fs/promises";

const apiKey = process.env.BETTERTOKEN_IMAGE_API_KEY;
if (!apiKey) throw new Error("Set BETTERTOKEN_IMAGE_API_KEY locally");

const prompt = `Создай концепт плоского десктопного дизайна сайта для вымышленной
студии дизайна интерьеров Northline. Покажи один экран без рамки браузера
или устройства. Используй молочно-белый фон, тёмно-зелёные акценты и
чёткую сетку. Включи навигацию, главный заголовок, одну кнопку и три карточки.
Точная навигация: Проекты | Услуги | О нас.
Точный заголовок: Пространства для повседневной жизни.
Точная кнопка: Обсудить проект.
Точные названия карточек: Дома | Рабочие пространства | Консультация.
Сохраняй читаемость текста и оставь достаточно места между секциями.`;

const response = await fetch("https://www.bettertoken.ai/v1/images/generations", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${apiKey}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "gpt-image-2.5-flare",
    prompt,
    size: "1536x1024",
    n: 1,
    response_format: "b64_json",
    output_format: "png",
  }),
  signal: AbortSignal.timeout(300000),
});

if (!response.ok) throw new Error(`Image request failed: HTTP ${response.status}`);
const result = await response.json();
const encoded = result.data?.[0]?.b64_json;
if (!encoded) throw new Error("Response has no data[0].b64_json");
const base64 = encoded.replace(/^data:[^;]+;base64,/, "");
await writeFile("website-concept.png", Buffer.from(base64, "base64"));
console.log("Saved website-concept.png");

Запустите node generate-design.mjs из папки с файлом. Формат запроса и сохранение data[0].b64_json соответствуют документации BetterToken по генерации изображений. Этот пример не является записью выполненного нами платного запроса.

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

Подключите Astra в Codex через чистую API-конфигурацию

Для локальной задачи используйте Codex CLI/App и текущую инструкцию BetterToken. Режим API Key не требует сохранять официальный вход ChatGPT ради Computer Use. При этом установленный плагин и разрешения на управление приложениями всё равно нужны.

Полностью закройте Codex, сохраните защищённые резервные копии config.toml и auth.json. По умолчанию они находятся в ~/.codex на macOS/Linux и %USERPROFILE%\.codex на Windows; при заданном CODEX_HOME используйте этот каталог. Приведённая ниже настройка заменяет вход через ChatGPT авторизацией по API Key.

В config.toml объедините настройки с существующими, не создавая повторных таблиц. Первые три поля должны находиться на верхнем уровне, перед таблицами TOML:

model_provider = "bettertoken"
model = "gpt-6-astra"
cli_auth_credentials_store = "file"

[model_providers.bettertoken]
name = "BetterToken"
base_url = "https://www.bettertoken.ai/v1"
wire_api = "responses"
requires_openai_auth = true
supports_websockets = false

В auth.json того же каталога укажите свой ключ BetterToken с доступом к Astra:

{
  "auth_mode": "apikey",
  "OPENAI_API_KEY": "YOUR_API_KEY"
}

Здесь requires_openai_auth = true — поле конфигурации provider в документированном файловом режиме. Само по себе оно не означает необходимость платной подписки: источник учётных данных задан как auth_mode: apikey. В этой схеме не добавляйте env_key или experimental_bearer_token в выбранный provider и не смешивайте её с настройкой Extension.

Перезапустите Codex App, создайте новую локальную задачу и отправьте короткое сообщение. Нормальный ответ проверяет связь с моделью. Затем отдельно убедитесь, что Computer Use видит Figma. Ответ в чате ещё не подтверждает возможность управления приложением.

Сколько стоят два этапа

Цены ниже — снимок публичного каталога на 10 сентября 2026 года, в USD. Перед запуском проверьте текущую цену и условия своего ключа.

Модель изображения	Публичная каталожная цена	Единица
gpt-image-2.5-flare	$0.05	Вызов
gpt-image-2.5-sunburst	$0.05	Вызов

Это цена этапа генерации, не готового файла Figma. В примере n=1. Пять отдельно оплаченных вызовов по этой цене составят $0.25; это расчёт, не наш фактический расход. Публичный ответ не задаёт отдельный множитель для группы GPT Image 4K, поэтому для конкретного аккаунта сверяйте итоговую цену в интерфейсе и списаниях.

Для gpt-6-astra каталог задаёт цены за миллион токенов и множитель группы GPT 0.68. В таблице показан расчёт с этим множителем; собственные условия ключа могут отличаться.

Входной контекст запроса	Вход	Выход	Чтение кэша	Запись кэша
До 272 000 токенов включительно	$6.80	$34.00	$0.68	$8.50
Более 272 000 токенов	$13.60	$51.00	$1.36	$17.00

Например, базовые $10 за миллион входных токенов × 0.68 дают $6.80. Длинный контекст меняет тариф запроса; не считайте повышенную цену только для токенов сверх порога. Категории кэша учитывайте по фактическим записям использования, не начисляя одну и ту же категорию дважды.

Computer Use выполняет несколько обращений к модели, читает изображения и состояние интерфейса. Поэтому один пользовательский запрос «собери макет» не равен одному API-вызову. Итог включает генерации и работу Astra; расходы на Figma, если они есть, учитываются отдельно. Фиксированной цены за восстановленный экран здесь нет.

Подготовьте Computer Use и Figma

Эта часть одинакова после официального и API-подключения модели. Нужны поддерживаемая версия настольного приложения, доступный Computer Use и файл Figma Design, который вы можете редактировать.

По официальной инструкции Computer Use, откройте Plugins → Computer Use, установите или включите плагин, включите его server и skill. В Settings → Computer use проверьте доступ к приложениям. На macOS выдайте разрешения Screen Recording и Accessibility; на Windows держите Figma видимой в активном сеансе. Доступность зависит от поддерживаемого региона и настроек организации.

Создайте отдельный тестовый файл Figma Design или страницу, предназначенную только для этого макета. Войдите в Figma самостоятельно. Приложите к задаче Codex website-concept.png и точные тексты. Не передавайте агенту пароли или API Key вместе с изображением.

Начните с короткой проверки: попросите через Computer Use назвать открытый файл Figma и прочитать названия видимых слоёв, пока ничего не меняя. Если это не получилось, проверьте плагин и права доступа до длительного задания.

Поручите Astra собрать редактируемый экран

Укажите конкретный файл или его URL и разрешите изменения только в нём. Пример задания для той же студии:

Используй Computer Use, чтобы пересобрать прикреплённый website-concept.png в файле
Figma Design, который я открыл для этой задачи. Работай только на новой странице с именем
Northline concept. Не изменяй другие страницы, не делись файлом и не публикуй его.

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

Используй именно эти тексты:
Проекты | Услуги | О нас
Пространства для повседневной жизни
Обсудить проект
Дома | Рабочие пространства | Консультация

Используй редактируемый текст и auto layout там, где содержимое должно менять размер.
Сделай основную кнопку переиспользуемой. Оставь фотографии заливками изображений,
если нужно; не пытайся выдавать их за редактируемые векторы.

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

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

Ширина 1440 px здесь — требование к макету Figma, не размер файла из image API. Восстановление композиции может потребовать подгонки. Для начала проверьте шапку и первый экран; затем поручайте оставшиеся секции.

В Figma auto layout помогает контейнерам реагировать на изменение текста и размеров. Но агент должен действительно настроить эти свойства. Само слово «адаптивный» в задании ничего не доказывает.

Примите работу тремя изменениями

Проверьте результат сами в Figma:

1. Замените главный заголовок более длинным. Он должен редактироваться как текст, без перекрытия соседних элементов.
2. Измените подпись и ширину кнопки. Проверьте её отступы и связь с компонентом, если агент его создал.
3. Сузьте основной фрейм. Посмотрите, как ведут себя карточки и переносы строк. Отдельный мобильный вариант может потребовать дополнительного задания.

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

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

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