ig-carousel-writer

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：先讀「你的品牌設定」（不可跳過）

圖卡是視覺成品，配色、頭像、帳號名一錯，整套就不是你的品牌。動筆前拿到：

1. 你要做什麼主題（必要）：主題、素材或想分享的重點。
2. 你的品牌設定（必要）：見 references/品牌設定模板.md。請作者填好貼回來，至少要有：
   • 主色、強調色、背景色（HEX）
   • 顯示名稱、IG handle（@帳號）
   • 頭像圖檔路徑（沒有就先用純色圓圈占位）

沒填品牌設定 → 先把模板貼給作者填；真的趕時間，用下方「預設安全配色」先做，並提醒作者之後換成自己的色。

預設安全配色（作者沒提供時的 fallback）： 主色 #1A1A2E、強調色 #B8860B、背景 #F5F5F0、文字 #2D2D2D。

---

設計原則（Schoger 方法論）

1. 大字優先 — 標題 64–96px、內文 40–44px、關鍵句 38–48px。寧可大到裁文字，不可小到留空洞。
2. 大字收緊 tracking — 40px 以上中文加 letter-spacing: -0.02em，畫面更緊湊有力。
3. 畫面要滿 — 用色塊、表格、列表、數據卡填滿空間。空蕩蕩 = 業餘。
4. Outer ring 取代 border — 容器邊緣用 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08)，比 border 乾淨。
5. 同心圓角 — 內層圓角 = 外層圓角 − padding。
6. 左對齊為主 — 內容頁左對齊；只有封面頁、CTA 頁居中。
7. 重點字加粗變色 — 關鍵詞用主色，數字／工具名用強調色。
8. 每張圖卡都要有視覺元素 — 不能純文字，至少要有色塊底／邊線／表格／列表／數據卡其中一種。

---

圖卡結構（彈性 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-主題/）：

1. slide-01.html ~ slide-NN.html — 每張圖卡 HTML
2. caption.md — IG Caption
3. build.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 張、品牌設定缺主色。