메뉴
IG 輪播圖卡寫手 —— 把一個主題或素材，拆成 5–10 張 Instagram 輪播圖卡：文案結構 + 可截圖的 HTML 圖卡 + Caption。套用 Schoger 設計原則（大字優先、畫面要滿、色塊系統），視覺專業度直接拉滿。會先讀「你的品牌設定」（配色、頭像、帳號名）再生成，所以做出來是你的品牌、不是別人的。當你說「做 IG 輪播」「做圖卡」「做 carousel」「把這個做成輪播圖文」「IG carousel」或語義等價時主動使用。第一次使用會先請你填一份品牌設定。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | ig-carousel-writer |
| description | IG 輪播圖卡寫手 —— 把一個主題或素材，拆成 5–10 張 Instagram 輪播圖卡：文案結構 + 可截圖的 HTML 圖卡 + Caption。套用 Schoger 設計原則（大字優先、畫面要滿、色塊系統），視覺專業度直接拉滿。會先讀「你的品牌設定」（配色、頭像、帳號名）再生成，所以做出來是你的品牌、不是別人的。當你說「做 IG 輪播」「做圖卡」「做 carousel」「把這個做成輪播圖文」「IG carousel」或語義等價時主動使用。第一次使用會先請你填一份品牌設定。 |
把一個主題，變成一套讓人想滑到最後、還想存起來的 Instagram 輪播圖卡。產出三樣東西：文案拆解 + 每張圖卡的 HTML（可截圖成 PNG）+ Caption。
圖卡是視覺成品，配色、頭像、帳號名一錯，整套就不是你的品牌。動筆前拿到：
references/品牌設定模板.md。請作者填好貼回來，至少要有：
沒填品牌設定 → 先把模板貼給作者填；真的趕時間，用下方「預設安全配色」先做，並提醒作者之後換成自己的色。
預設安全配色（作者沒提供時的 fallback）： 主色
#1A1A2E、強調色#B8860B、背景#F5F5F0、文字#2D2D2D。
letter-spacing: -0.02em，畫面更緊湊有力。box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08)，比 border 乾淨。| 位置 | 類型 | 規範 |
|---|---|---|
| 第 1 張 | 封面 | Hook 標題（≤ 15 字）— 讓人想滑下去 |
| 第 2 張 | 痛點 | 讀者共鳴的現象或問題 |
| 第 3–N 張 | 觀點 | 每張一個重點，文字精煉 |
| 倒數第 2 張 | 總結 | 金句或行動指南 |
| 最後一張 | CTA | 追蹤 / 儲存提醒 + @你的handle |
每張限制：標題 ≤ 15 字、內文 ≤ 80 字、留白 > 文字。
┌─────────────────────────────┐
│ [頭像] 顯示名稱 │
│ @你的handle │
│ ───────────────────────── │
│ [標籤]（如有） │
│ 大標題（64–96px） │
│ 內文（40–44px，重點字變色） │
│ [色塊元素：表格/列表/數據卡] │
│ [key-box] 關鍵收束句 │
│ 頁碼 / 總頁數 │
└─────────────────────────────┘
兩種模式：A 純文字卡（背景用品牌背景色）為預設；B 照片蒙版卡（作者提供照片時）—— 照片 + 黑色 80% 蒙版，文字白色。
下方 CSS 用
主色 / 強調色 / 背景色 / 文字色當變數說明。生成時換成作者品牌設定的實際 HEX；沒提供就用預設安全配色。尺寸固定 1080 × 1350px（IG 4:5）。
* { 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); }
[Hook — 第一行讓人停下來，不以 emoji 開頭]
[2–3 句摘要核心內容，一句話一行]
儲存這篇，下次需要時回來看 📌
---
#你的主題標籤 ×7–10
產出檔案到一個資料夾（例如 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」句型嗎？