文章 → IG 輪播
下載 content-to-carousel.skill
查看 content-to-carousel 完整內容
---
name: content-to-carousel
description: 把一段文章、網頁或講義內容變成一組可以直接發的 IG 輪播貼文圖（多張 1080×1350 直式卡片）。當用戶說「做成 IG 輪播」「把這篇變成能發 IG 的圖」「轉成 IG 圖文」「做一組貼文圖」「把這篇拆成幾張卡」，或想把一段內容變成手機上一張張滑、字夠大的直式圖時，務必使用這個 skill。輸出是一組可以直接發的 PNG 圖檔（每張 1080×1350），不是影片、不是一份要用戶自己截圖的 HTML——有出圖能力時（Claude Code／能跑 headless 瀏覽器）就把每張卡截成 PNG 直接交付。用戶可以附一張「風格參考圖」定義視覺，只學它的配色／字體／間距氣質、不搬文字內容。想把網頁做成「影片／Reels」請改用 web-to-reels。
---
# 做一組 IG 輪播貼文圖
把用戶已經寫好的內容，變成一組能發 IG 的直式輪播圖。**做完的定義＝交出一組 PNG 圖檔**（每張 `1080×1350`），不是丟一份 HTML 叫用戶自己截圖。
> 內容是用戶的，你的工作是**拆重點＋排版＋出圖**，不是重寫他的字。
## 開工前先問齊（不要留占位、不要事後補）
動手前先主動把這三件事問清楚——**不要先做好、把 handle 留成 `@你的帳號` 占位再叫用戶補**：
- **你的 IG 帳號（handle）是什麼？** 每張卡右下角都要放，問到才開工。
- **要幾張？** 預設一組輪播（封面＋內容＋收尾，約 4–6 張）；用戶明講只要單張才做單張。
- **有沒有風格參考圖？** 有就請他附一張（只學氣質、不搬內容）；沒有就用乾淨預設，不用卡在這。
問齊再動手，一次到位。
## 先沿用同篇內容的輸出資料夾
出圖前先確定一個文章層級的絕對路徑 `OUTPUT_DIR`，後續所有媒體 Skill 都沿用它。不要直接把成果散在寬泛的專案根目錄，也不要讓輪播與 Reels 各自建立文章資料夾。
依下列順序判定：
1. 先確認來源身分：本機檔案用 canonical path＋內容 fingerprint，公開網頁用 final URL＋文章標題，直接貼上的文字用標題或首段萃取穩定 slug。
2. 先沿用同一對話中已建立或已使用的文章資料夾；跨對話時，掃描來源檔案附近與目前專案下近期建立／修改的子資料夾。
3. 判斷候選時，依序看：是否有相同來源的 `.creator-output.json`、是否包含同一篇文章的 HTML／Markdown／caption／輪播／Reels、資料夾名是否符合文章標題或 slug。建立／修改時間只用來輔助排序，不能單獨認定，避免同時處理兩篇文章時放錯。
4. 來源本來就在明確的文章專屬資料夾時，直接沿用該資料夾。只有一個明確候選時直接沿用；有多個合理候選且無法排除時，在寫檔前只問使用者要沿用哪一個。
5. 完全找不到候選時，才在目前專案的輸出根目錄建立 `<article-slug>/`。slug 使用小寫英數與連字號；沒有可靠標題才詢問，不使用 `untitled`、`output` 等模糊名稱。
6. 確定後，在 `OUTPUT_DIR/.creator-output.json` 記錄 `schema: creator-output/v1`、canonical source、title、fingerprint（可取得時）與 `output_dir` 絕對路徑。後續再次處理同一來源時，內容相符的這份標記優先於時間判斷。
本 Skill 的工作檔與成品一律放在 `CAROUSEL_DIR="${OUTPUT_DIR}/carousel"`；來源 HTML／文章留在原位，不擅自搬移。確定路徑後整次任務固定使用，不得中途另開第二個文章資料夾。
## 四步
### 1. 收內容、拆卡
拿用戶給的文章／段落，拆成一組卡片：
- **封面（第 1 張）**：一句抓人的主標，講「這組在講什麼／看完得到什麼」，不要把答案講完——讓人想滑下去。
- **內容（中間 3–5 張）**：**一張一個重點**，用他自己的話濃縮，不改寫核心用字、不自己編新內容。
- **收尾（最後 1 張，可選）**：一句總結或行動呼籲＋handle。
- **總數預設 4–6 張**（含封面）。太長就挑最抓人的幾點，寧可少；一張讀得完比塞滿有用。IG 輪播最多 10 張。
### 2. 定風格，每張一致
- 附了**風格參考圖**：只學它的**配色、字體感覺、間距、邊框氣質**，套到每張卡；**不搬圖裡的文字或內容**。學氣質、不搬成品。
- 沒附圖：用乾淨預設——淺底（白／米）＋一個強調色標重點＋大標＋條列。
- **一致性是輪播的命**：所有卡片同一組顏色、同一個字體、同樣的邊界與 handle 位置，只有內容在變；右上角放頁碼（`01 / 05`）。
### 3. 出圖：先做 HTML，再截成 PNG（這步是「做完」的關鍵）
**做法（一卡一檔，最不會出錯）：**
1. 在 `CAROUSEL_DIR` 為每張卡各做一個**獨立、自包含的 HTML 檔**（`card-01.html`…`card-0N.html`），每個檔的 `<body>` 就是一張正好 `1080×1350` 的卡，CSS 全內嵌、不連任何外部字體／圖片／CDN。卡片容器記得 `box-sizing: border-box`，避免 padding 把內容擠出 1080×1350 畫布。
2. 對每個檔各截一張圖，尺寸鎖死 1080×1350：
```
<chrome> --headless --window-size=1080,1350 --screenshot=carousel-01.png --default-background-color=FFFFFFFF card-01.html
```
`<chrome>` ＝本機的 `chrome-headless-shell`（見下方環境注意）。一張卡一個檔、一次指令，依序命名 `carousel-01.png`…`carousel-0N.png`。
- ⚠️ **不要**把 N 張卡堆在同一個 HTML 裡再連截 N 次——同一份檔連截只會得到 N 張「第 1 張卡」。要嘛一卡一檔（推薦），要嘛截一張 `1080×(1350×N)` 的長圖再依 1350px 切開，例如第 N 張：`sips -c 1350 1080 --cropOffset $((($N-1)*1350)) 0 long.png --out carousel-0N.png`（或 ImageMagick `convert long.png -crop 1080x1350+0+$(((N-1)*1350)) carousel-0N.png`）。
3. 想給用戶一眼看全貌，可把 N 張 PNG 併成一張 contact sheet（橫向並排）附上。
**交付前必驗（三項，缺一不可）：**
- 尺寸每張都是 `1080×1350`（`sips -g pixelWidth -g pixelHeight carousel-0X.png` 核對）。
- N 張內容**各不相同**（不是連截出的重複圖）。
- **中文沒有變成豆腐字**（□□□）——headless 環境若缺 CJK 字型會這樣，看一眼 PNG 或 contact sheet 確認。
**環境注意**：`chrome-headless-shell` 常**不在 PATH** 上（HyperFrames 會裝在 `~/.cache/hyperframes/chrome/…` 底下）；先找到它的實際路徑再用，或 `npx hyperframes doctor` 確認 Chrome 那項是綠的。若明明路徑對了還是 `permission denied`，先確認指到的是執行檔不是資料夾，必要時 `xattr -d com.apple.quarantine <路徑>` 解除 macOS Gatekeeper 封鎖。若截出來中文是方塊字，代表這個環境缺中文字型，改用系統瀏覽器截圖或先裝字型。
**fallback（只有純網頁環境、完全沒出圖能力時）**：才退回「交一份自包含 HTML＋告訴用戶每張卡各自截圖」。這是退路，不是預設。
### 4. 給發文文字（caption）
順手附一段可貼在 IG 貼文框的說明文字＋幾個 hashtag，用戶複製即用。
## 版面規範（照這個出來的圖才合 IG、手機才讀得清）
- **尺寸**：每張卡固定 `1080×1350`（IG 4:5 直式），用一個固定尺寸外框 `<div>` 鎖住截圖範圍。
- **安全邊界**：內容左右各留 ≥ 64px、上下各留 ≥ 72px，重要的字不貼邊（IG 會裁、手機殼會擋）。
- **字要大**：封面主標約 **72–96px**；內頁重點標 **56–72px**、說明 **32–40px**。寧可大到「有點誇張」，縮到手機剛好。
- **一張一個重點**：內頁別把三件事塞一張。
- **對比要夠**：深字淺底或淺字深底，不要灰底灰字。
- **一致性**：顏色／字體／邊界／handle 位置每張相同，右上放頁碼。
## 例子
**用戶輸入**：一篇「GA4 用超商解釋 Event / Session / User」的文章 ＋ 一張暖色調、等寬字、有邊框感的風格參考圖 ＋ handle `@例子帳號`。
**你要做的（5 張）**：
1. 封面：`用超商，一次搞懂 GA4 的三個詞`，關鍵詞上強調色，不劇透。
2. Event：`在店裡做的每一件事`——結帳、取貨、買咖啡。
3. Session：`從進店到離店這段時間`——閒置 30 分再回來算新的。
4. User：`與其說「人」，更像「裝置」`——除非全程登入又有 user_id。
5. 收尾：`換健身房也一樣通` ＋ `@例子帳號` ＋ 一句收藏呼籲。
每張同一套暖色＋等寬字、右上頁碼 `0X / 05`、右下 handle，文字全用這篇文章的。
**輸出**：在 `OUTPUT_DIR/carousel/` 內把 `card-01.html`…`card-05.html` 各截成 `carousel-01.png`…`carousel-05.png`（每張 1080×1350、內容不重複、中文正常）＋一段 caption，**直接交付給用戶**（可再附一張 contact sheet 看全貌）。
## 提醒
- 出 PNG 用本機的 `chrome-headless-shell`（HyperFrames 已裝的那個），不需要 Bun、Playwright 或 API token；找不到路徑或截出豆腐字時見上方「環境注意」。
- 用戶只要**單張**時，照同規範做**一張封面式的圖**即可；預設做一組輪播。
- 這個 skill 出的是**圖**；要把網頁做成**影片／Reels** 請改用 `web-to-reels`。