我们推出了 Thumbnail Prompt Builder：一个用于将 AI 生成的缩略图自然延展至各类媒体的小型实验

制作博客文章的封面图时，如今借助 ChatGPT 等图像生成 AI，已经能够做出相当出色的视觉效果。

不过，真正投入实际运营时，会遇到一个问题。

不同媒体所需的图片尺寸差异过大。

例如，在本次工具中，我们设想的最终输出如下。

最初我的想法是：“如果只制作一张正方形图片，就能展开成所有尺寸，那不是很方便吗？”

于是我们开始开发的就是 Thumbnail Prompt Builder。

最初想做的东西

最初的目标很简单。

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

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

• Instagram
• Thumbnail
• X
• Cover

还能自动转换为各个尺寸，我原本是这样考虑的。

也就是说，理想的流程是这样的。

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

最初的设计其实相当直接。

“只要把主体放在中央，周围留出空白，就能用于各种媒体吧”

我当时就是这么想的。

实际测试后发现的问题

然而，实际生成图片后出现了问题。

尤其是 Cover 图片。

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

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

这种情况确实发生了。

最初我们在与Codex商量的同时，尝试了几种方向。

例如:

• 将SAFE ZONE设为中央60%
• 将主体集中到中央
• 禁止使用背景对象
• 仅通过背景色向左右扩展
• 在原图边缘添加渐变淡出效果
• 在X / Cover中稍作缩小，以减少裁切

等。

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

但是，仍存在一个关键问题。

仅凭正方形图片很难自然地制作出Cover。

Cover的尺寸为 1280×560，是非常宽的比例。

如果在正方形图片中放入电脑、人物、UI卡片、图标等元素，虽然在正方形中效果良好，但在Cover中上下部分会被大幅裁切。

反过来，如果试图把所有内容都放进去，主体又会变得过小。

因此，我们决定在这里改变设计。

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

最终，我们决定将提示词拆分为两部分进行设计。

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

也就是说，不是用一张正方形图片涵盖所有内容，而是

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

这是一种思路。

这是一次相当大的方向转变。

最初的目标是做一个“只靠一张图片生成全部内容”的工具，但考虑到实际使用，我们意识到，从一开始就按媒介分别设计成立的构图更为自然。

最坏的情况下，设计师可以调整版式，但我们希望即使是不会使用 Figma 等工具的人，也能仅通过 AI 简单完成制作。

当前工具能做的事

在当前的 Thumbnail Prompt Builder 中，输入文章信息后，会生成两种提示词。

1. 用于 Instagram / Thumbnail

这是用于正方形封面图的提示词。

• 1:1 的正方形图片
• 主体位于中央
• 便于适配 Instagram 竖版展示的留白
• 适合作为博客缩略图、便于辨识的构图

的内容。

2. 用于 X / Cover

这是用于横版封面图的提示词。

• 从一开始就采用横版构图
• 即使用于 Cover，上下也不易被裁切
• 左右保留留白
• 即使用于 X 或 Cover，也不易出现效果崩坏

的指示。

这样一来，Cover 图片就不容易变成“把正方形硬拉成横版”的感觉了。

图片展开也改为两条路径

图片上传也分为两条路径。

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

从正方形图片生成：

• instagram.png
• thumbnail.png

。

从横版图片生成：

• x.png
• cover.png
• [email protected]

。

只有 Cover 额外输出适用于 Retina 的 2 倍尺寸。

最初我们打算为所有图片都输出 2 倍尺寸，但 Instagram 和 X 在发布时容易压缩图片，而且 Thumbnail 本身已经足够大，因此最终决定将范围缩小为仅 Cover 输出 2 倍尺寸。

避免输入内容丢失

开发过程中，有一个问题相当棘手：页面刷新后，输入表单的内容会消失。

让 Codex 进行开发后刷新页面时，有时正在输入的内容会消失。

这个问题让人有些烦躁，因此我也加强了保存功能。

目前，

• localStorage
• Cookie

两处都会保存输入内容。

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

这样一来，即使页面刷新或开发过程中重新加载，输入内容也更容易得到恢复。

实际实现后的发现

本次开发中最大的收获是：

AI图像生成中，“从一开始就按用途分别制作”比“事后再转换”更稳定

也就是说。

尤其是特色图片，不同媒体之间的尺寸比例差异很大。

适合正方形的构图，与适合 Cover 的构图并不相同。

如果强行统一，

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

这些问题都会出现。

所以最终，

不过度通用化， 按用途分别确定生成的前提

这一设计思路。

与Codex互动推进的过程

这次的工具，并不是从一开始就已经看清了最终形态。

在与Codex互动的同时，

• 将正方形图片展开到各媒体
• 消除背景扩展的失效问题
• 重新审视SAFE ZONE
• 解决Cover裁切导致主体变小的问题
• 整理尺寸定义
• 新增 Retina 输出
• 但 Retina 仅限于 Cover 使用
• 将提示词拆分为两套体系
• 保存输入内容

就这样一步步逐渐调整了设计。

最初的想法是“把正方形图片作为通用母版”。

但在查看测试图片、不断改进的过程中，最终形成了更为务实的方案：“分别处理正方形和横版用途”。

这一转变很有意思。

总结

Thumbnail Prompt Builder 并不仅仅是一个转换图片尺寸的工具。

相对而言，

用于将AI生成的特色图片调整为可实际投入运营使用的形式的辅助工具

是。

目前的版本中，

• 可以根据文章信息生成两种图像生成提示词
• 可根据正方形图像生成 Instagram / Thumbnail 图像
• 可根据横向长图生成 X / Cover 图像
• 仅 Cover 额外输出 Retina 版本
• 可在一定期限内保存输入内容

的功能。

虽然比最初设想的稍微复杂了一些，但也因此在实际运营中变得相当好用，我认为这是个不错的结果。

如果今后还要进一步改进，

• 提示词模板切换
• 按品牌管理配色
• 保存生成示例
• 面向 Notion 和 WordPress 的输出途径
• 与图像生成 AI 直接联动

等功能，我也想尝试一下。

AI 图像生成虽然方便，但要在文章或社交媒体上真正使用，仍然需要人工的设计把关。

为了减轻这份“设计的麻烦”，我希望把 Thumbnail Prompt Builder 培养成一款实用的工具。