一个人，一天，上线一个 AI 工具站

2026-07-28Project: OG Image Generator
复盘

一个人，一天，上线一个 AI 工具站

2026-07-28 复盘 · OG Image Generator

从选方向到部署上线，记录真实过程，包括踩的坑和诚实的结论。

这是什么站

OG Image Generator — 一个免费生成社交媒体预览图（Open Graph Image）的在线工具。

用户输入标题，选模板，一键生成 1200×630 的 PNG 图片。开发者也可以直接用 URL API 嵌入网页，不需要 API Key。

线上地址：og-image-gen-1xm.pages.dev

技术栈：Next.js 14 + Cloudflare Pages + Cloudflare Worker，全免费层，零成本。

为什么选这个方向

当天的方向筛选经历了三轮淘汰。

第一轮：关键词候选池（256 个词 → 0 个）

用 Google Keyword API 拉了 256 个候选词（50 compare + 200 expand + old + game），套八闸门框架逐个过：

  • 问题强度够不够？
  • 大厂会不会直接碾压？
  • 有没有清晰的工作流？
  • 商业模型成立吗？
  • 成本可控吗？
  • 真实需求还是伪需求？
  • 能不能快速验证？
  • Founder-Channel Fit？

结果：0 个通过。 低信号日，没有值得开站的词。

第二轮：方向假设（3 个方向 → 全部有硬伤）

跳出关键词，从"社媒图需求"出发假设了三个方向，然后做 SERP 实扫验证：

方向 SERP 真实情况 结论
社媒图生成器 前排全是 Canva / Adobe Express / Fotor 赛道错位，跟设计巨头正面竞争
OG 图生成器 前 10 有 7-8 个免费 indie 站 红海，但全是手动做图，没人做 API
产品图生成器 被 Amazon 官方工具 + Photoroom 锁死 官方工具免费且垄断

第三轮：在红海里找缝隙

OG 图方向虽然红海，但发现了一个差异化机会：

所有竞品都是"手动做图工具"，没有一个做好用的开发者 API。

8 个 SERP 竞品（ogimagemaker.com / opengraph.xyz / placid.app / myogimage.com 等）的共同特征：

  • 免费，无注册
  • 手动编辑器，一张一张做
  • 没有动态 URL API
  • 没有批量自动化
  • 没有模板系统

差异化定位：不跟设计工具竞争，做开发者 API 服务——一行 URL 生成图，嵌入 <meta> 标签就完事。

做了什么

产品功能

功能 说明
图像生成器 标题 + 副标题 + 模板选择 + 品牌色，实时预览，PNG 下载
5 个模板 Gradient / Bold / Minimal / Split / Dark
动态 URL API /api/og?title=X&template=Y，无需 API Key
OG Checker 粘贴 URL 检查 OG 标签配置
API 文档页 参数表格 + 代码示例 + 限速说明
隐私政策 + 服务条款 完整法律页面

页面清单（6 个页面）

  1. / 首页（生成器 + 功能介绍 + FAQ）
  2. /templates 模板展示
  3. /api-docs API 文档
  4. /checker OG 检查器
  5. /privacy 隐私政策
  6. /terms 服务条款

最大的坑：WASM 在 Cloudflare Pages 跑不起来

图像生成的核心技术链路是 HTML/CSS → SVG → PNG：

  • satori：把 React/HTML 转成 SVG
  • resvg-wasm：把 SVG 渲染成 PNG

两个库都依赖 WASM。而 Cloudflare Pages Functions 的运行时不允许动态实例化 WASM。

踩坑过程（4 次失败）

尝试 方案 结果
第 1 次 直接 import wasm 文件 ❌ Resvg2.init is not a function
第 2 次 fetch 远程 wasm 文件 ❌ 403 跨域拦截
第 3 次 ASSETS binding 绑定静态文件 ❌ WebAssembly.instantiate disallowed
第 4 次 wasm 模块 import + 手动初始化 ⚠️ satori 内部 yoga-layout WASM 仍然失败

核心矛盾：Pages Functions 运行时（基于 service worker API）只允许在顶层静态 import WASM 模块，不支持运行时动态实例化。satori 的依赖链太深（yoga-layout → WASM），无法在 Pages 里完整初始化。

解决方案：Worker 绕过

用独立的 Cloudflare Worker 替代 Pages Functions 做图像渲染。

Worker 运行时（workerd）原生支持 WASM 模块 import，不存在 Pages 的限制。

具体做法：

  1. 创建独立 Worker，使用 cf-workers-og 包（内置 workerd WASM 支持）
  2. Worker 负责所有 SVG → PNG 渲染
  3. Pages 站点的 /api/og 请求转发到 Worker
  4. Pages 只负责前端页面 + 静态资源 + Checker

架构图：

用户请求 → Cloudflare Pages（前端 + 静态页面）
                    ↓ /api/og 请求转发
            Cloudflare Worker（satori + resvg WASM 渲染）
                    ↓ 返回 PNG
            用户拿到 1200×630 图片

5 个模板全部测试通过，输出 1200×630 RGBA PNG，文件大小 11KB-298KB。

教训：Cloudflare Pages Functions 不等于 Worker。 如果项目需要 WASM，直接用 Worker，别在 Pages Functions 里折腾。

商业模式：诚实的结论

这个项目目前没有可行的独立商业模式。

为什么收不了费

8 个竞品全免费、无注册。用户没有理由为 $9/月付费——竞品给的功能更多还不要钱。

三个可能的方向（都没验证）

  1. 高量 API（Bannerbear 模式）：不卖给个人博主，卖给需要批量生成几百张图的营销团队，$29-99/月。但目前没有批量 API、没有模板编辑器、没有集成。
  2. AdSense：工具站挂广告。但用户是开发者/博主，CPC 低，停留时间短。
  3. 免费引流：把生成器当 SEO 入口，真正的收入来自其他产品。

最终决策

去掉所有付费内容，定位为 100% 免费工具。 删掉了 Pro Waitlist 表单、$9/月定价、waitlist API、隐私政策里的相关条款。

不假装它能赚钱。它的价值在于：

  1. 技术验证——Cloudflare Worker + WASM 图像渲染跑通了
  2. SEO 入口——/for/nextjs 这类 programmatic SEO 页面如果做起来可以导流
  3. 技术栈练手——后端模式可复用到下一个项目

花了多少钱

零。

项目 费用
域名 没买，用 Cloudflare Pages 免费子域名
托管 Cloudflare Pages 免费层
Worker Cloudflare Workers 免费层（10 万次/天）
KV 存储 Cloudflare KV 免费层（限速用）
数据库 不需要（纯无状态工具）
AI 生图 API 没用（模板是代码生成，不是 AI 生图）

数字总结

指标 数据
选方向耗时 半天（256 个词淘汰 + 3 轮 SERP 验证）
开发 + 部署 约 1 天
WASM 踩坑次数 4 次失败 → 第 5 次 Worker 方案成功
页面数量 6 个
API 端点 2 个（/api/og + /api/check）
模板数量 5 个
月运营成本 $0
付费用户 0（因为已经去掉付费功能）

下一步可做

按优先级排：

  1. programmatic SEO 页面：/for/nextjs、/for/hugo、/for/wordpress 等框架专属页，抢占长尾搜索流量
  2. 模板扩充到 15 个：竞品基本 10-20 个起步
  3. API 响应示例补全：文档页加上 JSON/error 格式示例
  4. GA4 + Bing Webmaster 接入：建立数据反馈链路
  5. favicon + 品牌完善：目前浏览器标签栏还是默认图标

但这些都不急。当前优先级是观察有没有自然搜索流量进来，再决定投入方向。

一句话总结

一天时间，零成本，上线了一个功能完整的免费工具站。技术上踩了 WASM 的坑但用 Worker 绕过去了。商业模式不成立，但作为技术验证和 SEO 入口有价值。下一步看数据说话。

Key Lessons

一天时间，零成本，上线了一个功能完整的免费工具站。技术上踩了 WASM 的坑但用 Worker 绕过去了。商业模式不成立，但作为技术验证和 SEO 入口有价值。下一步看数据说话。