GPT Image 2.5 a Figma con Codex y Astra

GPT Image 2.5 puede crear el concepto visual de un sitio; Codex con GPT-6 Astra y Computer Use puede reconstruirlo en Figma. El resultado aceptable son capas de texto, botones y contenedores editables, no una PNG estirada en un frame.

Use la ruta de suscripción oficial si su cuenta ya tiene el modelo y Computer Use. La alternativa es generar Image 2.5 mediante la API de BetterToken y configurar Astra con una API limpia. El plugin, los permisos del sistema y el acceso a Figma se comprueban por separado. El caso de Hideki Kobayashi es el ejemplo de su autor, no una prueba integral nuestra ni una garantía de reconstrucción exacta.

Cree un concepto verificable

Empiece con una sola pantalla de escritorio: navegación, título, botón principal y tarjetas. Conserve los textos exactos fuera de la imagen para convertirlos en capas de texto. Genere una PNG, ábrala y compruebe que sirve de referencia; el tamaño solicitado no prueba el tamaño entregado.

Empiece con Flare y use Sunburst si importa más la precisión de edición. En BetterToken Workspace elija una key con el grupo de imagen necesario; una key de un grupo no cubre automáticamente Astra. Ejecute una sola solicitud de pago con n=1, timeout de 300 segundos y sin reintentos automáticos. Revise historial y cargos antes de repetir un timeout.

Configure Codex por separado

Haga copia segura de config.toml y auth.json, integre los ajustes sin duplicar tablas TOML y conserve la API key en local. La autenticación por API key no demuestra que Computer Use esté disponible. Reinicie Codex, pruebe la conexión con un mensaje breve y confirme aparte que Computer Use ve Figma.

Use un archivo o página de Figma aislado, inicie sesión usted mismo y no entregue contraseñas ni keys al agente. Primero pídale identificar el archivo abierto y las capas visibles sin escribir. Para construir, limite los cambios a una página nueva con nombre y exija texto, botones, contenedores y auto layout nativos; las fotos pueden quedar como rellenos de imagen.

Acepte un diseño editable

Cambie el título por uno más largo, cambie texto y ancho del botón y estreche el frame principal. Compruebe solapamientos y nombres de capas. Si solo se importó una PNG, reconstruya una sección con capas nativas. Un error 401 o de modelo requiere revisar API y key; si no controla la aplicación, revise permisos de Computer Use.

Valores exactos y referencias

Si CODEX_HOME está definido, use ese directorio; en Windows la ubicación habitual es %USERPROFILE%\\.codex.

Use gpt-image-2.5-flare o gpt-image-2.5-sunburst para la imagen y gpt-6-astra para la etapa de Codex. La captura del catálogo público es del 10 de septiembre de 2026: cada llamada de imagen cuesta $0.05, cinco llamadas cuestan $0.25 y el multiplicador del grupo GPT es 0.68. Las tarifas de Astra por millón de tokens son $6.80 / $34.00 / $0.68 / $8.50 hasta 272,000 tokens y $13.60 / $51.00 / $1.36 / $17.00 por encima del umbral. Es una captura, no una factura final prometida. Compruebe el catálogo actual, las condiciones de la key, el uso real y el acceso a los grupos necesarios.

Referencias: 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

Ejemplos de implementación copiables

Los ejemplos siguientes se conservan sin cambios de forma intencional. No exponga una key, no repita automáticamente una solicitud pagada fallida ni tome una respuesta del chat como prueba de que Computer Use puede controlar 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.