Instagram 輪播是做什麼的？

產出兩項東西：(1) 腳本 + 說明文字 以及 (2) 投影片 PNG，可直接發佈。這些規則來自分析真實表現良好的輪播以及使用者回饋（請參閱 references/）。

工作流程

1. 簡報（僅詢問遺漏的資訊）

主題 / 內容：要傳達什麼，或是可用的照片 / 資料。
目標：觸及（分享）、儲存（實用價值）、潛在客戶（留言關鍵字 → 私訊）、銷售，或作品集。
品牌：@帳號、顏色、字型、標誌。如果沒有任何資訊，挑選一套符合主題的系統，並說明你選擇了哪一套。
圖片：使用者的照片、免費圖庫，或無圖片。請閱讀 references/images.md。你不得生成圖片或虛構照片。
文案的語言（預設：使用者的語言）。

如果請求已經有足夠資訊，直接進行，無需提問。

2. 選擇原型

情境	原型
教學、比較、技巧、流程、「X 個錯誤」、「前/後」	A. 教育 / 清單式
展示攝影作品、產品或包含多張照片的專案	B. 作品集 / 照片集
品牌、產品或氛圍的設計如同一條連續的帶子（全景、連續背景）	C. 連續 / 全景
多個具有相同資料結構的項目（比賽、活動、菜單、價格、職缺）	D. 系列範本
文字量少卻有力的訊息、個人品牌、說故事、戲劇 / 編輯風格，搭配人物或場景照片	E. 電影感

原型可以結合：教育性輪播（A）可以有連續背景（C）或電影感照片（E）。

在寫作之前閱讀：

references/archetypes.md：所選原型的章節
references/continuity.md：務必閱讀，因為每個輪播在投影片之間都有連續性
references/fonts.md：務必閱讀，以選擇新的字型搭配
references/colors.md：務必閱讀，以選擇「2 基色 + 1 強調色」的色板（除非品牌已有顏色）
references/copy.md：鉤子、行動呼籲與說明文字
references/apple-design.md：最小尺寸、對比度、工藝與審查

2b. 視覺系統：規劃與評論

在腳本之前，定義系統（references/apple-design.md › 4）：

顏色：從 references/colors.md 選擇色板（2 基色 + 1 強調色，佔比 ≤ 10%），不同於上次使用的色板，或以相同模式排列的品牌顏色。說明每個文字 / 背景組合的對比度（node scripts/contrast.mjs <text> <background> <px>）。
字型：在 references/fonts.md 中選擇一個不同於上次使用的搭配（記錄在 references/font-history.md）。說明以 px 為單位的級別（最小值 31px；輔助文字 ≥ 44px）。
連續性：連結投影片的技巧（連續背景、跨頁物件、分割標題等）。至少第 1→2 頁的連結是強制的。
簽名元素：這個輪播會被記住的單一元素。

然後評論規劃：「我會為不同的主題做這個嗎？」 如果是，那就是預設（請參閱要避免的 3 種範本外觀）。在繼續之前修正它。

3. 腳本（交付給使用者）

格式：

原型：E — 電影感（+ 透過分割標題的連續性）
系統：午夜金調色板 (#0D1B2A + #D9DEE4 + 強調色 #E2B13C) · Bodoni Moda + Pinyon Script + DM Sans · 顆粒 + 暗角
連續性：1→2 標題 "DETA|IL" 在接縫處被切開；3→4 書桌跨越接合處
簽名元素：每頁一個使用表現力字型的大字，位於主體後方

01 · 封面    | 標題：… | 副標題：… | 視覺：… | 連結到 02：…
02 · …        | 標題：… | 文字：…（≤ 15 字） | 視覺：…
…
NN · 行動呼籲  | …

說明文字：
…
主題標籤 / 關鍵字：
…
圖片：所需照片的清單（附上每張的來源或建議的提示詞）

如果使用者想要先審查腳本，在此處停止並等待。否則繼續製作投影片。

4. 建立投影片（HTML）

將 assets/kit/ 複製到 <output>/kit/（產生 kit/base.css 和 kit/carousel.js）。

從 assets/examples/ 中最接近的範例開始，將其複製到 <output>/carousel.html 並編輯品牌、字型和內容：

範例	展示
`A-educational.html`	比較與架構，帶有連結 1→2 的圓盤
`B-portfolio.html`	照片拼貼
`C-continuous.html`	跨頁的框景全景
`C2-continuous-background.html`	帶有連續背景的產品在接縫處
`D-series.html`	使用 `data-fit` 的重複範本
`E-cinematic.html`	滿版出血照片、色彩分級、使用表現力字型的大字

Kit 規則（詳情請見 references/design.md）：
- 每個投影片是 <section class="slide">，尺寸為 1080×1350；light = 淺色背景；clear = 透明（顯示連續背景）。
- 連續背景：<div class="backdrop"> 作為 .carousel 的第一個子元素，寬度與所有投影片相同。
- 跨頁元素：.carousel 的子元素，帶有 class="span" 和以 px 為單位的絕對 left（投影片 k 從 (k-1)*1080px 開始）。
- <div class="hdr"> = 3 項目的頁首（可選）。<div class="nav" data-auto> = 上一頁 / 下一頁欄，預設不使用（請參閱規則 4）。
- 在帶有 white-space:nowrap 的行上使用 data-fit="group"：縮小文字直到符合，並將相同大小套用至整個群組。
- 圖片：<div class="media" style="background-image:url('photo.jpg')">。無照片：<div class="ph">description</div>。
- 來自不同來源的照片：使用 .grade（色彩分級）、.vignette（暗角）和 .texture（紋理）進行統一。

5. 渲染與檢查

node <skill>/scripts/render.mjs <output>/carousel.html <output>/png

使用 Headless Chrome（無 npm 依賴）寫入 slide-01.png … slide-NN.png（1080×1350）。

逐一打開 PNG 並使用 references/design.md 中的檢查清單進行檢查。同時並排檢視投影片對，以確認連續性對齊沒有階梯。然後執行 5 鏡頭設計審查（references/apple-design.md › 7），並以「移除一個裝飾配件」作結。修復並重新渲染，直到沒有留下任何「嚴重」或「高」等級的問題。

若要在瀏覽器中預覽，請在沒有雜湊的情況下開啟 HTML：所有投影片會並排顯示，且會縮小。

5b. 影片版本

如果使用者要求將輪播做成動畫 / MP4（或使用 /carousel-mp4），請遵循 references/video.md。無需 ffmpeg；音效來自內建效果或 Openverse（CC0，無需標註來源）。

6. 交付

png/slide-XX.png
caption.txt：包含說明文字、主題標籤和關鍵字
腳本以文字形式在聊天中呈現
一份簡短說明，包含選擇（原型、字型、色板、連續性、簽名元素）、設計審查摘要以及缺少的項目（照片佔位符、圖片來源）

黃金規則

封面約佔結果的 80%：大字標題（≥ 120px）、一個想法、一個中心視覺、強烈對比。封面上永遠不要有段落。
連續性是強制的：投影片 2 顯示從投影片 1 開始的某個東西的結尾（標題、物體、形狀、背景），以吸引眼球。在輪播中間再加入至少一個連結。例外：原型 D 當項目彼此獨立時。
字型多樣性：每個輪播使用與前一個不同的字型搭配。不要總是重複相同的字型；相同的字型很快就會變得乏味。內文使用可讀的字型；個性則展現在標題中。
角落沒有固定的「滑動」/ 下一頁：沒有重複的上一頁 / 下一頁頁尾，也沒有每頁都出現的「滑動 →」。連續性已經完成了這個工作。最多只在封面上放置一個不顯眼的提示，而且只有在設計沒有明顯連續性時才這麼做。
每頁一個概念。 標題 1–4 個字，輔助文字 ≤ 15 字。如果放不下，把它分成兩頁。
一致的系統，受控的變化：相同的網格和外距。改變背景、圖片，在原型 E 中，在同一風格家族中改變顯示字型。
最後一頁有一個單一行動呼籲，可能的話附帶獎勵（例如「留言 GUIDE 我將寄給你…」）。
說明文字是補充，不是重複：鉤子、情境、行動呼籲和主題標籤 / 關鍵字。
安全邊距：重要的文字距離側邊緣 ≥ 80px，並且遠離接縫，除非它本身就是連續性元素。
行動裝置可讀性：1pt ≈ 2.77px。沒有文字小於 31px（11pt），輔助文字 ≥ 44px，對比度 ≥ 4.5:1（如果 ≥ 50px 或粗體則 ≥ 3:1）。意義永遠不只依賴顏色來傳達。
顏色 2 + 1：兩種基色負責主要工作（約 60/30），一種強調色謹慎使用（≤ 10%，每頁 1–2 處，不超過每頁）。作為文字的強調色僅出現在深色基色上；在淺色基色上，將其用作形狀，並在上方疊加深色文字。標誌僅出現在封面和 / 或行動呼籲頁。
介於 5 到 10 頁之間（最多 20 頁）。

Instagram 輪播