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.

Créez un concept de design de site web desktop à plat pour un studio
d'architecture d'intérieur fictif appelé Northline. Affichez un seul écran, pas une maquette de navigateur.
Utilisez un arrière-plan blanc cassé, des accents vert foncé et une grille épurée.
Incluez une barre de navigation, un titre principal, un bouton principal et trois
cartes de services. Sans perspective, cadre d'appareil ni superpositions d'interface décoratives.
Utilisez ces libellés exacts :
Navigation : Projets | Services | À propos
Titre : Des espaces pour la vie quotidienne
Bouton : Discuter d'un projet
Cartes : Résidences | Espaces de travail | Consultation
Gardez le texte lisible et laissez suffisamment d'espace entre les sections.

Créez et exécutez dans le dossier courant un script Node.js generate-design.mjs,
qui obtiendra un concept de page web via l'API BetterToken.
Utilisez l'API HTTP, et non l'outil intégré de génération d'images de Codex.

Design : un seul écran plat de site web pour un studio d'architecture d'intérieur
fictif appelé Northline, sans cadre de navigateur ni perspective. Fond blanc cassé,
accents vert foncé, grille épurée. Navigation : Projets | Services | À propos.
Titre : Des espaces pour la vie quotidienne. Bouton : Discuter d'un projet.
Trois cartes : Résidences | Espaces de travail | Consultation.

POST https://www.bettertoken.ai/v1/images/generations
Content-Type: application/json
Authorization: Bearer <valeur de BETTERTOKEN_IMAGE_API_KEY>
Paramètres : model="gpt-image-2.5-flare", size="1536x1024", n=1,
response_format="b64_json", output_format="png".

Vérifiez d'abord Node.js et la présence de la variable BETTERTOKEN_IMAGE_API_KEY,
sans afficher sa valeur. Si la clé n'est pas disponible, expliquez comment la définir
en toute sécurité localement pour le processus d'exécution ; ne demandez pas d'envoyer la clé dans le chat.
Ne lisez pas d'autres magasins d'identifiants et ne modifiez pas les paramètres de Codex.
Utilisez les fonctionnalités intégrées de Node.js, sans installer de dépendances.
N'écrasez pas les fichiers existants : en cas de conflit de nom, choisissez un nouveau nom.

Lorsque l'environnement est prêt, effectuez exactement une requête payante, n=1,
avec un timeout de 300 secondes. Ne répétez pas la requête automatiquement en cas d'erreur
ou de timeout ; indiquez le statut et suggérez de vérifier les débits avant de recommencer.
N'affichez pas la clé, l'en-tête Authorization ou la réponse complète avec base64.
Décodez data[0].b64_json et enregistrez website-concept.png.
Vérifiez que le PNG s'ouvre, affichez l'image et ses dimensions réelles,
indiquez le chemin vers le script et le PNG. En cas d'échec, ne prétendez pas que la génération a réussi.
Arrêtez-vous là : n'ouvrez pas et ne modifiez pas Figma pour le moment.

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 = `Créez un concept de design de site web desktop à plat pour un studio
d'architecture d'intérieur fictif appelé Northline. Affichez un seul écran sans
cadre de navigateur ni d'appareil. Utilisez un arrière-plan blanc cassé, des accents
vert foncé et une grille épurée. Incluez une navigation, un titre principal, un bouton et trois cartes.
Navigation exacte : Projets | Services | À propos.
Titre exact : Des espaces pour la vie quotidienne.
Bouton exact : Discuter d'un projet.
Libellés exacts des cartes : Résidences | Espaces de travail | Consultation.
Gardez le texte lisible et laissez suffisamment d'espace entre les 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"
}

Utilisez Computer Use pour reconstruire le fichier website-concept.png joint dans le
fichier Figma Design que j'ai ouvert pour cette tâche. Travaillez uniquement sur une
nouvelle page nommée Northline concept. Ne modifiez pas les autres pages, ne partagez pas
le fichier et ne le publiez pas.

Créez un frame desktop de 1440 px de large. Utilisez l'image comme référence visuelle.
Reconstruisez la navigation, le titre, le bouton et les cartes de services avec des calques
Figma natifs. N'utilisez pas une image pleine page comme design final.

Utilisez ces textes exacts :
Projets | Services | À propos
Des espaces pour la vie quotidienne
Discuter d'un projet
Résidences | Espaces de travail | Consultation

Utilisez du texte modifiable et l'auto layout là où le contenu doit s'adapter. Rendez le
bouton principal réutilisable. Conservez les photos sous forme de remplissages d'image si
nécessaire ; ne prétendez pas qu'elles sont devenues des vecteurs modifiables.

Construisez d'abord la navigation et le hero, inspectez-les, puis poursuivez avec les
trois cartes. Respectez les proportions, les couleurs et les espacements de référence. Si une
police n'est pas disponible, signalez-le et utilisez un substitut disponible.

À la fin, vérifiez que le titre peut être modifié, que le bouton peut être redimensionné
et que le frame peut être rétréci sans chevauchement de texte. Signalez toute différence
restante ainsi que les noms de la page et du frame afin que je puisse les inspecter.