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.

Crea un concepto de diseño plano de sitio web de escritorio para un estudio
ficticio de diseño de interiores llamado Northline. Muestra una sola pantalla,
no una maqueta de navegador. Usa un fondo blanco roto, acentos en verde oscuro
y una cuadrícula limpia. Incluye una barra de navegación, un título principal,
un botón principal y tres tarjetas de servicios. Sin perspectiva, marco de
dispositivo ni superposiciones decorativas de interfaz.
Usa estas etiquetas exactas:
Navegación: Proyectos | Servicios | Sobre nosotros
Título: Espacios para la vida cotidiana
Botón: Hablar de un proyecto
Tarjetas: Hogares | Espacios de trabajo | Consultoría
Mantén el texto legible y deja suficiente espacio entre las secciones.

Crea y ejecuta en la carpeta actual un script de Node.js llamado generate-design.mjs
que obtenga un concepto de página web a través de la API de BetterToken.
Usa la API HTTP, no la herramienta integrada de generación de imágenes de Codex.

Diseño: una pantalla plana de sitio web para el estudio ficticio de diseño de interiores Northline,
sin marco de navegador ni perspectiva. Fondo blanco roto, acentos en verde oscuro,
cuadrícula limpia. Navegación: Proyectos | Servicios | Sobre nosotros.
Título: Espacios para la vida cotidiana. Botón: Hablar de un proyecto.
Tres tarjetas: Hogares | Espacios de trabajo | Consultoría.

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

Primero verifica Node.js y la presencia de la variable BETTERTOKEN_IMAGE_API_KEY,
sin mostrar su valor. Si la clave no está disponible, explica cómo configurarla
de forma segura localmente para el proceso de ejecución; no pidas que envíen la clave al chat.
No leas otros almacenes de credenciales ni modifiques la configuración de Codex.
Usa las herramientas integradas de Node.js, sin instalar dependencias.
No sobrescribas archivos existentes: si hay coincidencia, elige un nuevo nombre.

Cuando el entorno esté listo, realiza exactamente una solicitud de pago, n=1,
con un tiempo de espera de 300 segundos. No repitas la solicitud automáticamente ante un error
o tiempo de espera; informa el estado y sugiere revisar los cargos antes de reintentar.
No muestres la clave, el encabezado Authorization ni la respuesta completa con base64.
Decodifica data[0].b64_json y guarda website-concept.png.
Verifica que el PNG se abra, muestra la imagen y sus dimensiones reales,
indica la ruta al script y al PNG. En caso de fallo, no afirmes que la generación fue exitosa.
Detente ahí: por ahora no abras ni modifiques 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 = `Crea un concepto de diseño plano de sitio web de escritorio para un
estudio ficticio de diseño de interiores llamado Northline. Muestra una sola pantalla
sin marco de navegador ni de dispositivo. Usa un fondo blanco roto, acentos en verde oscuro
y una cuadrícula limpia. Incluye navegación, un título principal, un botón y tres tarjetas.
Navegación exacta: Proyectos | Servicios | Sobre nosotros.
Título exacto: Espacios para la vida cotidiana.
Botón exacto: Hablar de un proyecto.
Etiquetas exactas de las tarjetas: Hogares | Espacios de trabajo | Consultoría.
Mantén el texto legible y deja suficiente espacio entre las secciones.`;

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

Usa Computer Use para reconstruir el archivo adjunto website-concept.png en el
archivo de Figma Design que he abierto para esta tarea. Trabaja únicamente en una
página nueva llamada Northline concept. No modifiques otras páginas, no compartas el archivo ni lo publiques.

Crea un frame de escritorio de 1440 px de ancho. Usa la imagen como referencia visual.
Reconstruye la navegación, el título, el botón y las tarjetas de servicios con capas
nativas de Figma. No uses una imagen de página completa como diseño final.

Usa estos textos exactos:
Proyectos | Servicios | Sobre nosotros
Espacios para la vida cotidiana
Hablar de un proyecto
Hogares | Espacios de trabajo | Consultoría

Usa texto editable y auto layout donde el contenido deba cambiar de tamaño. Haz que el
botón principal sea reutilizable. Conserva las fotos como rellenos de imagen si es necesario;
no finjas que se han convertido en vectores editables.

Primero construye la navegación y la sección principal, inspecciónalas y luego continúa con las
tres tarjetas. Respeta las proporciones, los colores y el espaciado de referencia. Si una
fuente no está disponible, infórmalo y usa un sustituto disponible.

Al final, verifica que el título se pueda editar, que el botón se pueda redimensionar
y que el frame se pueda estrechar sin que el texto se solape. Informa sobre cualquier
diferencia restante y los nombres de la página y del frame para que pueda inspeccionarlos.