还在为AI生成的精美网页草图是死板的图片而头疼？想改个按钮颜色、换个文案，却发现只能切图重做？今天提米哥带你用一套“组合拳”——GPT图片模型负责出图，配合Codex代理与Computer Use（AI鼠标键盘操控）技术，直接把静态PNG变成Figma里能随意拖拽、编辑的原生图层。少熬夜赶工，效率直接翻倍。

第一步：生成一张能看懂的概念图

先确定一个基础的桌面网页布局：顶部导航、醒目的大标题、一个主行动按钮和几个内容卡片。关键在于，核心文案最好直接写在提示词里，这样后续对接Figma才不会乱。

通过官方订阅通道或聚合平台（如 BetterToken）调用 gpt-image-2.5 模型生成一张 PNG 图片。生成后务必点开检查：文字是否清晰可读？排版是否紧凑？记住，提示词里写的尺寸不等于实际交付尺寸，以肉眼确认为准。建议单次请求数量设为 n=1，超时时间设 300秒，关闭自动重试，避免意外重复扣费。

第二步：配置并验证 AI 代理

拿到图片只是起点，下一步是让 AI 去操作你的设计软件。先将你的配置文件 (config.toml) 和认证文件 (auth.json) 妥善备份，合并参数时注意不要产生重复的配置表。拿到 API Key 后重启 Codex，先发一条简短的测试消息确认模型在线。

接着，单独验证 Computer Use 功能是否能顺利“看到”并操作 Figma 界面。安全铁律：一定要指派 AI 在一个全新的 Figma 页面中工作，绝对不要把你的登录密码或核心密钥交给它。

第三步：让 AI 把图片“翻译”成可编辑设计

给 AI 下达重建指令，核心原则只有一条：必须使用 Figma 原生的文本层、按钮组件和容器，而不是把整张图拉伸铺满画布。

你可以明确要求它新建一个宽度 1440px 的画板，严格按照预设文案排版，并开启自动布局（Auto Layout）确保元素对齐。搭建完成后，试着手动修改标题字数、拉长按钮或缩小画框，如果文字没有重叠、图层命名整齐，说明构建成功。若最终输出只是一张塞进画布的 PNG，请立刻让 AI 重新用原生组件搭建。

💡 提米哥的避坑指南与成本参考

• 安全第一：API Key 永远只存在本地环境变量中，切勿粘贴到聊天窗口或公开论坛。
• 故障排查：遇到 401 报错通常是权限或密钥问题；AI 卡死不动则是 Computer Use 的应用权限未开放。
• 费用透明化：以当前官方快照为例，GPT 图片模型单次约 $0.05，连打 5 次约 $0.25。文本代理处理按 Token 阶梯计费（不同档位上限约 $17-$51）。这些是参考价，实际开销请以后台实时账单为准，用完记得停用。
• 理性预期：这是一套强大的提效流水线，但并非魔法。遇到非常见字体或缺失插件，AI 会主动提示你替换。保持“AI生成+人工微调”的习惯，产出最稳妥。

以下是实战中可直接复用的配置与代码片段，已为你备好中文注解，开箱即用：

# 创建扁平化桌面网站设计概念，用于虚构室内设计工作室 Northline
# 仅展示一个屏幕画面，不要浏览器外框
# 使用米白色背景、深绿色点缀和清晰的网格布局
# 包含导航栏、主标题、一个主按钮和三个服务卡片
# 不使用透视效果、设备边框或装饰性UI覆盖层
# 必须严格使用以下标签文案：
# 导航：Projects | Services | About
# 标题：Spaces for everyday life
# 按钮：Discuss a project
# 卡片：Homes | Workspaces | Consultation
# 保持文字清晰易读，并在各板块之间留出充足间距。

Enter fullscreen mode

Exit fullscreen mode

# 在当前文件夹中创建并运行一个名为 generate-design.mjs 的 Node.js 脚本
# 该脚本将通过 BetterToken API 抓取一个网页概念设计
# 使用 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 <value of BETTERTOKEN_IMAGE_API_KEY>
参数: model="gpt-image-2.5-flare", size="1536x1536", n=1,
response_format="b64_json", output_format="png".

# 环境安全检查：
# 首先检查 Node.js 环境是否存在，以及 BETTERTOKEN_IMAGE_API_KEY 变量是否已配置
# 过程中绝不打印密钥的具体值。若密钥缺失，请说明如何在本地安全设置（如终端 export），切勿要求将密钥发送至聊天窗口。
# 不要读取其他凭证存储库，也不要更改 Codex 默认设置。
# 仅使用 Node.js 内置功能，禁止安装任何第三方依赖包。
# 避免覆盖现有文件：若文件名冲突，请选择新名称。

# 执行与错误处理：
# 环境就绪后，仅执行一次付费请求(n=1)，超时时间设为300秒。
# 发生错误或超时时严禁自动重试；需汇报状态码，并建议在重试前核对账户余额。
# 禁止打印密钥、Authorization 头部或完整的 base64 响应数据。
# 解码返回的 data[0].b64_json 字段，并将结果保存为 website-concept.png。
# 验证 PNG 文件能否正常打开，显示实际图片尺寸，并输出脚本与图片的路径。
# 若生成失败，不得宣称成功，立即停止执行：暂不开启或修改 Figma 软件。

Enter fullscreen mode

Exit fullscreen mode

import { writeFile } from "node:fs/promises";

// 获取环境变量中的 API 密钥，若未设置则抛出错误中断程序
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.`;

// 发起 HTTP POST 请求至图像生成接口
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), // 设置 300 秒超时保护，防止请求无限挂起
});

// 检查请求是否成功，失败则抛出 HTTP 状态码错误
if (!response.ok) throw new Error(`Image request failed: HTTP ${response.status}`);

// 解析 JSON 响应结构
const result = await response.json();
const encoded = result.data?.[0]?.b64_json;
if (!encoded) throw new Error("Response has no data[0].b64_json");

// 移除 Base64 数据头部分，提取纯编码字符串
const base64 = encoded.replace(/^data:[^;]+;base64,/, "");
// 将 Base64 解码为二进制 Buffer 并写入本地 PNG 文件
await writeFile("website-concept.png", Buffer.from(base64, "base64"));
console.log("Saved website-concept.png");

Enter fullscreen mode

Exit fullscreen mode

# 指定使用的模型提供商为 bettertoken
model_provider = "bettertoken"
# 设置核心代理模型为 gpt-6-astra
model = "gpt-6-astra"
# 采用文件存储方式管理 CLI 认证凭证
cli_auth_credentials_store = "file"

# 配置 bettertoken 提供商的具体参数
[model_providers.bettertoken]
name = "BetterToken"
base_url = "https://www.bettertoken.ai/v1"
wire_api = "responses"
requires_openai_auth = true
supports_websockets = false

Enter fullscreen mode

Exit fullscreen mode

{
  // 认证模式设置为 API Key 鉴权
  "auth_mode": "apikey",
  // 填入你的 OpenAI 兼容格式 API Key（实际使用时请替换为你的真实密钥）
  "OPENAI_API_KEY": "YOUR_API_KEY"
}

Enter fullscreen mode

Exit fullscreen mode

# 使用 Computer Use 功能，将附件中的 website-concept.png 在 Figma Design 文件中重建
# 仅在名为 Northline concept 的新页面上工作，勿修改其他页面、共享或发布文件

# 基础画板设置：
# 创建一个宽 1440 px 的桌面画板。仅将图片作为视觉参考底图。
# 使用 Figma 原生图层重建导航、标题、按钮和服务卡片区域。
# 严禁直接使用全屏导入的图片作为最终成品。

# 强制使用以下精确文案：
Projects | Services | About
Spaces for everyday life
Discuss a project
Homes | Workspaces | Consultation

# 交互与排版规范：
# 对可能变动的文本启用可编辑属性，并利用 Auto Layout 实现自适应伸缩。
# 将主按钮设置为 Components（组件）以便复用。如需配图保留图片填充即可，勿假装将其转为矢量路径。

# 分步执行逻辑：
# 优先完成导航栏与 Hero 区域的首屏搭建，自检无误后再继续构建下方的三张内容卡片。
# 严格匹配参考图中的比例、色彩和间距。若遇缺失字体，直接报错提示并使用系统相近字体替代。

# 交付验收标准：
# 最后一步必须验证：标题能否自由输入修改、按钮能否拖动缩放、缩小主画框时文字是否会互相遮挡。
# 汇报所有存在的差异细节，并提供当前页面与画框的具体名称，供开发者人工二次审查。

Enter fullscreen mode

Exit fullscreen mode

直达网址：https://bettertoken.ai