GPT Image 2.5からFigmaへ：CodexとAstra
GPT Image 2.5のコンセプトを、Codex、GPT-6 Astra、Computer Useで編集可能なFigmaレイヤーへ変換します。
目次
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操作が可能な証拠として扱わないでください。
架空のインテリアデザインスタジオ「Northline」向けの、フラットなデスクトップWebサイトデザインコンセプトを作成してください。ブラウザモックアップではなく、1画面のみを表示してください。
オフホワイトの背景、ダークグリーンのアクセント、整然としたグリッドを使用してください。
ナビゲーションバー、ヒーロー見出し、主要なボタン1つ、3つのサービスカードを含めてください。遠近感、デバイスフレーム、装飾的なUIオーバーレイは含めないでください。
以下のラベルを正確に使用してください：
ナビゲーション: プロジェクト | サービス | 会社概要
見出し: 日々の暮らしのための空間
ボタン: プロジェクトを相談する
カード: 住宅 | ワークスペース | コンサルティング
テキストの可読性を保ち、セクション間には十分な余白を確保してください。カレントフォルダー内に、BetterTokenのAPIを介してWebページのコンセプトを1つ取得するNode.jsスクリプト generate-design.mjs を作成して実行してください。
Codexの組み込み画像生成ツールではなく、HTTP APIを使用してください。
デザイン: 架空のインテリアスタジオ Northline のフラットなWebサイト画面1つ。ブラウザの枠や遠近感はなし。
オフホワイトの背景、ダークグリーンのアクセント、整然としたグリッド。
ナビゲーション: プロジェクト | サービス | 会社概要
見出し: 日々の暮らしのための空間
ボタン: プロジェクトを相談する
3つのカード: 住宅 | ワークスペース | コンサルティング
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の組み込み機能のみを使用してください。
既存のファイルを上書きしないでください。同名ファイルが存在する場合は新しい名前を選択してください。
環境の準備ができたら、300秒のタイムアウトを設定し、n=1 で有料リクエストを1回だけ実行してください。エラーやタイムアウトが発生しても、リクエストを自動で再試行しないでください。ステータスを報告し、再試行前に請求履歴を確認するよう促してください。
キー、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 = `架空のインテリアデザインスタジオ「Northline」向けの、フラットなデスクトップWebサイトデザインコンセプトを作成してください。ブラウザやデバイスフレームなしで1画面を表示してください。オフホワイトの背景、ダークグリーンのアクセント、整然としたグリッドを使用してください。ナビゲーション、ヒーロー見出し、ボタン1つ、3つのカードを含めてください。
正確なナビゲーション: プロジェクト | サービス | 会社概要
正確な見出し: 日々の暮らしのための空間
正確なボタン: プロジェクトを相談する
正確なカードラベル: 住宅 | ワークスペース | コンサルティング
テキストの可読性を保ち、セクション間には十分な余白を確保してください。`;
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"
}このタスクのために開いたFigma Designファイル内で、Computer Useを使用して、添付の website-concept.png を再構築してください。「Northline concept」という名前の新規ページでのみ作業してください。他のページを変更したり、ファイルを共有または公開したりしないでください。
幅 1440 px のデスクトップフレームを作成してください。画像を視覚的なリファレンスとして使用してください。ナビゲーション、見出し、ボタン、サービスカードをFigmaのネイティブレイヤーで再構築してください。完成デザインとしてページ全体の画像を使用しないでください。
以下のテキストを正確に使用してください：
プロジェクト | サービス | 会社概要
日々の暮らしのための空間
プロジェクトを相談する
住宅 | ワークスペース | コンサルティング
コンテンツのサイズ変更が必要な箇所には、編集可能なテキストと auto layout を使用してください。主要なボタンは再利用可能にしてください。写真は必要に応じて画像塗りのまま保持し、編集可能なベクターになったかのように装わないでください。
まずナビゲーションとヒーローセクションを構築して確認し、その後3つのカードの作成を続けてください。リファレンスの比率、色、余白を一致させてください。フォントが利用できない場合は報告し、利用可能な代替フォントを使用してください。
最後に、タイトルが編集できること、ボタンのサイズが変更できること、テキストが重なることなくフレーム幅を狭められることを検証してください。私が確認できるように、残っている差異とページ／フレーム名を報告してください。
