[Show] 我做了一个 AI 电商生图工具：13 场景预设 + 数据全在浏览器（ 1 毛 6 一张）

上周朋友拍亚马逊主图找棚 2000 起步，下午想发个 sample 图给运营审单只能干等到晚上；想换个海报背景叫设计也是几百起，改三版人就疯了。

我不做电商。但听完这事我觉得 AI 真能干。3 周用 Claude Code 撸了个 SPA：

土土金 Tutujin https://studio.tutujin.com （生图驱动靠 gpt-image-2,和 nano-banana ）

Tutujin Studio 13 场景首页（自由生图 + 12 个电商专业场景）

不嗦先说它是什么。一个跑在浏览器里的纯前端 SPA ，把 12 个电商高频生图场景做成卡片（产品主图 / 模特换装 / 营销海报 / 详情页长图 / 白底图 / 节日促销 / 多角度 / 细节材质 / 尺寸标注 / 核心卖点 / 场景合成 / 社交媒体），加一个完全自由的生图模式。模型走 OpenAI Images API 兼容的 NewAPI 中转，可以选 gpt-image-2 或 nano-banana-2。

本帖讲清五件事：它能干嘛、我为什么做、技术栈、30 秒接进你自己的代码、trade-off 。不喊口号，没有邀请码，本帖发完不会再编辑加二维码。

为什么我做这个

国内 AI 生图工具不少，自己用过一圈痛点很普遍：

必须登录、必须绑手机。你只想试一下，先验证码。
包月 / 包年套餐。这个月没用够钱不退；下月用超了又得囤。
数据在别人服务器上。你做的图、上传的参考图、prompt 历史都在云端。换工具就搬家。
电商场景缺位。大多工具是泛用 AIGC ，「白底图」「模特换 N 套衣服」「详情页长图」这种电商真实需求要你自己去调 prompt 。

我反过来做：

不要登录。打开就用，浏览器是客户端。
按 token 算账。生一张算一张，没用就不扣。
数据全在 IndexedDB 。10 GB 配额，刷新不丢，跨设备不同步这是 trade-off ，下面会说。
场景 prompt 我帮你调好。专业相机、布光、品牌四要素这些用户不该操心。

「 AI 生图工具早就一堆了你做这个图啥」我也不知道做不做得起来，但 3 周成本能接受，失败了至少把 React 19 + Vite 8 这套新栈练手了。

演示一遍：从打开到出图

进首页第一张就是「自由生图」，画布很干净：左边 prompt 输入和参考图上传，右边模型选择和尺寸。打字、回车、3-8 秒出图。

产品主图生成器：左侧参数面板，中央实时生图（饮料瓶产品主图），右侧本场景历史

参考图直接拖进来，自动 presigned URL 上传到 S3 （我自己的桶兜底，未来支持用户配自己的）。生成完图自动入库，缩略图（ 768px webp ）和原图分别存 IndexedDB 的两个 blob 字段之后翻历史不会卡。

12 个电商场景背后有一份加密的 prompt vault（ XOR + base64 运行时解码）。你只填业务描述（「我要给这双跑鞋拍个夏日海边的营销海报」），专业相机参数、布光、构图、品牌一致性这些由 vault 自动注入。

老实说一句：vault 加密不是核心防御。XOR 谁都能逆，prompt 真要找还是能找出来。我做这层只是劝退脚本扒站，不假装能防 GPT-4 。

历史详情弹窗：原图 + 完整提示词 + 参数 + 复用参数 / 继续编辑 / 下载 / 删除

点历史里任一张图：弹出大图 + 完整 prompt + 参数（ 720x1280 / 4k / gpt-image-2 ）+ 时间戳。三个动作按钮：

复用参数 把这条历史的 prompt 和尺寸塞回输入栏
继续编辑 把这张图作为参考图加入下一轮生成（典型 image-to-image ）
下载原图 / 删除

历史记录页：13 个场景 chip 筛选 + 缩略图网格 + 本地存储进度

历史页 13 个 chip 筛选、按时间倒序、底部本地存储进度（ 4.8 MB / 10240 MB ）。导出 JSON 备份这事也支持。

技术栈和架构选择

工具党可能感兴趣的几个决定：

纯前端 SPA ，没有后端服务。除了一个 vite plugin 的 presigned URL middleware （持有 S3 凭据，给参考图上传发短期 URL ），整个产品是静态文件。部署在宝塔 + nginx ，发布流程就是 vite build && rsync dist/。

技术栈：TypeScript 6 strict / React 19.2 / Vite 8 / TailwindCSS 3.4 / Zustand 4.5 / Dexie 4 / Zod 3.23 / AWS SDK v3 。

API 调用日志面板。每次 NewAPI 调用记一行：endpoint / model / 耗时 / 输入 tokens / 输出 tokens / 花费 USD / HTTP code / 错误归类。500 条会话上限 + IndexedDB 持久化 5000 条。sk-* / Bearer / JWT 在落库前自动 redact 掉我不想把 API key 长期存浏览器历史里。

超时分层。生图主流程 300 秒（ 4k + 复杂 prompt + n=2 偶见 90s+，2 分钟会误报超时；上周朋友试了说撞到了，拉到 5 分钟）。测试连接 90 秒（最小尺寸生图，连不通快速反馈）。余额查询 15 秒（ dashboard/billing 是元数据接口）。

历史 thumb 后台升级。早期版本 thumb 长边只有 256 ，4 月份某次改到 768 。但旧记录里仍是 256 ，看着糊。所以加了升级路径：hydrate 完成后 requestIdleCallback 调度，遍历 BlobRecord ，width<600 的用 OffscreenCanvas + fullBlob 重生 768 thumb 写回 IDB 。串行 + 静默 + 幂等，单会话只跑一次。下次进历史页，旧图自己变清晰。

v0.13 暗色高奢摄影棚设计。底色 #0A0A0B，accent 香槟金 #C9A96E，hover 铜橘 #E8A063，每张卡有 inset 0 1px 0 rgba(255,255,255,0.06) 顶光 hairline （ Linear / Vercel 共识）。display 字体 Fraunces 。这是我最舍得花时间打磨的部分。

数据本地的 trade-off。换设备数据不会过来，浏览器清缓存就丢这是事实。当前妥协是支持 JSON 导出 / 导入备份。V2 计划做端到端加密的可选云同步（密钥不在我服务器），不打算做强制账号系统。

数据管理：本地存储 4.8 MB / 10 GB 配额，导出 / 导入 / 清空

30 秒接进你自己的代码

API 端点 100% OpenAI Images API 兼容：

curl -X POST https://api.tutujin.com/v1/images/generations \ -H "Authorization: Bearer $YOUR_KEY" \ -H "Content-Type: application/json" \ -d '{"model":"gpt-image-2","prompt":"白底机械键盘电商主图","n":1,"size":"1024x1024","quality":"2k"}'

任何 OpenAI SDK 把 base_url 指过来即可：

from openai import OpenAI client = OpenAI(api_key="...", base_url="https://api.tutujin.com/v1") img = client.images.generate(model="gpt-image-2", prompt="...", size="1024x1024")

站点 /docs 页有完整 OpenAPI 3.1 spec / Postman collection / 10 种语言示例（ JS / Python / Go / Rust / Swift / Java / PHP / Ruby / C# / curl ）。

Agent 工具方面准备了 5 件套：Claude Code Skill / AGENTS.md / Cursor & Windsurf Rules / OpenAI Tool Spec / MCP Server 。这些都不用注册，直接看、直接抄。