這份教學搭配頁面上方的「貼文提示詞產生器」使用。先在上面選好你的風格、下載設計檔，再往下跟著做。
在上方產生器選好風格，點下載，你會拿到這兩個檔案：
按右上角「複製」，整段拿走，STEP 5 會用到。
我會給你一份「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：問我「要建在哪個資料夾」和「資料夾要中文還是英文」。
用 Claude 桌面版（Mac／Windows），把模式切到 Cowork。網頁版不支援；沒帳號到 claude.ai 註冊，免費版可用。
點左下「Project or folder」→ Create new project。
幫專案取個名字，按 Add folder 選一個工作資料夾（放桌面或下載夾都好找）。
把 STEP 1 的兩個檔案拉進對話、貼上 STEP 2 的指示詞，送出。第一次會自動裝環境（約 5–10 分鐘），之後跳過。
貼上你的內容後，Claude 會列出每頁放什麼。看不順就說怎麼改，說「OK」它才會開始做圖。
Claude 打包好 zip，下載解壓，就是一組 1080×1350 的 PNG，直接上傳 IG 輪播。
下次要做新的一篇，在同一個對話裡說「我要做下一篇」、貼上新內容就好，環境不用重建，會快很多。
