我們推出了 Thumbnail Prompt Builder：一項小型實驗，用於將 AI 製作的縮圖自然延伸至各平台

製作部落格文章的特色圖片時，如今只要使用 ChatGPT 等 AI 圖像生成工具，就能產出相當優質的視覺素材。

不過，實際投入營運時，會遇到一個問題。

各媒體所需的圖片尺寸差異過大。

以這次的工具為例，我們設想的最終輸出如下。

起初我們的想法是：「如果能製作一張正方形圖片，再將它展開成所有尺寸，不是很方便嗎？」

於是我們開始開發的，就是 Thumbnail Prompt Builder。

最初想做的東西

最初的目標很單純。

這是一個工具，只要輸入文章標題或摘要，就能產生可貼到 AI 繪圖工具中使用的提示詞。

此外，上傳生成的正方形圖片後，

• Instagram
• Thumbnail
• X
• Cover

就能自動轉換成各種尺寸，這是我當時的構想。

也就是說，理想的流程是這樣的。

輸入文章資訊
↓
建立 AI 繪圖提示詞
↓
生成正方形圖片
↓
自動展開為各平台尺寸

一開始的設計其實相當單純。

「只要把主角放在中央、周圍留出足夠的留白，應該就能用在各種媒體上吧」

我當時是這麼想的。

實際嘗試後發現的問題

然而，實際產出圖片後，出現了問題。

尤其是 Cover 圖片。

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

• 上下會被大幅裁切
• 主角變得不自然地縮小
• 背景的邊界線變得明顯
• 在正方形中成立的構圖，在 Cover 中會崩壞

這類情況發生了。

一開始我們一邊與Codex討論，一邊嘗試了幾種方向。

例如：

• 將 SAFE ZONE 設定為中央 60%
• 將主角集中於中央
• 禁止使用背景物件
• 僅以背景色向左右延伸
• 在原始圖片的邊緣加入漸層淡出效果
• 於 X / Cover 中稍微縮小，以減少裁切

等等。

以上方法都有一定的效果。

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

要從正方形圖片自然地製作 Cover 圖片，其實有其限制。

Cover 的比例相當寬，為 1280×560。

若在正方形圖片中放入電腦、人物、UI 卡片與圖示等元素，雖然在正方形中效果不錯，但在 Cover 中上下會被大幅裁切。

反過來，若想把所有元素都放進去，主體又會變得過小。

因此，我們決定在此改變設計。

最終結論：將提示詞分為 2 套系統

最終，我們決定將提示詞分為 2 個部分來設計。

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

也就是說，不再只靠一張正方形圖片來涵蓋所有內容，而是

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

這是一種思考方式。

這是一次相當大的方向轉變。

一開始我們的目標是打造一款「從一張圖片生成所有素材」的工具，但考量到實際運用，我們發現從一開始就依各媒體分別設計能成立的構圖，會更加自然。

就算最壞的情況，設計師也能調整版面，但我們希望即使是不會使用 Figma 等工具的人，也能僅靠 AI 就完成簡潔的製作。

目前工具可以做到的事

目前的 Thumbnail Prompt Builder 只要輸入文章資訊，就能生成兩種提示詞（Prompt）。

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 用圖片
• 可將輸入內容保存一段時間

等功能已可運作。

original

若要再進一步改善，

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

等功能也想嘗試看看。

AI 圖像生成雖然方便，但若要實際用於文章或社群媒體，仍需要人工進行設計。

為了減輕這些「設計上的負擔」，我希望持續打造 Thumbnail Prompt Builder 這項工具。