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 कॉन्फ़िगरेशन है। प्लगइन, ऐप अनुमति और Figma पहुँच अलग जांचें हैं। Hideki Kobayashi का उदाहरण लेखक का अनुभव है, हमारा एंड-टू-एंड परीक्षण या सटीक पुनर्निर्माण की गारंटी नहीं।

एक जांचने योग्य कॉन्सेप्ट बनाएं

पहले केवल एक डेस्कटॉप स्क्रीन बनाएं: नेविगेशन, शीर्षक, मुख्य बटन और कार्ड। सटीक कॉपी चित्र से अलग रखें ताकि वह Figma की टेक्स्ट लेयर बने। एक PNG बनाकर खोलें और पढ़ने योग्य होने की जांच करें; मांगा गया आकार वास्तविक आउटपुट का प्रमाण नहीं है।

Flare से पहला कॉन्सेप्ट शुरू करें और संपादन की सटीकता चाहिए तो Sunburst चुनें। BetterToken Workspace में सही image-model group वाला key चुनें; एक group की पहुँच Astra के लिए स्वतः पर्याप्त नहीं है। n=1 के साथ एक ही paid request, 300 सेकंड timeout और बिना स्वचालित retry चलाएं। timeout के बाद दोबारा भेजने से पहले history और charges जांचें।

Codex को अलग से सेट और जांचें

config.toml और auth.json का सुरक्षित backup लें, duplicate TOML tables के बिना settings merge करें और API key local रखें। API-key authentication Computer Use उपलब्ध होने का प्रमाण नहीं है। Codex restart करके छोटा संदेश भेजें, फिर अलग से देखें कि Computer Use Figma को देख रहा है।

अलग Figma file/page लें, स्वयं sign in करें और agent को password या key न दें। पहले उससे बिना बदलाव open file और visible layers बताने को कहें। build में केवल नामित नया page, native text, buttons, containers और auto layout मांगे; photos image fill रह सकते हैं।

संपादन योग्य परिणाम स्वीकारें

लंबा heading डालें, button को relabel और resize करें तथा main frame narrow करें। text overlap और layer names जांचें। यदि केवल PNG import हुआ है तो एक section native layers से फिर बनवाएं। 401 या model error पर API configuration और key access जांचें; app control न होने पर Computer Use permissions जांचें。

सटीक मान और संदर्भ

यदि CODEX_HOME सेट है, तो उसी directory का उपयोग करें; Windows में सामान्य स्थान %USERPROFILE%\\.codex है।

Image चरण के लिए gpt-image-2.5-flare या gpt-image-2.5-sunburst और Codex चरण के लिए gpt-6-astra चुनें। सार्वजनिक catalog snapshot 10 सितंबर 2026 का है: हर image call $0.05, पांच calls $0.25 और GPT group multiplier 0.68 है। Astra की प्रति दस लाख token दरें 272,000 tokens तक $6.80 / $34.00 / $0.68 / $8.50 और उससे ऊपर $13.60 / $51.00 / $1.36 / $17.00 हैं। यह snapshot है, निश्चित final bill नहीं। वर्तमान catalog, key की शर्तें, वास्तविक usage और जरूरी groups की access जांचें।

संदर्भ: 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

कॉपी करने योग्य implementation samples

नीचे के samples जानबूझकर बिना बदलाव रखे गए हैं। key उजागर न करें, विफल paid request को अपने आप दोबारा न चलाएं और chat response को यह प्रमाण न मानें कि Computer Use Figma को नियंत्रित कर सकता है।

Northline नामक एक काल्पनिक इंटीरियर डिज़ाइन स्टूडियो के लिए एक फ़्लैट
डेस्कटॉप वेबसाइट डिज़ाइन कॉन्सेप्ट बनाएं। केवल एक स्क्रीन दिखाएं, ब्राउज़र मॉकअप नहीं।
ऑफ़-व्हाइट बैकग्राउंड, गहरे हरे रंग के एक्सेंट और एक साफ़ ग्रिड का उपयोग करें।
इसमें एक नेविगेशन बार, एक मुख्य शीर्षक, एक प्राथमिक बटन और तीन
सेवा कार्ड शामिल करें। कोई पर्सपेक्टिव, डिवाइस फ़्रेम या सजावटी UI ओवरले नहीं होना चाहिए।
इन सटीक लेबलों का उपयोग करें:
नेविगेशन: परियोजनाएं | सेवाएं | हमारे बारे में
शीर्षक: दैनिक जीवन के लिए स्थान
बटन: परियोजना पर चर्चा करें
कार्ड: घर | कार्यस्थल | परामर्श
टेक्स्ट को पढ़ने योग्य रखें और सेक्शनों के बीच पर्याप्त जगह छोड़ें।

वर्तमान फ़ोल्डर में Node.js स्क्रिप्ट generate-design.mjs बनाएं और चलाएं,
जो BetterToken API के माध्यम से एक वेब पेज कॉन्सेप्ट प्राप्त करेगी।
HTTP API का उपयोग करें, Codex के अंतर्निहित इमेज जनरेशन टूल का नहीं।

डिज़ाइन: Northline नामक काल्पनिक इंटीरियर डिज़ाइन स्टूडियो की वेबसाइट की एक फ़्लैट स्क्रीन,
बिना किसी ब्राउज़र फ़्रेम और पर्सपेक्टिव के। ऑफ़-व्हाइट बैकग्राउंड, गहरे हरे एक्सेंट,
साफ़ ग्रिड। नेविगेशन: परियोजनाएं | सेवाएं | हमारे बारे में।
शीर्षक: दैनिक जीवन के लिए स्थान। बटन: परियोजना पर चर्चा करें।
तीन कार्ड: घर | कार्यस्थल | परामर्श।

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 वैरिएबल की उपस्थिति की जांच करें,
इसका मान दिखाए बिना। यदि key उपलब्ध नहीं है, तो बताएं कि लॉन्च प्रक्रिया
के लिए इसे स्थानीय रूप से सुरक्षित तरीके से कैसे सेट किया जाए; चैट में key भेजने के लिए न कहें।
अन्य क्रेडेंशियल स्टोर न पढ़ें और Codex की सेटिंग्स में कोई बदलाव न करें।
बिना कोई डिपेंडेंसी इंस्टॉल किए Node.js के अंतर्निहित टूल्स का उपयोग करें।
मौजूदा फ़ाइलों को ओवरराइट न करें: नाम के टकराव पर एक नया नाम चुनें।

जब वातावरण तैयार हो जाए, तो 300 सेकंड के टाइमआउट के साथ ठीक एक सशुल्क रिक्वेस्ट, n=1,
निष्पादित करें। किसी त्रुटि या टाइमआउट पर रिक्वेस्ट को अपने आप दोबारा न चलाएं;
स्थिति बताएं और दोबारा प्रयास करने से पहले शुल्कों की जांच करने का सुझाव दें।
key, 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 नामक एक काल्पनिक इंटीरियर डिज़ाइन स्टूडियो के लिए एक फ़्लैट
डेस्कटॉप वेबसाइट डिज़ाइन कॉन्सेप्ट बनाएं। बिना किसी ब्राउज़र या डिवाइस फ़्रेम
के एक स्क्रीन दिखाएं। ऑफ़-व्हाइट बैकग्राउंड, गहरे हरे रंग के एक्सेंट और एक
साफ़ ग्रिड का उपयोग करें। इसमें नेविगेशन, एक मुख्य शीर्षक, एक बटन और तीन कार्ड शामिल करें।
सटीक नेविगेशन: परियोजनाएं | सेवाएं | हमारे बारे में।
सटीक शीर्षक: दैनिक जीवन के लिए स्थान।
सटीक बटन: परियोजना पर चर्चा करें।
सटीक कार्ड लेबल: घर | कार्यस्थल | परामर्श।
टेक्स्ट को पढ़ने योग्य रखें और सेक्शनों के बीच पर्याप्त जगह छोड़ें।`;

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 डिज़ाइन फ़ाइल में संलग्न website-concept.png
को फिर से बनाने के लिए Computer Use का उपयोग करें। केवल Northline concept नाम के
एक नए पेज पर काम करें। अन्य पेजों में बदलाव न करें, फ़ाइल को साझा या प्रकाशित न करें।

1440 px चौड़ा एक डेस्कटॉप फ़्रेम बनाएं। इमेज का उपयोग विज़ुअल संदर्भ के रूप में करें।
नेविगेशन, शीर्षक, बटन और सेवा कार्ड को मूल Figma लेयर्स के साथ फिर से बनाएं।
तैयार डिज़ाइन के रूप में पूरे पेज पर फैली इमेज का उपयोग न करें।

इन सटीक टेक्स्ट का उपयोग करें:
परियोजनाएं | सेवाएं | हमारे बारे में
दैनिक जीवन के लिए स्थान
परियोजना पर चर्चा करें
घर | कार्यस्थल | परामर्श

जहाँ सामग्री का आकार बदलना आवश्यक हो, वहाँ संपादन योग्य टेक्स्ट और auto layout का उपयोग करें।
प्राथमिक बटन को पुनः प्रयोज्य बनाएं। आवश्यकता पड़ने पर तस्वीरों को इमेज फ़िल के रूप में रखें;
यह न दर्शाएं कि वे संपादन योग्य वेक्टर बन गई हैं।

पहले नेविगेशन और हीरो भाग बनाएं, उनकी जांच करें, फिर तीन कार्डों के साथ
आगे बढ़ें। संदर्भ के अनुपात, रंगों और स्पेसिंग का मिलान करें। यदि कोई फ़ॉन्ट
उपलब्ध नहीं है, तो इसकी रिपोर्ट करें और उपलब्ध विकल्प का उपयोग करें।

अंत में, सत्यापित करें कि शीर्षक को संपादित किया जा सकता है, बटन का आकार बदला जा सकता है
और टेक्स्ट के ओवरलैप हुए बिना फ़्रेम को संकरा किया जा सकता है। शेष अंतरों
और पेज/फ़्रेम के नामों की रिपोर्ट करें ताकि मैं उनका निरीक्षण कर सकूं।