GPT Image 2.5 vers Figma avec Codex et Astra

GPT Image 2.5 produit le concept visuel ; Codex avec GPT-6 Astra et Computer Use peut le reconstruire dans Figma. Le résultat acceptable contient des textes, boutons et conteneurs modifiables, pas une PNG étirée sur un frame.

Choisissez le parcours par abonnement officiel si le compte possède déjà le modèle et Computer Use. L’autre parcours génère l’image via l’API BetterToken puis configure Astra par API. Le plugin, les autorisations système et l’accès à Figma restent des contrôles distincts. Le cas de Hideki Kobayashi est l’exemple de son auteur, pas notre test de bout en bout ni une garantie de reproduction exacte.

Produire un concept vérifiable

Commencez par un écran desktop : navigation, titre, bouton principal et cartes. Gardez le texte exact hors de l’image pour en faire des calques Figma. Générez une PNG, ouvrez-la et vérifiez son utilité comme référence ; la taille demandée ne prouve pas la taille livrée.

Commencez avec Flare et préférez Sunburst lorsque la précision d’édition compte. Dans le Workspace BetterToken, sélectionnez une key ayant le groupe image requis ; un groupe n’active pas automatiquement Astra. Faites une seule requête payante avec n=1, un timeout de 300 secondes et aucun retry automatique. Vérifiez historique et frais avant de répéter après un timeout.

Configurer Codex séparément

Sauvegardez config.toml et auth.json, fusionnez les réglages sans dupliquer les tables TOML et gardez la clé API locale. L’authentification par key ne prouve pas l’accès à Computer Use. Redémarrez Codex, testez la connexion par un bref message, puis confirmez séparément que Computer Use voit Figma.

Utilisez un fichier ou une page Figma isolée, connectez-vous vous-même et ne donnez ni mots de passe ni keys à l’agent. Demandez d’abord le nom du fichier ouvert et des calques visibles sans écriture. Limitez la construction à une page nommée et exigez texte, boutons, conteneurs et auto layout natifs.

Accepter un résultat modifiable

Remplacez le titre par un texte plus long, modifiez et redimensionnez le bouton, puis rétrécissez le frame. Vérifiez chevauchements et noms de calques. Si seule une PNG est importée, reconstruisez une section avec des calques natifs. Une erreur 401 ou de modèle impose de vérifier API et key ; l’absence de contrôle de l’app impose de vérifier les permissions Computer Use.

Valeurs exactes, références et exemples copiables

Lorsque CODEX_HOME est défini, utilisez ce répertoire ; sous Windows, l’emplacement habituel est %USERPROFILE%\\.codex.

Conservez ces valeurs exactes : gpt-image-2.5-flare, gpt-image-2.5-sunburst, gpt-6-astra, $0.05 par appel d’image, $0.25 pour cinq appels et le multiplicateur du groupe GPT de 0.68. Les tarifs Astra par million de tokens sont de $6.80 / $34.00 / $0.68 / $8.50 jusqu’à 272,000 tokens, puis de $13.60 / $51.00 / $1.36 / $17.00 au-delà. Vérifiez le catalogue actuel, les conditions de la key et l’usage réel ; il ne s’agit pas d’un montant final fixe.

https://bettertoken.ai/pricing · https://bettertoken.ai/api/pricing · https://bettertoken.ai/workspace · https://docs.bettertoken.ai/api-reference/images-generations · https://docs.bettertoken.ai/ai-tools/codex · https://openai.com/index/introducing-chatgpt-images-2-5/ · https://developers.openai.com/api/docs/models/gpt-image-2.5-flare · https://developers.openai.com/api/docs/models/gpt-image-2.5-sunburst · https://learn.chatgpt.com/docs/computer-use · https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout

Les exemples d’implémentation suivants restent copiables octet pour octet. N’exposez aucune clé API, ne relancez pas automatiquement une requête payante échouée et ne considérez pas une réponse du chat comme une preuve de contrôle de 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.

Создай и запусти в текущей папке 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 пока не открывай и не изменяй.

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");

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_mode": "apikey",
  "OPENAI_API_KEY": "YOUR_API_KEY"
}

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.