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를 생성하고 API 설정으로 Astra를 연결하는 방법입니다. 플러그인, 시스템 권한, 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를 사용하고 직접 로그인하며 agent에게 비밀번호나 key를 주지 마세요. 먼저 쓰기 없이 열린 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, image call 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이라는 가상의 인테리어 디자인 스튜디오를 위한 평면 데스크톱
웹사이트 디자인 콘셉트를 생성하세요. 브라우저 목업이 아닌 단일 화면만 보여주세요.
미색 배경, 짙은 녹색 강조색, 깔끔한 그리드를 사용하세요.
내비게이션 바, 히어로 제목, 기본 버튼 1개, 서비스 카드 3개를 포함하세요.
원근감, 기기 프레임, 장식용 UI 오버레이는 제외하세요.
정확히 다음 문구를 사용하세요:
내비게이션: 프로젝트 | 서비스 | 소개
제목: 일상을 위한 공간
버튼: 프로젝트 문의
카드: 주거 공간 | 업무 공간 | 상담
텍스트 가독성을 유지하고 섹션 사이에 충분한 여백을 두세요.

현재 폴더에 BetterToken API를 통해 웹 페이지 콘셉트 하나를 가져오는 Node.js 스크립트 generate-design.mjs를 생성하고 실행하세요.
Codex의 내장 이미지 생성 도구가 아닌 HTTP API를 사용하세요.

디자인: 브라우저 프레임과 원근감이 없는 가상의 인테리어 스튜디오 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 환경 변수의 존재 여부를 확인하되,
그 값을 출력하지 마세요. 키를 사용할 수 없는 경우 실행 프로세스를 위해 로컬에서
안전하게 설정하는 방법을 설명하고, 채팅으로 키를 보내달라고 요청하지 마세요.
다른 자격 증명 저장소를 읽거나 Codex 설정을 변경하지 마세요.
의존성 설치 없이 Node.js 내장 기능을 사용하세요.
기존 파일을 덮어쓰지 마세요. 파일명이 겹치면 새 이름을 선택하세요.

환경이 준비되면 300초 타임아웃으로 유료 요청을 정확히 한 번(n=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이라는 가상의 인테리어 디자인 스튜디오를 위한 평면 데스크톱
웹사이트 디자인 콘셉트를 생성하세요. 브라우저나 기기 프레임이 없는 단일 화면을
보여주세요. 미색 배경, 짙은 녹색 강조색, 깔끔한 그리드를 사용하세요.
내비게이션, 히어로 제목, 버튼 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 디자인 파일에서 Computer Use를 사용하여 첨부된
website-concept.png를 다시 제작하세요. Northline 콘셉트라는 이름의 새 페이지에서만
작업하세요. 다른 페이지를 수정하거나 파일을 공유하거나 게시하지 마세요.

너비 1440 px의 데스크톱 프레임을 만드세요. 이미지를 시각적 참조로 사용하세요.
내비게이션, 제목, 버튼, 서비스 카드를 Figma 네이티브 레이어로 다시 만드세요.
전체 페이지 이미지를 완성된 디자인으로 사용하지 마세요.

다음 텍스트를 정확히 사용하세요:
프로젝트 | 서비스 | 소개
일상을 위한 공간
프로젝트 문의
주거 공간 | 업무 공간 | 상담

콘텐츠 크기가 조정되어야 하는 곳에는 편집 가능한 텍스트와 auto layout을 사용하세요.
기본 버튼은 재사용할 수 있도록 만드세요. 필요한 경우 사진은 이미지 채우기로 유지하되,
편집 가능한 벡터로 변환된 것처럼 꾸미지 마세요.

먼저 내비게이션과 히어로 섹션을 만들고 검토한 다음, 세 개의 카드로 넘어가세요.
참조 이미지의 비율, 색상, 여백을 맞추세요. 글꼴을 사용할 수 없는 경우
이를 보고하고 사용 가능한 대체 글꼴을 사용하세요.

마지막으로 제목을 편집할 수 있는지, 버튼 크기를 조정할 수 있는지,
텍스트가 겹치지 않고 프레임을 좁힐 수 있는지 확인하세요. 직접 확인할 수 있도록
남아 있는 차이점과 페이지/프레임 이름을 보고하세요.