| name | ig-carousel-writer |
| description | IG 輪播圖卡寫手 —— 把一個主題或素材，拆成 5–10 張 Instagram 輪播圖卡：文案結構 + 可截圖的 HTML 圖卡 + Caption。套用 Schoger 設計原則（大字優先、畫面要滿、色塊系統），視覺專業度直接拉滿。會先讀「你的品牌設定」（配色、頭像、帳號名）再生成，所以做出來是你的品牌、不是別人的。當你說「做 IG 輪播」「做圖卡」「做 carousel」「把這個做成輪播圖文」「IG carousel」或語義等價時主動使用。第一次使用會先請你填一份品牌設定。 |
IG 輪播圖卡寫手（ig-carousel-writer）
把一個主題，變成一套讓人想滑到最後、還想存起來的 Instagram 輪播圖卡。產出三樣東西：文案拆解 + 每張圖卡的 HTML（可截圖成 PNG）+ Caption。
觸發
- 做 IG 輪播 / 做圖卡 / 做 carousel
- 把這個主題做成輪播圖文 / IG carousel
Step 0：先讀「你的品牌設定」（不可跳過）
圖卡是視覺成品，配色、頭像、帳號名一錯，整套就不是你的品牌。動筆前拿到：
- 你要做什麼主題（必要）：主題、素材或想分享的重點。
- 你的品牌設定（必要）：見
references/品牌設定模板.md。請作者填好貼回來，至少要有：
- 主色、強調色、背景色（HEX）
- 顯示名稱、IG handle（@帳號）
- 頭像圖檔路徑（沒有就先用純色圓圈占位）
沒填品牌設定 → 先把模板貼給作者填；真的趕時間，用下方「預設安全配色」先做，並提醒作者之後換成自己的色。
預設安全配色（作者沒提供時的 fallback）：
主色 #1A1A2E、強調色 #B8860B、背景 #F5F5F0、文字 #2D2D2D。
設計原則（Schoger 方法論）
- 大字優先 — 標題 64–96px、內文 40–44px、關鍵句 38–48px。寧可大到裁文字，不可小到留空洞。
- 大字收緊 tracking — 40px 以上中文加
letter-spacing: -0.02em，畫面更緊湊有力。
- 畫面要滿 — 用色塊、表格、列表、數據卡填滿空間。空蕩蕩 = 業餘。
- Outer ring 取代 border — 容器邊緣用
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08)，比 border 乾淨。
- 同心圓角 — 內層圓角 = 外層圓角 − padding。
- 左對齊為主 — 內容頁左對齊；只有封面頁、CTA 頁居中。
- 重點字加粗變色 — 關鍵詞用主色，數字／工具名用強調色。
- 每張圖卡都要有視覺元素 — 不能純文字，至少要有色塊底／邊線／表格／列表／數據卡其中一種。
圖卡結構（彈性 5–10 張）
| 位置 | 類型 | 規範 |
|---|
| 第 1 張 | 封面 | Hook 標題（≤ 15 字）— 讓人想滑下去 |
| 第 2 張 | 痛點 | 讀者共鳴的現象或問題 |
| 第 3–N 張 | 觀點 | 每張一個重點，文字精煉 |
| 倒數第 2 張 | 總結 | 金句或行動指南 |
| 最後一張 | CTA | 追蹤 / 儲存提醒 + @你的handle |
每張限制：標題 ≤ 15 字、內文 ≤ 80 字、留白 > 文字。
統一卡片版型（Tweet Card 風格）
┌─────────────────────────────┐
│ [頭像] 顯示名稱 │
│ @你的handle │
│ ───────────────────────── │
│ [標籤]（如有） │
│ 大標題（64–96px） │
│ 內文（40–44px，重點字變色） │
│ [色塊元素：表格/列表/數據卡] │
│ [key-box] 關鍵收束句 │
│ 頁碼 / 總頁數 │
└─────────────────────────────┘
兩種模式：A 純文字卡（背景用品牌背景色）為預設；B 照片蒙版卡（作者提供照片時）—— 照片 + 黑色 80% 蒙版，文字白色。
HTML 模板（用品牌設定的顏色替換變數）
下方 CSS 用 主色 / 強調色 / 背景色 / 文字色 當變數說明。生成時換成作者品牌設定的實際 HEX；沒提供就用預設安全配色。尺寸固定 1080 × 1350px（IG 4:5）。
共用 CSS 基底
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1080px; height: 1350px;
font-family: 'Noto Sans TC', sans-serif;
background: 背景色; color: 文字色;
display: flex; flex-direction: column;
padding: 64px 72px; position: relative;
}
.header { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: 主色; }
.author-name { font-size: 32px; font-weight: 700; color: 主色; }
.author-handle { font-size: 24px; color: #888; font-family: 'Inter', sans-serif; }
.divider { width: 100%; height: 2px; background: rgba(0,0,0,0.1); }
.content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.title { font-size: 64px; font-weight: 900; color: 主色; margin-bottom: 40px; line-height: 1.3; letter-spacing: -0.02em; }
.body-text { font-size: 40px; line-height: 1.8; color: #444; margin-bottom: 12px; }
.body-text strong { font-weight: 700; color: 主色; }
.page-num { position: absolute; bottom: 40px; right: 72px; font-size: 24px; color: #BBB; font-family: 'Inter', sans-serif; }
色塊元素（按需引入）
.key-box { margin-top: 40px; border-left: 6px solid 強調色; padding: 24px 32px; background: rgba(0,0,0,0.04); border-radius: 0 12px 12px 0; }
.key-box p { font-size: 38px; font-weight: 700; color: 主色; line-height: 1.6; }
.highlight-box { background: 主色; color: #FFF; padding: 36px 40px; border-radius: 16px; margin-top: 48px; font-size: 40px; font-weight: 700; line-height: 1.6; }
.highlight-box .accent { color: 強調色; }
.quote-block { margin-top: 32px; background: rgba(0,0,0,0.05); padding: 28px 32px; border-radius: 12px; font-size: 36px; color: #555; line-height: 1.7; font-style: italic; }
.formula-table { margin-top: 28px; width: 100%; border-collapse: collapse; }
.formula-table td { padding: 20px 28px; font-size: 36px; border-bottom: 2px solid rgba(0,0,0,0.1); }
.formula-table .label { color: #888; width: 35%; }
.formula-table .value { font-weight: 700; color: 主色; }
.stat-row { display: flex; gap: 24px; margin-top: 32px; }
.stat-card { flex: 1; background: rgba(0,0,0,0.05); border-radius: 16px; padding: 28px 24px; text-align: center; }
.stat-card .number { font-size: 52px; font-weight: 900; color: 主色; font-family: 'Inter', sans-serif; }
.stat-card .label { font-size: 30px; color: #888; margin-top: 8px; }
.checklist { margin-top: 24px; list-style: none; }
.checklist li { font-size: 38px; line-height: 1.7; color: #444; margin-bottom: 16px; padding-left: 48px; position: relative; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: 強調色; font-weight: 900; font-size: 40px; }
封面頁（居中、超大字）
.content { align-items: center; text-align: center; }
.main-title { font-size: 96px; font-weight: 900; color: 主色; line-height: 1.3; margin-bottom: 48px; letter-spacing: -0.02em; }
.subtitle { font-size: 40px; color: #666; line-height: 1.6; }
金句頁（深色反轉）
body { background: 主色; color: #FFF; }
.author-handle { color: rgba(255,255,255,0.5); }
.divider { background: rgba(255,255,255,0.15); }
Caption 規則
[Hook — 第一行讓人停下來，不以 emoji 開頭]
[2–3 句摘要核心內容，一句話一行]
儲存這篇，下次需要時回來看 📌
---
#你的主題標籤 ×7–10
- ≤ 300 字 · 7–10 個 hashtags · 不寫「追蹤我」
輸出
產出檔案到一個資料夾（例如 carousel-YYYY-MM-DD-主題/）：
slide-01.html ~ slide-NN.html — 每張圖卡 HTMLcaption.md — IG Captionbuild.sh — 截圖腳本（用 Playwright 把每張 HTML 截成 PNG）
build.sh 範本：
#!/bin/bash
cd "$(dirname "$0")"
node -e "
const { chromium } = require('playwright');
const fs = require('fs'); const path = require('path');
(async () => {
const browser = await chromium.launch({ headless: true });
const slides = fs.readdirSync('.').filter(f => /^slide-\d+\.html$/.test(f)).sort();
for (const s of slides) {
const page = await browser.newPage();
await page.setViewportSize({ width: 1080, height: 1350 });
await page.goto('file://' + path.resolve(s), { waitUntil: 'networkidle' });
await page.screenshot({ path: s.replace('.html', '.png') });
await page.close(); console.log('✅ ' + s);
}
await browser.close(); console.log('🎉 完成');
})();
"
需先安裝 Playwright：npm i playwright && npx playwright install chromium
品質檢查
□ 封面 Hook 讓人想滑下去嗎？
□ 每張圖卡單獨截圖也讀得懂嗎？
□ 資訊密度夠嗎？（每張都有文字 + 至少一種視覺元素）
□ 整體有邏輯遞進嗎？
□ 用的是作者品牌設定的顏色 / 帳號嗎？（不是預設色殘留）
□ CTA 頁有作者的 @handle 嗎？
□ 標題 ≤ 15 字、內文 ≤ 80 字嗎？
□ 沒有「不是 X 而是 Y」句型嗎？
語言與自主執行
- 圖卡內容全中文（產品／品牌名除外，如 ChatGPT、Obsidian）；標籤用「等級一」不用「Level 01」，對比用「之前／現在」。
- 直接執行不確認：圖卡張數（5–10，依內容判斷）、模式選擇（有照片用 B）、文字拆分、hashtag。
- 暫停回報：照片路徑無效、語料太短拆不出 5 張、品牌設定缺主色。
