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.

Crie um conceito de design de site plano para desktop para um estúdio
fictício de design de interiores chamado Northline. Mostre uma única tela,
não um mockup de navegador. Use um fundo off-white, detalhes em verde-escuro
e uma grade limpa. Inclua uma barra de navegação, um título hero, um botão
principal e três cartões de serviço. Sem perspectiva, moldura de dispositivo
ou sobreposições decorativas de interface.
Use exatamente estes rótulos:
Navegação: Projetos | Serviços | Sobre
Título: Espaços para o dia a dia
Botão: Discutir um projeto
Cartões: Residências | Espaços de trabalho | Consultoria
Mantenha o texto legível e deixe espaço suficiente entre as seções.

Crie e execute na pasta atual o script Node.js generate-design.mjs,
que obterá um conceito de página web por meio da API BetterToken.
Use a API HTTP, e não a ferramenta integrada de geração de imagens do Codex.

Design: uma tela plana de site para o estúdio fictício de design de interiores Northline,
sem moldura de navegador e sem perspectiva. Fundo off-white, detalhes em verde-escuro,
grade limpa. Navegação: Projetos | Serviços | Sobre.
Título: Espaços para o dia a dia. Botão: Discutir um projeto.
Três cartões: Residências | Espaços de trabalho | Consultoria.

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

Primeiro verifique o Node.js e a presença da variável BETTERTOKEN_IMAGE_API_KEY,
sem exibir o seu valor. Se a chave não estiver disponível, explique como defini-la
com segurança localmente para o processo de execução; não peça para enviar a chave no chat.
Não leia outros armazenamentos de credenciais e não altere as configurações do Codex.
Use recursos nativos do Node.js, sem instalar dependências.
Não sobrescreva arquivos existentes: em caso de conflito, escolha um novo nome.

Quando o ambiente estiver pronto, execute exatamente uma solicitação paga, n=1,
com timeout de 300 segundos. Não repita a solicitação automaticamente em caso de erro
ou timeout; informe o status e sugira verificar as cobranças antes de repetir.
Não exiba a chave, o cabeçalho Authorization ou a resposta completa com base64.
Decodifique data[0].b64_json e salve website-concept.png.
Verifique se a PNG abre, mostre a imagem e suas dimensões reais,
informe o caminho para o script e para a PNG. Em caso de falha, não afirme que a geração foi bem-sucedida.
Pare por aqui: não abra nem modifique o Figma por enquanto.

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 = `Crie um conceito de design de site plano para desktop para um
estúdio fictício de design de interiores chamado Northline. Mostre uma tela sem
navegador ou moldura de dispositivo. Use um fundo off-white, detalhes em
verde-escuro e uma grade limpa. Inclua navegação, um título hero, um botão e
três cartões.
Navegação exata: Projetos | Serviços | Sobre.
Título exato: Espaços para o dia a dia.
Botão exato: Discutir um projeto.
Rótulos exatos dos cartões: Residências | Espaços de trabalho | Consultoria.
Mantenha o texto legível e deixe espaço suficiente entre as seções.`;

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 o Computer Use para reconstruir o website-concept.png em anexo no arquivo
do Figma Design que abri para esta tarefa. Trabalhe apenas em uma nova página chamada
Northline concept. Não modifique outras páginas, não compartilhe o arquivo nem o publique.

Crie um frame de desktop com 1440 px de largura. Use a imagem como referência visual.
Reconstrua a navegação, o título, o botão e os cartões de serviço com camadas
nativas do Figma. Não use uma imagem de página inteira como o design finalizado.

Use estes textos exatos:
Projetos | Serviços | Sobre
Espaços para o dia a dia
Discutir um projeto
Residências | Espaços de trabalho | Consultoria

Use texto editável e auto layout onde o conteúdo precisar ser redimensionado. Torne o
botão primário reutilizável. Mantenha fotos como preenchimentos de imagem se necessário;
não finja que elas se tornaram vetores editáveis.

Primeiro construa a navegação e o hero, inspecione-os e depois continue com os
três cartões. Reproduza as proporções, cores e espaçamentos da referência. Se uma
fonte não estiver disponível, relate isso e use uma substituta disponível.

Ao final, verifique se o título pode ser editado, se o botão pode ser redimensionado
e se o frame pode ser estreitado sem sobreposição de texto. Relate quaisquer
diferenças restantes e os nomes da página e do frame para que eu possa inspecioná-los.