GPT Image 2.5 para Figma com Codex e Astra

O GPT Image 2.5 cria o conceito visual; Codex com GPT-6 Astra e Computer Use pode reconstruí-lo no Figma. O resultado aceito tem texto, botões e contêineres editáveis, e não uma PNG esticada no frame.

Use o caminho da assinatura oficial se a conta já tiver o modelo e Computer Use. A alternativa é gerar a imagem pela API BetterToken e configurar Astra por API. Plugin, permissões do sistema e acesso ao Figma são verificações separadas. O caso de Hideki Kobayashi é um relato do autor, não um teste integral nosso nem garantia de cópia perfeita.

Crie um conceito que possa ser inspecionado

Comece com uma tela desktop: navegação, título, botão e cartões. Mantenha o texto exato fora da imagem para convertê-lo em camadas. Gere uma PNG, abra-a e confirme que serve de referência; o tamanho pedido não prova o tamanho entregue.

Use Flare para o primeiro conceito e Sunburst quando a precisão de edição importar mais. No Workspace BetterToken, escolha uma key com o grupo de imagem necessário; acesso a um grupo não habilita automaticamente Astra. Faça uma única solicitação paga com n=1, timeout de 300 segundos e sem repetição automática. Antes de repetir um timeout, confira histórico e cobranças.

Configure Codex e valide o arquivo

Faça backup de config.toml e auth.json, una as configurações sem duplicar tabelas TOML e mantenha a API key local. Autenticação por key não prova acesso ao Computer Use. Reinicie o Codex, teste a conexão com uma mensagem curta e depois confirme separadamente que o Computer Use vê o Figma.

Use arquivo ou página Figma isolada, entre na conta por conta própria e não entregue senhas ou keys ao agente. Primeiro peça a identificação do arquivo aberto e das camadas visíveis sem alterações. Restrinja a construção a uma página nova nomeada e exija texto, botões, contêineres e auto layout nativos.

Aceite somente o que pode ser editado

Troque o título por outro maior, altere texto e largura do botão e estreite o frame. Verifique sobreposições e nomes das camadas. Se houver só uma PNG importada, reconstrua uma seção com camadas nativas. Erro 401 ou de modelo pede revisão de API e key; falta de controle do app pede permissões do Computer Use.

Valores exatos, referências e exemplos copiáveis

Quando CODEX_HOME estiver definido, use esse diretório; no Windows, o local habitual é %USERPROFILE%\\.codex.

Mantenha estes valores exatos: gpt-image-2.5-flare, gpt-image-2.5-sunburst, gpt-6-astra, $0.05 por chamada de imagem, $0.25 por cinco chamadas e multiplicador do grupo GPT de 0.68. Os preços da Astra por milhão de tokens são $6.80 / $34.00 / $0.68 / $8.50 até 272,000 tokens e $13.60 / $51.00 / $1.36 / $17.00 acima desse limite. Confira o catálogo atual, as condições da key e o uso real; este não é um valor final fixo.

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

Os exemplos de implementação a seguir continuam copiáveis byte por byte. Não exponha API keys, não repita automaticamente uma solicitação paga que falhou e não trate uma resposta do chat como prova de controle do 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.