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.

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.