Post System

AI 貼文樣式工具

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

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

IG 貼文提示詞產生器
選完你的版型,把 HTML 和提示詞一起貼給 AI。
色系
用 Claude 一鍵生成 IG 輪播圖|教學

生成輪播圖步驟教學

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

整體流程

  1. 從上方產生器下載「設計規格」和「版型範本」
  2. 打開 Claude Cowork、上傳兩個檔案、貼上執行指示詞
  3. 跟 Claude 對話(回答主題、頁數、確認拆頁規劃)
  4. 等 Claude 自動生成 HTML、截圖、打包 zip
  5. 下載 zip、解壓、PNG 直接上 IG
STEP 1

準備好三樣東西

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

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

加上下面這段「執行指示詞」(按右上角複製按鈕一次拿走):

執行指示詞
我會給你一份「設計規格」和一份「HTML 版型範本」,請你照下面流程,幫我把後面提供的內容做成 1080×1350 PNG 輪播圖,最後打包 zip 給我下載。 【絕對規則】 - 全程不問我「要不要繼續」「需不需要修改」,依下方流程一氣呵成跑完 - 遇到錯誤自己 debug,最多重試 3 次再回報 - 不要做封面頁、不要做 CTA 頁(從內文第一頁開始) - 最終一定要打包成 zip 給我下載連結 - 不要主動刪減我提供的文字內容。原文要完整保留,只能調整排版(換行、分頁、孤行處理時刪贅字「的」「了」「就」等)。如果整體看起來太長,等我看完成品後再問我「要不要刪減哪一段」,由我決定刪什麼 【執行流程】 Step 1|環境準備 依序執行: 1. 建立設計系統資料夾結構: mkdir -p 01-brand 02-templates 03-blocks 04-rules 05-assets 06-references 2. 建立輸出資料夾(放最終的 PNG 跟 zip): mkdir -p 07-output 3. 建立 AI 工作暫存資料夾(放生成中的 HTML): mkdir -p pages 4. npm init -y 5. npm install playwright adm-zip 6. npx playwright install chromium Step 2|歸位並讀取兩份檔案 1. 把我上傳的兩個檔案歸位到對應的設計系統資料夾: - IG設計規格.txt → 01-brand/ - IG版型範本.html → 02-templates/ 2. 歸位完成後讀取兩個檔案的內容: - 01-brand/IG設計規格.txt(字體、色彩、樣式規格) - 02-templates/IG版型範本.html(各區塊樣式範本) 3. 後續所有讀取都從歸位後的新路徑讀 Step 3|問我兩件事 依序問我並等我回答: 1. 主題或想分享的內容是什麼? 2. 想要幾頁?(建議 6-8 頁) Step 4|分析文字 + 拆頁規劃(必須等我確認再進下一步) 1. 先分析我提供的內容,找出主要段落、核心觀點、關鍵句 2. 規劃每一頁要放的內容,具體列出來給我看: - 每頁放哪些文字(直接列出該頁的標題與內容) - 每頁對應的版型(依範本裡有的 section:標題+內文 / 列表 / 步驟 / 引言 / 對比 / 小結 / 欄位排版) 3. 拆頁原則: - 每頁要有足夠的內容密度,不要短短一句話就切一頁 - 內容要自然分段,不要為了湊頁數硬拆 - 一頁的文字量大約 50-150 字之間(金句頁可以更少) - 同一個論點的延伸內容盡量在同一頁 4. 規劃完整列出來給我看後,等我說「OK」或回應要怎麼調整,再進 Step 5。不可以自己直接進 Step 5。 Step 5|生成 HTML 在 pages/ 建立 p01.html ~ pXX.html,每個獨立 1080×1350 頁面。 關鍵原則: - 字型、顏色、字級、間距嚴格遵守 IG設計規格.txt - 各區塊樣式仿造 IG版型範本.html 對應 section 的 CSS - 每頁是完整的 <!DOCTYPE html>...</html>,包含 Google Fonts 載入 【判定規則】 - 內容裡 - 開頭 = 列表版型 - 內容裡 1. 2. 3. = 步驟版型 - 有來源的引用 = 引言金句版型(沒來源的句子不要套引言) - 用 () 括起來的文字 = 補充框(字級小一點、視覺區隔) 【微調規則】 - 孤行(單行只剩 1-3 字 + 標點):優先刪贅字(「的」「了」「就」),不要調間距 - 斷行只能在逗號、句號、冒號後面,不可在頓號後斷行 - 內文字級嚴守設計規格(32-34px),不可因內容多就縮字(一頁放不下要分頁) Step 6|截圖 寫一支 screenshot.js,用 Playwright headless 對每個 pages/*.html 截圖 1080×1350,存到 07-output/,再用 adm-zip 壓成 07-output/carousel.zip。執行 node screenshot.js。 Step 7|給我下載 告訴我 carousel.zip 的完整路徑,並提供下載連結。 現在開始 Step 1。Step 1 跑完直接讀檔案(Step 2),再進 Step 3 問我問題。

檔案保存小提醒

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

STEP 2

打開 Claude Cowork

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

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

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

接著回到 Cowork 對話框,做這三件事:

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

資料夾位置小提醒

Cowork 會自動在你指定的資料夾裡建立設計系統的子資料夾結構(01-brand 到 06-references),把你上傳的兩個檔案歸位,再建一個 07-output 放最後的 PNG 跟 carousel.zip。所以這個資料夾建議找一個你之後能輕易打開的位置。

STEP 3

跟 Claude 對話的順序

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

  • 環境準備 第一次裝套件 + Chromium,等 3-5 分鐘
  • Claude 會問你兩件事 主題 / 想做幾頁
  • Claude 會列出「拆頁規劃」 每一頁要放什麼文字、用什麼版型,會完整列給你看
  • 等你說 OK 才繼續 看不順眼直接跟它說怎麼改,不要客氣
  • Claude 自動生成 HTML、截圖、打包 zip 給你下載連結,整套搞定

拆頁規劃小提醒

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

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

STEP 4

拿到 PNG 之後

下載 zip → 解壓 → 你會看到 6-8 張 1080×1350 的 PNG(p01、p02、p03...)。

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

封面客製化小提醒

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

STEP 5

下次要做下一篇的時候

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

  • 告訴它要做新的一篇 例如:「我要做下一篇」
  • 告知新的主題與頁數 例如:「主題是「自由工作者如何提升效率」,做 6 頁」
  • 貼上新的文字內容 把你想做成輪播的原文丟給它

之後的流程都跟第一次一樣:拆頁規劃 → 你確認 → 自動生成 → 下載 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 資料夾,跟 AI 說「請在第三頁用 05-assets 裡的 XXX.jpg」就會幫你套進去。

建議圖片命名清楚(例如 bg-paper-warm.jpgicon-thinking.png),AI 才看得懂該抓哪張。

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

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

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

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

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

第二,如果有特定字型檔(.ttf / .otf),放進 01-brand 資料夾,跟 AI 說「請用 01-brand 裡的 XXX.ttf」,它會在 HTML 載入時自動套用。

error: 內容已被保護!
返回頂端