GPT Image 2.5 can create a website concept; Codex with GPT-6 Astra and Computer Use can rebuild it in Figma. The acceptance criterion is editable text, buttons and containers—not a PNG stretched across a frame.
Use an official subscription path when your account already has the needed model and Computer Use. The alternative is an Image 2.5 API call through BetterToken plus a clean API configuration for Astra. Plugin availability, application permissions and Figma access remain separate checks. The X example by Hideki Kobayashi is its author's example, not our end-to-end test or a guarantee of exact reconstruction.
Build one inspectable concept
Start with one desktop screen: navigation, heading, primary button and several cards. Keep exact copy outside the image so it can become Figma text layers. Generate one image, open the PNG, and verify that it is readable and useful as a reference; the requested size is not evidence of the delivered size.
Choose Flare for a first concept and Sunburst where editing precision matters. In BetterToken Workspace, select a key that has the required image-model group; a key for one group is not automatically valid for the Astra step. Use one paid request with n=1, a 300-second timeout, no automatic retry, and stop after the PNG. Inspect request history and charges before retrying a timeout.
Configure and verify Codex separately
Back up config.toml and auth.json, merge the provider settings without duplicate TOML tables, and keep the API key local. API-key authentication does not itself prove access to Computer Use. Restart Codex, send a short message to verify the model connection, then separately confirm that Computer Use can see Figma.
Use a separate Figma file or page, sign in yourself, and never give the agent passwords or API keys. First ask it to identify the open file and visible layers without writing. For the build, restrict it to a named new page and require native text, buttons, containers and auto layout; photos may remain image fills.
Accept an editable design
Change the heading to a longer string, resize and relabel the button, and narrow the main frame. Check that text does not overlap and that layer names are understandable. If the result is only an imported PNG, rebuild one section with native layers. A model or 401 error calls for checking the API configuration and key access; a failure to control the app calls for checking Computer Use permissions.
Exact values and references
When CODEX_HOME is set, use that directory; the usual Windows location is %USERPROFILE%\\.codex.
Use gpt-image-2.5-flare or gpt-image-2.5-sunburst for the image step, and gpt-6-astra for the Codex step. The public catalog snapshot is dated 10 September 2026: each image call is $0.05, five calls are $0.25, and the GPT group multiplier is 0.68. Astra rates per million tokens are $6.80 / $34.00 / $0.68 / $8.50 up to 272,000 tokens and $13.60 / $51.00 / $1.36 / $17.00 above that threshold. These are a snapshot, not a promised final bill. Verify the current catalog, key conditions, actual usage, and access to the required groups.
References: 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
Copyable implementation samples
The following samples are intentionally retained without edits. Do not expose a key, repeat a failed paid request automatically, or treat a chat response as proof that Computer Use can control 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.
Create and run a Node.js script generate-design.mjs in the current folder,
which will fetch one webpage concept via the BetterToken API.
Use the HTTP API, not the built-in Codex image generation tool.
Design: one flat website screen for a fictional interior design studio Northline,
without a browser frame or perspective. Off-white background, dark green accents,
clean grid. Navigation: Projects | Services | About.
Heading: Spaces for everyday life. Button: Discuss a project.
Three cards: Homes | Workspaces | Consultation.
POST https://www.bettertoken.ai/v1/images/generations
Content-Type: application/json
Authorization: Bearer <value of BETTERTOKEN_IMAGE_API_KEY>
Parameters: model="gpt-image-2.5-flare", size="1536x1024", n=1,
response_format="b64_json", output_format="png".
First check Node.js and the presence of the BETTERTOKEN_IMAGE_API_KEY variable,
without printing its value. If the key is unavailable, explain how to safely set
it locally for the launch process; do not ask to send the key in chat.
Do not read other credential stores or change Codex settings.
Use built-in Node.js features, without installing dependencies.
Do not overwrite existing files: choose a new name if there is a conflict.
When the environment is ready, execute exactly one paid request, n=1,
with a 300-second timeout. Do not retry the request automatically on error
or timeout; report the status and suggest checking charges before retrying.
Do not print the key, the Authorization header, or the full base64 response.
Decode data[0].b64_json and save website-concept.png.
Check that the PNG opens, show the image and its actual dimensions,
and indicate the path to the script and PNG. On failure, do not claim successful generation.
Stop here: do not open or modify Figma yet.
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.
Originally published on the BetterToken blog.
BetterToken provides pay-as-you-go access to AI model APIs through
OpenAI-compatible and Anthropic-compatible endpoints — useful if you are wiring
Claude Code, Codex, or your own tooling to a custom base URL.
See the docs to get started.
Top comments (0)