我製作了 Thumbnail Prompt Builder：為了在各種媒體上自然展開 AI 生成的縮圖影像的小實驗

製作部落格文章的首圖時，最近可以使用 ChatGPT 等圖像生成 AI，已經能製作出相當不錯的視覺素材了。

不過實際運用時，就會遇到一個問題。

不同媒體所需的圖像尺寸差異太大。

例如在這個工具中，最後預想的輸出如下：

最初我想「如果製作一張正方形圖像，然後把它展開到所有尺寸，是不是很方便？」

於是開始製作 Thumbnail Prompt Builder。

最初想製作的東西

最初的目的很簡單。

輸入文章標題或摘要，就能為影像生成 AI 自動產生貼上用的提示詞工具。

此外，上傳生成的正方形影像後，

• Instagram
• Thumbnail
• X
• Cover

各種尺寸能自動轉換。

換句話說，理想的流程是這樣。

輸入文章資訊
↓
產生影像提示詞
↓
生成正方形影像
↓
自動展開至各媒體尺寸

最初的設計非常直接。

「把主角放在中央，周圍留空白，應該就能用於各種媒體」

我是這樣想的。

實際嘗試後發現的問題

然而，當實際輸出圖像時，出現了問題。

特別是封面圖像。

將正方形圖像轉換為橫向時，

• 上下會大幅被裁切
• 主角變得不自然地縮小
• 背景的邊界變得突兀
• 在正方形中成立的構圖在封面上崩潰

這樣的情況就發生了。

最初我們與 Codex 商討，嘗試了幾個方向。

例如，

• 將 SAFE ZONE 設定為中央 60%
• 將主角集中在中央
• 禁止使用背景物件
• 僅用背景色左右擴展
• 在原始影像邊緣加入淡化效果
• 在 X / Cover 中略微縮小以減少裁切

等等。

這些方法都有一定的效果。

不過，仍然存在決定性的問題。

從正方形影像自然製作 Cover 存在限制。

Cover 的寬高比為 1280×560，是一個相當寬長的比例。

如果在正方形圖像中放入 PC、人物、UI 卡片、圖示等元素，正方形時看起來可能很好，但在 Cover 中上下會被大幅裁切。

反過來說，如果試圖放入所有內容，主要元素就會變得太小。

於是我們決定改變設計。

最終結論：將提示分成兩個系統

最終，我們採用了將提示分成兩個的設計方案。

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

也就是說，不是用一張正方形圖像來解決所有問題，

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

而是採用這樣的想法。

這是一個相當大幅度的方針轉變。

最初は「1張圖片製作全部」的工具為目標，但考慮到實際運用，根據不同媒體預先區分構圖會比較自然。

最壞的情況下設計師可以調整版面，但我們希望即使是無法使用 Figma 等工具的人也能單靠 AI 就能輕鬆完成。

目前工具可以做到的事

目前的 Thumbnail Prompt Builder 輸入文章資訊後，會生成 2 種類型的提示詞。

1. Instagram / 縮圖用

正方形頁眉用提示詞。

• 1:1 正方形圖片
• 主角在中央
• 易於適應 Instagram 縱向展開的留白
• 作為部落格縮圖易於閱讀的構圖

的內容。

2. X / Cover 用

用於橫向長寬比的提示詞。

• 從一開始就採用橫向構圖
• 即使在 Cover 中也不容易被裁剪
• 在左右兩側留出餘白
• 在 X 和 Cover 中都不容易出現破綻

的指示。

這樣一來，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 進行溝通的過程中，

• 將正方形影像展開至各個媒體
• 排除背景延伸的破損
• 重新檢視安全區域
• 解決 Cover 中主要元素變小的問題
• 整理尺寸定義
• 新增 Retina 輸出
• 不過 Retina 僅限於 Cover 使用
• 將提示詞分成兩個系統
• 保存輸入內容

經過這樣的流程，我們逐步調整了設計。

最初的概念是「將正方形圖像作為通用主圖」。

但在查看測試圖像並不斷改進的過程中，最終演變成了「分別處理正方形和橫向圖像」這種更符合實際的做法。

這個變化很有意思。

總結

Thumbnail Prompt Builder 不只是單純的圖像尺寸轉換工具。

與其說是，

一個協助工具，用來將 AI 製作的標題圖像調整為實際運營可用的形式

。

目前的形式上，

• 從文章資訊產生兩種類型的圖像生成提示詞
• 從正方形圖像產生 Instagram / 縮圖
• 從橫向圖像產生 X / 封面
• 封面另外輸出 Retina 版本
• 將輸入內容保存一段時間

的程度。

雖然比最初的想法稍微複雜了一些，但相應地在實際運用中變得相當易用。

如果今後進一步改善的話，

• 提示詞範本切換
• 品牌配色管理
• 生成範例儲存
• 針對 Notion 和 WordPress 的輸出流程
• 與 AI 圖像生成工具的直接整合

我也想嘗試看看那些功能。

AI 圖像生成很便利，但要實際用於文章或社群媒體時，還是需要人工設計。

我想把 Thumbnail Prompt Builder 當作一個工具，用來減少一些「設計的手間」。