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 они должны стать текстовыми слоями; не заставляйте агента угадывать мелкие надписи по пикселям.

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

Create a flat desktop website design concept for a fictional interior
design studio called Northline. Show one screen, not a browser mockup.
Use an off-white background, dark green accents and a clean grid.
Include a navigation bar, a hero heading, one primary button and three
service cards. No perspective, device frame or decorative UI overlays.
Use these exact labels:
Navigation: Projects | Services | About
Heading: Spaces for everyday life
Button: Discuss a project
Cards: Homes | Workspaces | Consultation
Keep text readable and leave enough space between sections.

Путь 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,
без рамки браузера и перспективы. Фон молочно-белый, акценты тёмно-зелёные,
чёткая сетка. Навигация: Projects | Services | About.
Заголовок: Spaces for everyday life. Кнопка: Discuss a project.
Три карточки: Homes | Workspaces | Consultation.

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 = `Create a flat desktop website design concept for a fictional
interior design studio called Northline. Show one screen without a browser
or device frame. Use an off-white background, dark green accents and a
clean grid. Include navigation, a hero heading, one button and three cards.
Exact navigation: Projects | Services | About.
Exact heading: Spaces for everyday life.
Exact button: Discuss a project.
Exact card labels: Homes | Workspaces | Consultation.
Keep text readable and leave enough space between sections.`;

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 и разрешите изменения только в нём. Пример задания для той же студии:

Use Computer Use to rebuild the attached website-concept.png in the Figma
Design file I have opened for this task. Work only on a new page named
Northline concept. Do not modify other pages, share the file or publish it.

Create a desktop frame 1440 px wide. Use the image as a visual reference.
Rebuild navigation, heading, button and service cards with native Figma
layers. Do not use a full-page image as the finished design.

Use these exact texts:
Projects | Services | About
Spaces for everyday life
Discuss a project
Homes | Workspaces | Consultation

Use editable text and auto layout where content must resize. Make the
primary button reusable. Keep photos as image fills if needed; do not
pretend they have become editable vectors.

First build the navigation and hero, inspect them, then continue with the
three cards. Match the reference proportions, colours and spacing. If a
font is unavailable, report it and use an available substitute.

At the end, verify that the title can be edited, the button can be resized
and the frame can be narrowed without overlapping text. Report any
remaining differences and the page/frame names so I can inspect them.

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

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

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

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

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

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

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

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