我创建了 Thumbnail Prompt Builder：一个小实验，用于将 AI 生成的缩略图自然地部署到各个媒体

在制作博客文章的特色图像时，最近可以使用ChatGPT等图像生成AI来创建相当出色的视觉效果。

不过，在实际运营时，有一个问题。

不同媒体需要的图像尺寸差异太大。

例如，在这个工具中，我们最终预期以下输出。

起初，我以为「制作一张正方形图像，然后就能展开到所有尺寸，不是很方便吗？」

因此我开始制作Thumbnail Prompt Builder。

最初想要制作的东西

最初的目的很简单。

输入文章标题或摘要，工具会为图像生成AI生成可粘贴的提示词。

此外，上传生成的正方形图像后，

• Instagram
• Thumbnail
• X
• Cover

的各种尺寸可以自动转换。

换句话说，理想情况是这样的。

输入文章信息
↓
创建图像生成提示词
↓
生成正方形图像
↓
自动展开至各媒体尺寸

最初的设计相当简洁。

「在中央放置主体，周围留白的话，应该可以在任何媒体上使用」

我当时是这样想的。

实际尝试后发现的问题

不过，当我们实际生成图像时，出现了问题。

特别是Cover图像。

将正方形图像转换为横向时，

• 上下被大幅裁剪
• 主体变得不自然地缩小
• 背景边界线变得明显
• 在正方形中成立的构图在Cover中崩坏了

这样的情况出现了。

最初我们与Codex协商，尝试了几个不同的方向。

例如，

• 将安全区域设置在中央60%
• 将主体集中在中央
• 禁止使用背景对象
• 仅使用背景色向左右扩展
• 在原始图像的边缘添加渐变效果
• 在X / Cover中稍微缩小以避免裁剪

等。

这些方法都取得了一定的效果。

但是，仍然存在决定性的问题。

从正方形图像自然生成Cover存在局限性。

Cover 的宽高比为 1280×560，非常宽阔。

如果在正方形图像中放入 PC、人物、UI 卡片、图标等元素，在正方形中看起来不错，但在 Cover 中上下会被大幅裁剪。

反过来，如果想要包含所有元素，主体会变得太小。

基于这一点，我们决定改变设计策略。

最终结论：将提示词分为两个系统

最终，我们决定采用将提示词分为两个的设计方案。

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

也就是说，我们不再依赖单张正方形图像来满足所有需求，

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

而是采用这样的思路。

这是一个相当大的方针转变。

最初是想做一个「从一张图片生成一切」的工具，但考虑到实际运营的需求，我们发现按照不同媒体类型预先划分构图会更加自然。

在最坏的情况下，设计师可以手动调整布局。但我们希望即使不会使用 Figma 的人也能使用，所以想让 AI 就能独立完成这一点。

现有工具的功能

目前的 Thumbnail Prompt Builder 会根据输入的文章信息生成两种类型的提示词。

1. Instagram / 缩略图专用

用于正方形配图的提示词。

• 1:1 的正方形图像
• 主体居中
• 易于适配 Instagram 竖版展开的空白
• 作为博客缩略图易于识读的构图

这是考虑到了这一点的内容。

2. X / 封面用

这是用于横向宽屏吸睛图的提示词。

• 从一开始就采用横向构图
• 使用 Cover 也不易被裁剪
• 在左右两侧留出空白
• 无论是在 X 还是 Cover 上都不易出现问题

我已经输入了这样的指示。

这样一来，封面图像就不太容易出现"方形被硬生生拉宽"的情况了。

图像展开也改为两个系统

图片上传也分为了两种系统。

• 正方形图片上传
• 横长图片上传

从正方形图片生成

• instagram.png
• thumbnail.png

。

从横长图片生成

• x.png
• cover.png
• cover@2x.png

。

只有 Cover 会为 Retina 输出 2 倍大小。

最初我想为所有图片输出 2 倍大小，但由于 Instagram 和 X 在上传时容易压缩，而 Thumbnail 本身已经足够大，最终决定只为 Cover 输出 2 倍大小。

防止输入内容在页面刷新时消失

开发过程中遇到的一个小麻烦是，页面刷新时输入表单会消失。

使用 Codex 更新页面时，有时会出现输入内容在编辑途中丢失的情况。

由于这给我们带来了一些困扰，我们加强了保存功能。

目前，

• localStorage
• Cookie

都会保存输入内容。

Cookie 端作为 7 天的备份使用。

这样，即使页面刷新或开发期间重新加载，输入内容也更容易被恢复。

开发过程中学到的经验

这次开发中最重要的发现是，

AI 图像生成「从一开始就针对用途分别生成」比「事后转换」更稳定

。

特别是主视觉图像，不同媒体的宽高比差异很大。

正方形的理想构图与Cover的理想构图是不同的。

如果强行统一的话，

• 主体会显得很小
• 留白会过多
• 上下被裁剪
• 背景变得不自然

等问题就会出现。

因此最终还是要

不过度统一 按用途分开生成的前提

采纳了这种设计方案。

与Codex交互推进的工作

这次的工具在一开始并没有看清最终的完成形态。

在与Codex交互过程中，

• 将正方形图像展开到各个媒体平台
• 消除背景扩展的崩坏
• 重新审视安全区域
• 解决封面主体过小的问题
• 整理尺寸定义
• 添加Retina输出
• 但是 Retina 仅限于 Cover
• 将提示分为两个系列
• 保存输入内容

就是这样逐步改进设计的。

最初的想法是"让方形图像成为万能母板"。

但在查看测试图像并不断改进的过程中，最终形成了"分别用于正方形和横向"的更加现实的方案。

这种变化很有趣。

总结

Thumbnail Prompt Builder 不只是一个图像大小转换工具。

说到底

一款辅助工具，可将AI生成的配图调整为能够满足实际运营需求的形式

。

目前的形式是这样的，

• 从文章信息生成2种图像生成提示词
• 从正方形图像生成 Instagram / 缩略图
• 从横向图像生成 X / 封面
• 仅封面还输出 Retina 版本
• 将输入内容保存一段时间

到这个程度为止。

虽然比最初的设想要复杂一些，但相应地，在实际运用中应该会变得相当易用。

如果今后要进一步改善的话，

• 提示词模板切换
• 按品牌管理配色
• 保存生成示例
• 针对 Notion 和 WordPress 的输出流程
• 与 AI 图像生成的直接集成

我也想试试这些。

AI 图像生成很方便，但要在实际的文章或社交媒体中使用，仍然需要人工设计。

我想将 Thumbnail Prompt Builder 作为一个工具来开发，以便减少这一「设计工作」的负担。