上周朋友拍亚马逊主图找棚 2000 起步，下午想发个 sample 图给运营审单只能干等到晚上；想换个海报背景叫设计也是几百起，改三版人就疯了。
我不做电商。但听完这事我觉得 AI 真能干。3 周用 Claude Code 撸了个 SPA：
土土金 Tutujin — https://studio.tutujin.com （生图驱动靠 gpt-image-2,和 nano-banana ）
不啰嗦先说它是什么。一个跑在浏览器里的纯前端 SPA ，把 12 个电商高频生图场景做成卡片（产品主图 / 模特换装 / 营销海报 / 详情页长图 / 白底图 / 节日促销 / 多角度 / 细节材质 / 尺寸标注 / 核心卖点 / 场景合成 / 社交媒体），加一个完全自由的生图模式。模型走 OpenAI Images API 兼容的 NewAPI 中转，可以选 gpt-image-2 或 nano-banana-2。
本帖讲清五件事：它能干嘛、我为什么做、技术栈、30 秒接进你自己的代码、trade-off 。不喊口号，没有邀请码，本帖发完不会再编辑加二维码。
国内 AI 生图工具不少，自己用过一圈痛点很普遍：
我反过来做：
「 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 ）+ 时间戳。三个动作按钮：
历史页 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 计划做端到端加密的可选云同步（密钥不在我服务器），不打算做强制账号系统。
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 。这些都不用注册，直接看、直接抄。
网址： https://studio.tutujin.com
要 key 。两条路：
base_url 改回 OpenAI 即可。不收注册费，没有 Pro / 团队版，没有联盟分销。我现在还不知道这模式跑不跑得通——大概率还要调几次定价。
源码暂时不开源。理由是 vault 一开就废了；不开源至少能让脚本扒站慢一点。但 Agent 5 件套和完整 API 文档都公开。
这是真路线，不是 PR 用画饼。图片上传 BFF 这周大概做不完，下周做。
3 周写完到上线这事，独立开发者用 Claude Code 真的可行——但说实话最累的不是写代码，是 v0.13 设计那一周从早到晚搭 token 、改阴影、试 hairline 。AI 写得了 React ，写不出审美。
网址放这： https://studio.tutujin.com 。要 key 自己填，不收捐款，不发邀请码。试了觉得有问题——越狠越好，评论或站内信都行。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。