GPT Image 2.5 zu Figma mit Codex und Astra

GPT Image 2.5 erzeugt ein visuelles Website-Konzept; Codex mit GPT-6 Astra und Computer Use kann es in Figma nachbauen. Akzeptabel sind editierbare Texte, Buttons und Container, nicht eine über den Frame gezogene PNG.

Nutzen Sie den offiziellen Aboweg, wenn Konto, Modell und Computer Use bereits verfügbar sind. Der alternative Weg erstellt das Bild über die BetterToken API und richtet Astra per API ein. Plugin, Systemrechte und Figma-Zugriff sind getrennt zu prüfen. Der Fall von Hideki Kobayashi ist das Beispiel seines Autors, kein eigener End-to-End-Test und keine Garantie einer exakten Rekonstruktion.

Ein prüfbares Konzept erstellen

Beginnen Sie mit einem Desktop-Screen: Navigation, Überschrift, Hauptbutton und Karten. Halten Sie den exakten Text außerhalb des Bildes bereit, damit Figma daraus Textebenen macht. Erzeugen und öffnen Sie eine PNG und prüfen Sie sie als Referenz; die angeforderte Größe beweist nicht die tatsächliche Ausgabegröße.

Starten Sie mit Flare und wählen Sie Sunburst, wenn Bearbeitungspräzision wichtiger ist. Wählen Sie im BetterToken Workspace eine key mit der nötigen Image-Gruppe; eine Gruppe berechtigt nicht automatisch für Astra. Senden Sie genau eine kostenpflichtige Anfrage mit n=1, 300 Sekunden timeout und ohne automatischen retry. Prüfen Sie Verlauf und Kosten, bevor Sie nach einem timeout erneut senden.

Codex getrennt einrichten

Sichern Sie config.toml und auth.json, führen Sie die Einstellungen ohne doppelte TOML-Tabellen zusammen und halten Sie den API key lokal. API-key-Authentifizierung beweist keinen Computer-Use-Zugriff. Starten Sie Codex neu, prüfen Sie die Modellverbindung mit einer kurzen Nachricht und prüfen Sie anschließend separat, ob Computer Use Figma sieht.

Nutzen Sie eine getrennte Figma-Datei oder -Seite, melden Sie sich selbst an und geben Sie dem Agenten keine Passwörter oder keys. Lassen Sie zuerst die offene Datei und sichtbare Ebenen ohne Änderungen benennen. Begrenzen Sie den Aufbau auf eine benannte neue Seite und verlangen Sie native Texte, Buttons, Container und auto layout.

Editierbares Ergebnis abnehmen

Ersetzen Sie die Überschrift durch einen längeren Text, ändern und skalieren Sie den Button und verschmälern Sie den Frame. Prüfen Sie Überlappungen und Ebenennamen. Wurde nur eine PNG importiert, bauen Sie einen Bereich mit nativen Ebenen neu. Bei 401 oder Modellfehlern prüfen Sie API und key; bei fehlender App-Steuerung die Computer-Use-Berechtigungen.

Genaue Werte, Quellen und kopierbare Beispiele

Wenn CODEX_HOME gesetzt ist, verwenden Sie dieses Verzeichnis; unter Windows liegt das Standardverzeichnis bei %USERPROFILE%\\.codex.

Behalten Sie diese exakten Werte bei: gpt-image-2.5-flare, gpt-image-2.5-sunburst, gpt-6-astra, $0.05 pro Bildaufruf, $0.25 für fünf Aufrufe und den Multiplikator der GPT-Gruppe von 0.68. Die Astra-Preise pro Million Token lauten bis einschließlich 272,000 Token $6.80 / $34.00 / $0.68 / $8.50 und oberhalb der Schwelle $13.60 / $51.00 / $1.36 / $17.00. Prüfen Sie den aktuellen Katalog, die Bedingungen des Schlüssels und die tatsächliche Nutzung; dies ist kein fester Endpreis.

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

Die folgenden Implementierungsbeispiele bleiben bytegenau kopierbar. Geben Sie keine API-Schlüssel preis, wiederholen Sie eine fehlgeschlagene bezahlte Anfrage nicht automatisch und werten Sie eine Chat-Antwort nicht als Beleg dafür, dass Figma gesteuert werden kann.

Erstelle ein flaches Desktop-Website-Designkonzept für ein fiktives
Innenarchitekturstudio namens Northline. Zeige einen Bildschirm, kein Browser-Mockup.
Verwende einen cremeweißen Hintergrund, dunkelgrüne Akzente und ein klares Raster.
Füge eine Navigationsleiste, eine Hauptüberschrift, einen primären Button und drei
Leistungskarten ein. Keine Perspektive, kein Geräterahmen oder dekorative UI-Overlays.
Verwende genau diese Beschriftungen:
Navigation: Projekte | Leistungen | Über uns
Überschrift: Räume für den Alltag
Button: Projekt besprechen
Karten: Wohnräume | Arbeitsbereiche | Beratung
Halte den Text gut lesbar und lasse genügend Abstand zwischen den Abschnitten.

Erstelle und führe im aktuellen Ordner ein Node.js-Skript namens generate-design.mjs aus,
das ein einzelnes Webseiten-Konzept über die BetterToken API abruft.
Verwende die HTTP API, nicht das integrierte Tool zur Bildgenerierung von Codex.

Design: ein flacher Bildschirm der Website eines fiktiven Innenarchitekturstudios namens Northline,
ohne Browserrahmen und Perspektive. Cremeweißer Hintergrund, dunkelgrüne Akzente,
klares Raster. Navigation: Projekte | Leistungen | Über uns.
Überschrift: Räume für den Alltag. Button: Projekt besprechen.
Drei Karten: Wohnräume | Arbeitsbereiche | Beratung.

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

Prüfe zuerst Node.js und das Vorhandensein der Variable BETTERTOKEN_IMAGE_API_KEY,
ohne ihren Wert auszugeben. Wenn der Schlüssel nicht verfügbar ist, erkläre, wie er für
den Startprozess sicher lokal gesetzt werden kann; bitte nicht darum, den Schlüssel im Chat zu senden.
Lies keine anderen Anmeldedatenspeicher aus und ändere keine Codex-Einstellungen.
Nutze die integrierten Funktionen von Node.js, ohne Abhängigkeiten zu installieren.
Überschreibe keine vorhandenen Dateien: Wähle bei einer Übereinstimmung einen neuen Namen.

Sobald die Umgebung bereit ist, führe genau eine kostenpflichtige Anfrage aus, n=1,
mit einem Timeout von 300 Sekunden. Wiederhole die Anfrage bei einem Fehler oder
Timeout nicht automatisch; melde den Status und schlage vor, die Abrechnung vor einer Wiederholung zu prüfen.
Gib den Schlüssel, den Authorization-Header oder die vollständige base64-Antwort nicht aus.
Dekodiere data[0].b64_json und speichere website-concept.png.
Überprüfe, ob sich die PNG-Datei öffnen lässt, zeige das Bild und seine tatsächlichen Abmessungen,
gib den Pfad zum Skript und zur PNG an. Behaupte bei einem Fehlschlag nicht, dass die Generierung erfolgreich war.
Halte hier an: Öffne und ändere Figma vorerst nicht.

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 = `Erstelle ein flaches Desktop-Website-Designkonzept für ein fiktives
Innenarchitekturstudio namens Northline. Zeige einen Bildschirm ohne Browser-
oder Geräterahmen. Verwende einen cremeweißen Hintergrund, dunkelgrüne Akzente und ein
klares Raster. Integriere eine Navigation, eine Hauptüberschrift, einen Button und drei Karten.
Exakte Navigation: Projekte | Leistungen | Über uns.
Exakte Überschrift: Räume für den Alltag.
Exakter Button: Projekt besprechen.
Exakte Kartenbeschriftungen: Wohnräume | Arbeitsbereiche | Beratung.
Halte den Text gut lesbar und lasse genügend Abstand zwischen den Abschnitten.`;

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"
}

Verwende Computer Use, um die angehängte Datei website-concept.png in der Figma-Design-Datei
nachzubauen, die ich für diese Aufgabe geöffnet habe. Arbeite nur auf einer neuen Seite namens
Northline Konzept. Verändere keine anderen Seiten, teile die Datei nicht und veröffentliche sie nicht.

Erstelle einen Desktop-Frame mit einer Breite von 1440 px. Verwende das Bild als visuelle Referenz.
Baue Navigation, Überschrift, Button und Leistungskarten mit nativen Figma-Ebenen
nach. Verwende kein ganzseitiges Bild als fertiges Design.

Verwende genau diese Texte:
Projekte | Leistungen | Über uns
Räume für den Alltag
Projekt besprechen
Wohnräume | Arbeitsbereiche | Beratung

Verwende editierbaren Text und Auto-Layout, wo Inhalte ihre Größe anpassen müssen. Gestalte den
primären Button wiederverwendbar. Behalte Fotos bei Bedarf als Bildfüllungen bei; behaupte
nicht, dass sie zu editierbaren Vektoren geworden sind.

Erstelle zuerst die Navigation und den Hero-Bereich, überprüfe sie und fahre dann mit den
drei Karten fort. Achte auf die Proportionen, Farben und Abstände der Referenz. Falls eine
Schriftart nicht verfügbar ist, melde dies und verwende einen verfügbaren Ersatz.

Prüfe am Ende, ob die Überschrift bearbeitet werden kann, der Button in der Größe anpassbar ist
und der Frame verschmälert werden kann, ohne dass Text überlappt. Melde alle
verbleibenden Abweichungen sowie die Seiten- und Frame-Namen, damit ich sie prüfen kann.