GPT Image 2.5からFigmaへ：CodexとAstra

GPT Image 2.5でサイトの視覚コンセプトを作り、Codex、GPT-6 Astra、Computer UseでFigmaに再構築できます。受け入れる成果物は編集可能なテキスト、ボタン、コンテナであり、フレーム全体に伸ばしたPNGではありません。

アカウントに必要なモデルとComputer Useがある場合は公式サブスクリプションの経路を使います。代替経路ではBetterToken APIでImage 2.5を生成し、AstraをAPI設定します。プラグイン、OS権限、Figmaへのアクセスは別々に確認します。Hideki Kobayashiの例は投稿者自身の例であり、当社の通しテストや正確な復元の保証ではありません。

検証できるコンセプトを作る

最初はデスクトップ画面を一つに絞ります。ナビゲーション、見出し、主要ボタン、カードを含め、正確な文言は画像の外に保持してFigmaのテキストレイヤーにします。PNGを一枚生成して開き、参照として読めるか確認します。要求したサイズは実際の出力サイズの証明ではありません。

初案にはFlareを使い、編集精度が重要ならSunburstを選びます。BetterToken Workspaceで必要なimage-model groupを持つkeyを選びます。一つのgroupへのアクセスがAstraも自動的に有効にするわけではありません。n=1、300秒timeout、自動retryなしで有料リクエストを一回だけ実行し、timeout後の再送前に履歴と請求を確認します。

Codexを別に設定して確認する

config.tomlとauth.jsonを安全にバックアップし、重複したTOML tableを作らずに設定を統合し、API keyはローカルに保管します。API key認証はComputer Useが使える証明ではありません。Codexを再起動して短いメッセージでモデル接続を確認し、次にComputer UseがFigmaを認識するかを別途確認します。

専用のFigma file/pageを使い、自分でログインし、パスワードやkeyをagentに渡しません。最初は書き込みなしで開いているfileと表示layerを答えさせます。作業先を名前付きの新規pageに限定し、native text、button、container、auto layoutを要求します。

編集可能なデザインを受け入れる

長い見出しに置換し、buttonの文言と幅を変え、main frameを狭めます。重なりとlayer名を確認します。PNGのimportだけなら一つのsectionをnative layerで作り直します。401やmodel errorならAPI設定とkey accessを、アプリを操作できないならComputer Use権限を確認します。

正確な値、参照先、コピー可能な実装例

CODEX_HOMEが設定されている場合はそのdirectoryを使います。Windowsの通常の場所は%USERPROFILE%\\.codexです。

次の値は正確に維持します。gpt-image-2.5-flare、gpt-image-2.5-sunburst、gpt-6-astra、画像1回あたり$0.05、5回で$0.25、GPT group multiplierは0.68です。Astraの100万tokenあたりの料金は272,000 tokens以下で$6.80 / $34.00 / $0.68 / $8.50、これを超える場合は$13.60 / $51.00 / $1.36 / $17.00です。現在のcatalog、keyの条件、実際のusageを確認してください。固定の最終請求額ではありません。

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

以下の実装例はbyte単位でそのままコピーできます。API keyを公開せず、失敗した有料requestを自動で再実行せず、chatの応答を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.