停止使用 Figma 来制作 OG 图片（我构建了一个 API 来自动化）

Source: Dev.to

我热爱编码，但讨厌设计。每次发布博客文章时，都要打开 Figma，找到模板，编辑文字，导出 PNG，然后上传到 S3……这要花 20 分钟。所以我利用 Next.js + Satori 在这个周末构建了一个自动化解决方案。

技术栈

• Next.js App Router（Edge Runtime）
• @vercel/og (Satori) – 将 HTML/CSS 转换为 SVG 再转为 PNG
• Tailwind CSS 用于样式

工作原理

我创建了一个 API 路由 /api/og，它接受查询参数（title、theme）。Satori 会即时将 React 组件渲染为图片。

结果

现在我只需把这个 URL 粘贴到 meta 标签中：

https://ogimage.art/api/og?title=My%20Post

它会立即生成一张 1200 × 630 的图片。

亲自尝试

我把它做成了一个免费工具，供所有人使用。

👉 ogimage.art

（代码目前是私有的，但我可能会在以后开源核心生成引擎。如果你感兴趣，请告诉我！）