AI 貼文設計產生器

AI Post Style System

💻

請使用電腦版本
這個工具需要較大的螢幕才能正常使用。
請在桌機或筆電上開啟。

即時預覽

選項變動時，預覽會自動更新。

IG 貼文提示詞產生器

選完你的版型，把 HTML 和提示詞一起貼給 AI。

色系

用 Claude 一鍵生成 IG 輪播圖｜教學

AI 生成輪播貼文｜步驟教學

從上方產生器拿到設計檔之後，跟著這份教學，10 分鐘內你就能拿到第一組屬於自己風格的輪播圖。

整體流程

從上方產生器下載「設計規格」和「版型範本」
打開 Claude Cowork、上傳兩個檔案、貼上執行指示詞
回答兩個問題（資料夾位置、中文還是英文）
貼上你的內容、確認 Claude 的拆頁規劃
等 Claude 自動生成 HTML、截圖、打包 zip
下載 zip、解壓、PNG 直接上 IG

STEP 1

準備好三樣東西

從上方產生器選好你的風格 → 點下載，你會拿到兩個檔案：

IG設計規格.txt（給 AI 看的設計規格）
IG版型範本.html（各區塊的樣式範本）

加上下面這段「執行指示詞」（按右上角複製按鈕一次拿走）：

執行指示詞

我會給你一份「IG 設計規格」和一份「IG 版型範本」，請照下面流程，把後面提供的內容做成 1080×1350 PNG 輪播圖，最後打包 zip 給我下載。【絕對規則｜寫死不可違反】 1. 不刪減我提供的原文。原文 100% 完整保留，只能調整排版（換行、分頁、孤行處理時刪贅字「的」「了」「就」）。除非我在拆頁規劃確認後明確說「幫我刪掉這段」，否則你都不准動我的文字內容。 2. 不問我要幾頁。你看完內容後自己依長度與結構判斷頁數，列拆頁規劃給我看。 3. 拆頁規劃必須等我說「OK」才能進下一步，不可以自己直接生 HTML。 4. 全程不問「要不要繼續」「需不需要修改」，依下方流程一氣呵成跑完。 5. 不做封面頁、不做 CTA 頁（從內文第一頁開始）。 6. 遇到錯誤自己 debug，最多重試 3 次再回報。 7. 最終一定要打包成 zip 給我下載連結。【執行流程】 Step 1｜環境設定：問我兩件事依序問我並等我回答： 1. 要把這次的輪播圖專案建在哪個資料夾？（給我絕對路徑） 2. 資料夾名稱要用中文版還是英文版？得到答案後 cd 進指定路徑，依語言選擇進入 Step 2。 Step 2｜建立資料夾結構 + 版型自動歸位依語言選擇建立資料夾：【英文版】 mkdir -p 01-brand 02-templates 03-blocks 04-rules 05-assets 06-references 07-output 99-system 【中文版】 mkdir -p "01-設計規格" "02-版型範本" "03-區塊元件" "04-設計規則" "05-素材" "06-參考資料" "07-輸出" "99-系統用" 對應表： - 01-brand ↔ 01-設計規格（字體、色彩、樣式規格） - 02-templates ↔ 02-版型範本（HTML 版型範本） - 03-blocks ↔ 03-區塊元件（可重用區塊） - 04-rules ↔ 04-設計規則（排版微調規則） - 05-assets ↔ 05-素材（圖片、icon） - 06-references ↔ 06-參考資料（備用參考） - 07-output ↔ 07-輸出（最終 PNG + zip） - 99-system ↔ 99-系統用（AI 工作暫存 HTML，用戶不用看）把上傳的兩份檔案自動歸位： - IG設計規格.txt → 01-brand/ 或 01-設計規格/ - IG版型範本.html → 02-templates/ 或 02-版型範本/ 歸位後讀取兩份檔案，後續所有讀取都從歸位後的新路徑讀。環境準備（自動判斷，不問我）： - 檢查當前資料夾是否已有 node_modules 與 package.json - 沒有 → npm init -y、npm install playwright adm-zip、npx playwright install chromium - 已有 → 跳過安裝直接用 Step 3｜詢問內容問我一件事，等我回答：請貼上你的主題與想分享的內容。 Step 4｜AI 主導拆頁規劃（必須等我確認再進下一步） 1. 分析我貼的內容，找出主要段落、核心觀點、關鍵句。 2. 依內容長度與結構自己決定頁數（不問我幾頁）。 3. 列出拆頁規劃給我看，每頁要具體寫出： - 該頁的標題與實際文字內容（不要只說「列表頁」「金句頁」這種抽象描述） - 對應的版型（標題+內文 / 列表 / 步驟 / 引言 / 對比 / 小結 / 欄位排版）拆頁原則： - 每頁要有足夠的內容密度，不要短短一句話就切一頁 - 內容自然分段，不要為了湊頁數硬拆 - 一頁文字量大約 50-150 字（金句頁可以更少） - 同一個論點的延伸內容盡量在同一頁回應分支： - 我說「OK」「可以」「沒問題」→ 進 Step 5 - 我給具體指令（例：「第 3 頁拆成 2 頁」「合併 5、6 頁」）→ 局部調整後重新列規劃 - 我說「重新規劃」「整份重做」→ 從頭重新分析重列 - 沒收到我明確的確認前，絕對不可以進 Step 5 Step 5｜生成 HTML 在 99-system/（或 99-系統用/）建立 p01.html ~ pXX.html，每個獨立 1080×1350 頁面。關鍵原則： - 字型、顏色、字級、間距嚴格遵守 IG設計規格 - 各區塊樣式仿造 IG版型範本對應 section 的 CSS - 每頁是完整的 <!DOCTYPE html>...</html>，包含 Google Fonts 載入【判定規則】 - 內容裡 - 開頭 = 列表版型 - 內容裡 1. 2. 3. = 步驟版型 - 有來源的引用 = 引言金句版型（沒來源的句子不要套引言） - 用 () 括起來的文字 = 補充框（字級小一點、視覺區隔）【微調規則】 - 孤行（單行只剩 1-3 字 + 標點）：優先刪贅字（「的」「了」「就」），不要調間距 - 斷行只能在逗號、句號、冒號後面，不可在頓號後斷行 - 內文字級嚴守設計規格（32-34px），不可因內容多就縮字（一頁放不下要分頁） Step 6｜截圖 + 打包 zip 寫一支 screenshot.js，用 Playwright headless 對每個 99-system/*.html（中文版讀 99-系統用/）截圖 1080×1350，存到 07-output/（中文版輸出到 07-輸出/），再用 adm-zip 壓成 carousel.zip。執行 node screenshot.js。 Step 7｜給我下載告訴我 carousel.zip 的完整路徑，並提供下載連結。現在開始 Step 1：問我「要建在哪個資料夾」和「資料夾要中文還是英文」。

檔案保存小提醒

這兩個檔案就是你的設計系統，記得存好。下次做同個風格的內容可以直接複用，不用每次重選一次。

STEP 2

打開 Claude Cowork

Cowork 需要使用 Claude 桌面版（Mac 或 Windows），網頁版無法跑這套流程。沒有帳號的話到 claude.ai 註冊（免費版可用），下載桌面版裝起來，開新對話。

對話開始之前先做一件事：在你電腦上建一個工作資料夾，把剛剛下載的兩個檔案放進去。資料夾放哪裡都可以，建議放在桌面或下載資料夾，比較好找。例如：

桌面 / IG輪播 / IG設計規格.txt
桌面 / IG輪播 / IG版型範本.html

接著回到 Cowork 對話框，做這三件事：

指定工作資料夾 告訴 Cowork 你的資料夾路徑（例如：「請使用桌面上的 IG輪播資料夾作為工作目錄」）
貼上執行指示詞 把上一步複製的指示詞整段貼到對話框
送出 Cowork 會開始自動跑 Step 1（環境準備）

資料夾位置小提醒

Cowork 會問你兩件事：要建在哪個資料夾、資料夾名稱要用中文版還是英文版。回答完之後它會自動建好設計系統的子資料夾（01 ~ 06）、把你上傳的兩個檔案歸位、再建一個 07-輸出放最後的 PNG 跟 carousel.zip，另一個 99-系統用放它自己工作的暫存檔（編號 99 表示是 AI 用的，你不用打開）。

所以這個資料夾建議找一個你之後能輕易打開的位置。怕英文看不懂就選中文版，習慣英文路徑（程式邏輯穩定一點）就選英文版。

STEP 3

跟 Claude 對話的順序

送出指示詞之後，Claude 會自動帶你走完下面這幾步：

Claude 先問你兩件事 要建在哪個資料夾、資料夾要中文還是英文版
環境準備 第一次裝套件 + Chromium，等 3-5 分鐘（之後再做就跳過安裝直接用）
Claude 問你要貼的內容 把你想做成輪播的主題＋文字內容貼進對話框
Claude 會列出「拆頁規劃」 每一頁要放什麼文字、用什麼版型，會完整列給你看
等你說 OK 才繼續 看不順眼直接跟它說怎麼改，不要客氣（例：「第 3 頁拆成 2 頁」「重新規劃」都聽得懂）
Claude 自動生成 HTML、截圖、打包 zip 給你下載連結，整套搞定

拆頁規劃小提醒

拆頁規劃這一步最重要，多花一點時間調整。看到「第三頁文字太少」「第五頁這段該分開」就直接告訴 Claude，規劃 OK 之後它會自動進入製圖階段。

事後再回頭改 HTML 比較花時間，前期規劃多花幾分鐘最划算。

STEP 4

拿到 PNG 之後

下載 zip → 解壓 → 你會看到一組 1080×1350 的 PNG（p01、p02、p03...，張數由 Claude 依你的內容判斷）。

這些圖直接上傳 IG 輪播就能用。預設不會生成封面頁和 CTA 頁，這兩個你自己另外設計，會更有個人風格。

封面客製化小提醒

想要 AI 也幫你做封面，可以在規劃階段跟 Claude 說：「也幫我做一張封面，標題是 XXX」，它會多生一張。

STEP 5

下次要做下一篇的時候

第一次的環境跟設定已經建好了，做下一篇不用重開對話、不用重新上傳檔案。在同一個對話裡做這兩件事：

告訴它要做新的一篇 例如：「我要做下一篇」
貼上新的主題與文字內容 例如：「主題是『自由工作者如何提升效率』，內容如下：……」（不用講要幾頁，AI 會自己拆）

之後的流程都跟第一次一樣：拆頁規劃 → 你確認 → 自動生成 → 下載 zip。整個過程會比第一次快很多，因為環境已經建好了。

對話失憶小提醒

如果 Cowork 忘了之前的設定（例如忘了你的設計規格），可以再請它重新打包一次。把指示詞再貼一次、兩個檔案再上傳一次，後續步驟都一樣。

常見問題

環境裝不起來、跑到一半卡住？

如果它第一次安裝的時候比較慢，可以跟它說重試一下，通常它會自己 debug。如果連續失敗的話，可能要過一陣子再試試看。

字型沒載入、想換樣式怎麼辦？

基本上，像是字型沒載入之類的問題，都可以直接跟 AI 反饋。如果想要更換樣式、字型或版型，也可以直接在對話中溝通。

我們的提示詞就是提供一個基礎的樣式，它當然可以直接修改，不需要特地回到 HTML 原始碼。

產出的內容跟我想的不一樣？

產出的內容如果與預期不符，你可以直接告訴 AI，請它先幫你進行分頁規劃，等人工確認後再執行製圖。

比起製圖完成後再去重做，先規劃再執行會更節省 Token，過程也會更順暢。等到過一段時間，AI 通常就會比較瞭解該如何幫你分頁，一開始的時候可以多花一點時間引導它。

下載的 zip 在哪裡？

Claude Cowork 跑完會直接顯示一個下載連結（檔名 carousel.zip）。如果沒看到，直接問 Claude「zip 在哪？給我下載連結」。

原文太長怎麼辦？要不要先精簡？

我們的指示詞設定不會主動刪減原文。如果你想要 AI 修改原文，要持續地跟 AI 溝通你想要怎麼改，或者請它幫忙整理。

要用哪一個 AI？可以用 ChatGPT 或 Gemini 嗎？

ChatGPT、Gemini 都可以用，可以把設計規格跟版型範本丟給它們當作「參考用」，請它幫你拆頁、寫 HTML 起步版本。

但如果你想要完全自動化執行（自動建資料夾、跑 Playwright、截圖、打包 zip 整套搞定），目前還是推薦 Claude 桌面版的 Cowork。因為這套流程需要 AI 真的能直接操作你電腦的資料夾跟執行指令，網頁版 AI 目前還沒辦法做到這個程度。

如果你對 Claude Code 不太熟，建議直接用 Cowork，介面比較直觀，邏輯跟 Code 一樣。

付費版才能用嗎？免費版可以跑嗎？

Claude 桌面版有免費額度可用，但跑這套流程會用到 Playwright + Chromium，第一次裝環境跟製圖會耗比較多 Token，免費額度可能跑一兩篇就到上限。

如果你想穩定跑、不被中斷，建議升 Pro 或 Max。

拆頁規劃 AI 拆得不夠好，要怎麼引導？

直接告訴它你想要的改法就好，不用客氣。例如「第三頁文字太少，跟第四頁合起來」「金句單獨一頁」「步驟那段拆成 1. 2. 3.」這種具體指令它都聽得懂。

多花幾分鐘在這一步，比之後重做整套圖省 10 倍時間。

第一次跑很久，是正常的嗎？

正常。第一次要裝 Playwright + Chromium，加上下載字型，會花 5-10 分鐘。第二次之後就快很多，因為環境已經建好了，後續做新一篇通常 3-5 分鐘就能拿到 zip。

可以用自己的圖片素材嗎？

可以。把圖片放進 05-assets（中文版是 05-素材）資料夾，跟 AI 說「請在第三頁用 05-素材裡的 XXX.jpg」就會幫你套進去。

建議圖片命名清楚（例如 bg-paper-warm.jpg、icon-thinking.png），AI 才看得懂該抓哪張。

可以做不同尺寸嗎？或想改其他東西？

可以，直接跟 Claude 講你要改成什麼尺寸（例如 Reels 1080×1920、Stories 1080×1920）。換尺寸後一些區塊的空間跟留白可能需要微調，告訴它之後它會幫你重新調整。

同樣的邏輯，如果你有自己的字型跟色票想套，也可以直接在對話裡跟它說。基本上你用我們這份設計規格產出第一版之後，後續任何想調整或更改的地方，都可以直接在對話中跟 Claude 講，它就會幫你更新規格。

已經有自己的字型 / 色票，要怎麼套進去？

兩種做法。第一，在上方的「貼文提示詞產生器」直接選你的字型跟配色，產出來的 IG設計規格.txt 就是你的版本。

第二，如果有特定字型檔（.ttf / .otf），放進 01-brand（中文版是 01-設計規格）資料夾，跟 AI 說「請用 01-設計規格裡的 XXX.ttf」，它會在 HTML 載入時自動套用。