我用 AI 做了一個能一句話產出完整貼文的工具

為什麼我想做這個工具

我一直想做一個輪播貼文的製作工具，因為我覺得在 Figma 中慢慢排很麻煩。

但我又不想屈就於現成的「模板」，比如說上面標題、下面帳號名稱，內文只有文字，這樣太無趣了。

有沒有辦法做到讓 AI 直接幫我的部落格文章轉換為輪播貼文，在根據語意排版的同時，又能保持彈性，自由建立新的元件，並且保持風格一致呢？

試錯之路

我之前嘗試過幾個方式，比如說用 Pencil MCP 製作貼文，或是用 Paper MCP、Figma MCP 等等。

但後來發現，這些工具不是常常出錯，就是需要額外付費。

比如說 GAMMA 這個簡報製作工具，是我覺得最接近我理想中的工具了：一鍵生成，還可以微調區塊

不過呢缺點也很明顯——你一眼就看得出來是 GAMMA 做的。

它們的Block雖然多，但難以微調，也比較難新增一個彈性的區塊，對於我這種細節控太致命了

最重要的是：要錢。

我都已經訂了 Claude Code，不太想再為這些流程多花一筆錢。

於是，我開啟了這次的開發。

過去也不是沒有開發過類似的東西，像我之前有在 Threads 上分享過。但是我後來覺得自己把它做得太複雜了，例如做了一個 sidebar 來調整邊距、字體大小和其他細節。這樣反而偏離了「由 AI 幫我製作」的初衷。

我真正想要的是，只要先把樣式定義好，AI 給我的就是 90 分的成品。

第一版：先做 HTML 模板

要怎麼開始呢？很簡單。我直接把我過去在Figma 的貼文模板丟給 Gemini ，請它建立一個 HTML 模板。

模板是做出來了，但內容基本上就是簡單的標題加文字，然後還有一些引言區塊。後來我開始思考，到底一篇貼文會需要哪些區塊。於是我把一些其他貼文的圖片丟給 AI，請它幫我分析有哪些不同的區塊。

漸漸地，可使用的區塊變多了。但整個 HTML 也變得越來越長。這樣一來，如果我每次做新貼文都要回頭瀏覽舊的貼文檔案，實在很麻煩。

除此之外，貼文中用到的區塊也不一定相同。比如說，A 貼文可能只用到文字和簡單的引言；但 B 貼文可能更豐富，需要對比區塊、流程區塊等等。所以如果我只用單個頁面，很難容納所有常見的區塊。

後來我想到一個方法：先建立一個模板用的 HTML，裡面包含常見的項目。之後要做新貼文時，就請 AI 讀那個頁面，再根據需要用到的區塊建立新的貼文。

但下一個問題也出現了。HTML 有幾百行，因為裡面包含了樣式、文字和其他內容。如果每次都把整個頁面丟給 AI，其實非常消耗 Token。

於是我開始想，能不能把東西拆開。比如說，把文字單獨抽出來之後，我只要請 AI 幫我編輯那份文字資料就好了。

第二版：改成資料驅動

所以在試驗過第一版 HTML 方案後，我開始問 AI 的建議，最後決定改成資料驅動的方式。也就是由 HTML 只定義區塊，資料的 JSON 檔才負責文字內容。一開始其實很順利，因為 HTML 只需要定義區塊的排列方式和樣式。

JSON 則負責決定要用哪個樣式，以及要排什麼文字。但第二個問題也來了：有時候我會覺得它的樣式有點太固定，總是文字加引言。如果我想加一些不同的小區塊，就得回到 HTML 檔案裡註冊更多結構，再用 JSON 去填資料。

不過當積木種類越來越多、頁面越來越複雜，那個「資料清單」反而變成了負擔。我得不斷在規格書裡定義新欄位、在程式裡加新的轉換規則。

如果是要長期維護的話，這樣比較好，但目前還在不斷調整的階段，如果先定義好資料反而缺少彈性。

所以我決定：先改回HTML，確認思路可行後，未來要改再改。

這也是我平時開發的過程：先用簡單版本探索，後重構

像做網站我通常也是先從 Gemini 給的 HTML 版本開始，滿意後再發展成更大的框架。

第三版：回到 HTML 驅動

我把原本的 JSON 資料移除，改回以 HTML 為驅動的方式。原先內嵌在裡面的 CSS，我也一起抽了出來。

跟最初的 HTML 相比，這一版借鑑了上一次重構中的模板樣式，只是我把它整理到 CSS 裡面。這樣一來，AI 就可以用更少的 token 去完成工作。

後續的改進

隨著貼文越來越多，我會需要不同的視覺風格。

所以我把 CSS 拆成兩層。

第一層叫 base.css，它只管最基本的事：每頁 1080×1350 像素、內容從上往下排列、頁面從左到右並排。這些是不管什麼風格都不會變的「物理規則」。

第二層叫 themes/default.css，它負責所有「品牌感」的東西。我把所有的顏色集中成幾個變數——主色、輔色、淡色、邊框色、強調紅、確認綠。所有的積木都引用這些變數，而不是直接寫色碼。

另外，當貼文超過三篇的時候，我發現要切換貼文變得很麻煩，需要先複製路徑，再在終端機打開。

所以我做了一個簡單的管理頁面。上面一排標籤寫著每篇貼文的名字，點一下就切過去。中間是預覽區，右邊是文案欄（顯示準備貼到社群媒體的文字），下面有縮放滑桿和匯出按鈕。

我本身也是一個需要微調的人，所以又在 HTML 中加入一些屬性。比如說可以編輯裡面文字的屬性，或是拖曳圖片並自由移動。

透過這些方式，我既可以直接把文章丟給 AI，讓它先幫我生成 90% 的稿件，也可以再透過修改文字、加入圖片等等方式，把剩下的 10% 補齊。

圖片與文案一起生成

除此之外，如果我有一些已經確定要加的圖片，也可以直接請 AI 生成，並且幫我無縫地放進貼文裡面。如果是線條插圖，甚至還可以順便去背。

在生成圖片時，我有一個參考圖資料夾，每次 AI 生成時都會引用這個資料夾中的視覺 DNA，這樣就不會有風格落差。

同時生成社群的貼文文案。

圖片做好之後，我還要去想文字。過去這兩件事是分開來做的。比如說，我先生成好貼文之後，再回到終端機跟 AI 說我要貼文文案。現在我則把這件事一起包進 Skill 裡面。

而且它可以直接顯示在網頁右側的文字框裡面。

把規則封裝成 Skill

模板寫好了，風格也寫好了，接下來最重要的一步就是建立 Skill。

畢竟你不會希望每次建立貼文的時候都要跟他說：幫我根據模板建立貼文，然後模板你可以怎麼用，你可以建立新的元件…

如果每次都輸入一次太麻煩了，不如把它定義成 Skill，這樣未來遇到一些情況也可以封裝進去。

這個 Skill 就像 AI 的說明書。它知道什麼時候該用哪個區塊，也知道如果沒有適當的區塊時，可以建立圖片等等。在後續的調校過程中，我也會不斷把規則補進去。比如說，如果頁面太空，我就加一條規則：如果頁面中內容高度太少，就加入圖片。透過這樣的迭代，未來就更有機會一次性產出我需要的樣貌。

除此之外，我還加了一條很重要的規則：如果現有區塊不適合文章內容，那就允許 AI 自行建立區塊，並且把樣式寫進 CSS 和 Skill 裡面。這樣只要花一次 Token，未來就能用更少的 Token 來使用。

透過這個 Skill，我在保持一致性的同時，讓 AI 有了彈性。

運作原理

運作原理很簡單：

我把貼文骨架、所有可能的區塊、變體，通通寫在 Skill 中，而樣式它不用管，因為已經抽出來在 CSS 中了。

同時，我也把流程、長文轉短文規則、圖片生成規則，通通放在 Skill 裡面。

這樣只要啟動那個 Skill，就能夠跑完整個流程。

整體架構

SKILL → 放入模組的寫法（目前是HTML片段）

css → 定義樣式，無論是模組的大小、顏色、留白、字體等等，通通可以根據不同主題做微調。

html → 每篇文都是一篇獨立的 index.html，然後外層有個主 index.html 作為管理。

這個是目前 HTML 版本的，偏簡單，架構肯定有更好的，不過我還在探索學習中。

之後如果要變成真正的 APP，可能會改成其他架構，比如說把元件抽出來按需使用，這樣 skill 就不用寫這麼多。

這套工作流怎麼運作

我現在的貼文流程如下：

先寫完完整的部落格文章。

↓

直接引用文章，開啟 Skill。

↓

等五分鐘，輪播貼文圖片、裡面的插圖、貼文文案都完成。

下一步規劃

目前我還需要手動下載下來並且把它貼到 IG 上。不過未來我可以直接串接社群平台的 API，它就能直接幫我發到 IG 上了。

雖然說前面希望給 AI 完成90%，但未來我應該還是會加入更多微調的功能，會類似網頁設計一樣，能視覺化微調 px 而非手動排版。

我覺得 Canva 上下限差異極大的原因，就是因為「太自由了」。

當開發者把美感封裝起來，並允許使用者在規則下做微調，那就能確保任何人使用，都會是好看的。

我的觀點

這個工作流程花了我五個小時。 如果以我過去做一篇貼文最快要一小時來算， 這個工作流，只要幫我處理五篇貼文就已經值回票價了。

我覺得在 AI 時代打造工作流，是一件非常耗時耗力的事情。因為你要想清楚流程怎麼走、架構怎麼設計，最終才會得到一個省時、省力，且高品質的結果。

也要應對 AI 的不可控性，如果它每次我用同個 Prompt 都能得到相同的高品質結果，那這個工具也沒有開發的必要。

AI 有它的思路，你要發揮它的潛能，就必須順著它的思路去給予規範。

同時，你也要想我這個需求是簡單，還是複雜？未來需要不需要可擴充性？

如果你只需要一個簡單的結果，不需要客製化，也不需要太好看，其實有很多方法可以解決。

例如直接丟給 Gemini，也可以完成這件事。不過如果你對品質有要求，希望成果更好看一些，那我認為值得花時間去打造自己的工作流。

市面上有類似的東西嗎？我想很多，但我不滿足於當前的工具。

說好聽點是高標準，說難聽點是難搞XD

不過我認為：

當人人都可以用AI做出東西的時代，大部分人可能只停留在用AI在有「做出來」就好。

但如果你願意更「難搞」一點，在細節處更著琢磨，那這很可能會成為你的護城河

當別人覺得「這樣就可以了」，那些不滿足的人，就會想來找你。

如果你對於打造工作流有興趣，歡迎追蹤我的 Threads，或加入 AI Agent 工作流社群。裡面有很多關於 AI Agent 的最新資訊與交流。

如果有 AI、Agent 工作流、建置的需求，也歡迎加入我的 LINE 來討論細節。