grafisify/carouso

carouso 是做什麼的？

目的

分兩個階段製作輪播貼文。第一階段與使用者鎖定設計系統：品牌標記加上佈局模式庫。第二階段根據這些模式組合每個輪播：為每張幻燈片挑選模式、編寫文案、放置圖片、通過品質門檻渲染。

鎖定標記。釋放組合方式。這就是讓每個輪播保持品牌一致性，而不顯得像模板的關鍵。

使用模板（預設路徑）

templates/ 目錄中附帶六個現成模板。每個模板都是一個鎖定的外觀（顏色、字體、淺色和深色標記）加上一個幻燈片骨架，因此無需入門設定。預覽圖庫位於 README.md。

觸發詞：「模板 3」、「模板編號 3」、「pakai template 3」、「使用模板 2 ……」，或模板名稱（「morning cup」）。根據 templates/NN-slug/template.json 比對編號或名稱。

每個模板的檔案：tokens.css（外觀）、template.json（名稱、字體、尺寸、帶有模式和幻燈片序號的序列）、sample.html（完成的範例輪播，可供複製）。

1. 解析模板。 讀取 templates/NN-slug/template.json。如果使用者沒有提供編號，也不存在自訂系統，則列出每個模板（編號、名稱、風格），並詢問要使用哪一個。未知編號也會顯示相同列表。
2. 收集簡報。 在一則訊息中一次詢問所有遺漏的資訊：主題和觀點（必填）、品牌名稱和帳號（當使用者拒絕時，使用模板的佔位符）、幻燈片數量（預設為序列長度，允許 5 到 10 張）、帶有放置地圖的圖片（選填，請見步驟 6）。輪播的語言跟隨簡報的語言。同時翻譯標記中的所有固定字串：「Myth」、「Fact」、「Save this」和 NN / TT 頁尾保留，但文字會改變。
3. 根據序列規劃。 從模板的 sequence 開始。保持封面在第一張，結尾在最後一張，以及每張幻燈片的模式如所列。對於不同的幻燈片數量，依序刪除或重複中間幻燈片，保持模式交替，且相鄰的兩張幻燈片不使用相同模式。當內容更適合其他模式時，交換中間模式（數字用 stat-band 或 big-number，步驟用 process-steps，一行文字用 quote），同時保留該幻燈片的模式。僅當有經過驗證的封面圖片時才使用 cover-split。放置的圖片會以 .photo 插槽的形式放在幻燈片上（見下方），或者當照片是重點時，放在 image-hero 幻燈片上。在開始建構前，將計劃寫成列表（幻燈片編號、模式、模式類型、一行內容）。
4. 根據以下文案標準編寫文案。 取代每一行範例文字。不得保留任何來自範例主題的內容。
5. 建構 HTML。 透過複製所選模板的 sample.html 來建立 carousels/<slug>/index.html。僅將 tokens.css 的連結改為 ../../templates/NN-slug/tokens.css。fonts.css 和 system.css 的連結已經可以從該路徑解析。根據計劃保留或移除 <section> 區塊，從 design-system/patterns.html 複製新增幻燈片的模式區塊，根據計劃套用 mode-dark 類別，填入品牌、帳號和 NN / TT 計數器。
6. 圖片在第二階段第 4 步驟通過嚴格的門檻。將本地副本放入 carousels/<slug>/images/，並將來源記錄在 carousels/<slug>/provenance.log 中。
7. 使用模板的尺寸和字體進行渲染（來自 template.json）：

   python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
       --width 1080 --height 1440 --slides <N> --check-fonts "<fonts from template.json, comma separated>"
   

   修正 HTML，直到每個門檻都通過。絕不手動豁免任何門檻。
8. 最終視覺檢查如第二階段第 7 步驟所述，然後交付 slide_01.jpg 到 slide_NN.jpg。模板不需要 last-used.json，因為模式來自模板。

字體已捆綁在 fonts/ 中，因此除了 Playwright 之外無需安裝任何東西。

想要自己外觀而非六個模板的使用者，請使用下方的自訂路徑。

自訂設計系統（選填路徑）

僅當使用者要求自己的外觀，或發送參考截圖或 HTML，而不是選擇模板時，才使用此路徑。當未選擇模板且尚未鎖定設計系統時，首先提供模板，並且僅在使用者想要自訂時才執行以下入門對話。當此路徑執行時，不要開始設計。首先開啟入門對話。按以下順序一次問一個問題，每個問題都附有列表中的選項。使用者可以隨時提供自訂答案。七個問題，然後開始設計。如果使用者發送截圖或 HTML 參考而不是回答，則跳過對話並進入第一階段，選項 B。

1. 風格。「輪播應該給人什麼感覺？」選項：活潑友善 / 簡潔極簡 / 大膽搶眼 / 溫暖優雅 / 暗黑高級。
2. 顏色。「選擇一種顏色氛圍。」選項：溫暖大地（棕色、奶油色、橙色） / 清新自然（綠色、奶油色） / 海洋平靜（藍色、白色） / 大膽對比（黑色、白色，一個強烈點綴色） / 柔和粉彩。
3. 字體。「選擇一種字體感覺。無需說出字體名稱。」選項：圓潤活潑 / 優雅襯線 / 大膽現代 / 簡潔乾淨。內部對應，絕不顯示字體名稱：圓潤活潑對應 Baloo 2 + Quicksand；優雅襯線對應 Playfair Display + Plus Jakarta Sans；大膽現代對應 Albert Sans + Plus Jakarta Sans；簡潔乾淨對應 Plus Jakarta Sans + Quicksand。所有五種字體家族都捆綁在 fonts/ 中：從輪播 HTML 連結 fonts/fonts.css。
4. 品牌。「用於水印的品牌名稱和帳號？」自由文字，一則訊息。範例：「Morning Cup / @morningcup」。
5. 主題。「輪播通常關於什麼？」自由文字，一行。這會設定文案語調和範例內容。
6. 語言。「印尼文還是英文？」兩個選項。這會設定所有固定字串：引言、行動呼籲、頁尾。
7. 系統名稱。「我們該怎麼稱呼這個設計系統？」自由文字，一則訊息。根據品牌和風格建議一個預設名稱，例如「morningcup-playful」。名稱很重要，因為使用者可能保留多個系統，並為每個輪播選擇一個。

在第七個答案之後，用一則簡短訊息總結鎖定的選擇，然後進入第一階段。

第一階段：鎖定設計系統

有兩種進入方式。選擇一種。

A. 根據入門問答生成。 將 design-system/system.css 中的 :root 標記設定為品牌（顏色、字體、圓角）。使用這些標記渲染三個範例模式（一個封面、一個內文、一個結尾）並展示給使用者。迭代直到獲得批准。

B. 根據參考資料調整。 使用者發送他們喜歡的輪播截圖或 HTML 檔案。研究它：顏色角色、字體比例、間距節奏、重複出現的元素。將你學到的內容編碼為 :root 標記，然後渲染範例模式。迭代直到獲得批准。

批准門檻。 只有在使用者批准渲染的範例後，系統才進入生產狀態。以其系統名稱儲存（例如 design-systems/morningcup-playful/，包含 system.css、patterns.html 和 last-used.json）。之後要建立另一個系統，再次從問題 1 開始執行入門對話。

第二階段：組合輪播

1. 收集簡報

在開始前釐清這些資訊。詢問所有遺漏的項目。不要猜測。

• 主題和觀點，作為一個鉤子句。
• 設計系統：要使用哪個已鎖定的系統。預設為最近批准的那個。如果存在多個，則進行詢問。（在模板路徑上，模板就是設計系統。）
• 幻燈片數量（預設 6-10）和尺寸（預設 1080x1440，這是 system.css 的渲染尺寸；不同的高度需要相應的 .slide 高度覆蓋）。
• 圖片。對於每張圖片：來源（上傳的檔案路徑、直接 URL 或文章 URL）、目標幻燈片和角色（主圖、分割或內嵌）。沒有明確的放置地圖，則不使用圖片。

2. 規劃組合

讀取系統的 last-used.json 和 design-system/PATTERNS.md 中的模式目錄。為每張幻燈片指定一個模式：

• 以一個封面模式開始，以一個結尾模式結束。
• 相鄰的兩張幻燈片不得共享相同模式。
• 對於相同品牌，永遠不要重複上一個輪播的封面模式。
• 將模式與內容匹配：數字用 stat-band 或 big-number，序列用 process-steps，單行文字用 quote。不要強迫內容進入不合適的模式。
• 在幻燈片之間交替兩種模式：為幻燈片指定 mode-dark 或保持淺色，使得相鄰的兩張幻燈片不共享相同模式。從與上一個輪播第一張幻燈片相反的模式的開始（讀取 last-used.json）。一個輪播可能以淺色開始，下一個以深色開始。讓內容引導哪些幻燈片變暗：對比配對（神話 vs 事實，問題 vs 解決方案）是自然的深色幻燈片。 在建構任何東西之前，將計劃寫成簡單的列表（幻燈片編號、模式名稱、模式類型、一行內容）。

3. 編寫文案

每張幻燈片一個想法。標題保持在 8 個字以內。內文每張幻燈片保持在 25 個字以內。遵循以下的文案標準。

4. 接收並驗證圖片（嚴格門檻）

1. 將每張圖片下載或複製到本地的 images/ 資料夾中。渲染期間絕不進行熱連結。
2. 在使用前查看每張圖片。當內容與幻燈片主題不符、帶有水印或外部標誌、模糊，或用於大尺寸使用時最短邊低於 900px 時，拒絕該圖片。
3. 在 provenance.log 中記錄來源（來源 URL 或上傳的檔案名稱）。
4. 絕不使用生成式 AI 圖像。此技能不生成任何圖像，毫無例外。

照片插槽。 要將圖片加入任何內文模式，請將 <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure> 作為該幻燈片 .content 的最後一個子元素。它會以 16:10 的比例縮放至內容寬度，並採用模板的圓角和顏色。在密集的幻燈片（例如 myth-fact 或 big-number）上使用 class="photo wide"（5:2）或 class="photo band"（3:1），使用 style="--focus:50% 40%" 設定裁切點，並在遮罩上為說明文字使用 <figcaption>。對於兩張照片，使用包含兩個 <figure class="photo">（正方形，並排，間距與 two-cards 相同）的 <div class="photos">，或在密集幻燈片上使用 class="photos short"（4:3）。對於英雄風格的幻燈片，將照片邊對邊放在頂部：將 photo-top 加入 <section> 類別，在其上使用 style="--bleed-h:600px"，並將 <figure class="photo-bleed"><img ...></figure> 作為第一個子元素。頂部欄在遮罩上變為白色，內容從照片下方開始。在密集幻燈片（myth-fact、big-number）上使用約 --bleed-h:440px。選擇一張頂部邊緣平靜的照片，因為頂部欄會放在它上面。檢查幻燈片是否仍能通過溢出門檻，並在內容上方和下方保持至少 40px 的間距。

5. 建構 HTML

從鎖定的 system.css 開始（複製 <style> 內容或連結檔案），並從 patterns.html 複製所選的 <section> 區塊。填入文案和圖片插槽。使用相對於 HTML 的本地路徑來引用圖片。不要為每個輪播發明新的版面配置。當簡報需要某種模式未涵蓋的結構時，那是第一階段的討論，而不是第二階段的即興創作。

6. 使用品質門檻進行渲染

執行 scripts/render_carousel.py：

python3 scripts/render_carousel.py --html <file.html> --out <dir-output> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

（根據簡報和系統標記調整寬度、高度、幻燈片數量和字體。） 當 .slide 數量與要求不符、內容溢出其區域、幻燈片邊界框與要求尺寸不符、文字小於 20px，或檢查的字體載入失敗時，腳本會以狀態碼 1 退出。修正 HTML 並重新渲染直到通過。絕不手動豁免門檻。

7. 最終視覺檢查與記錄

打開幻燈片 1、一張中間幻燈片和最後一張幻燈片。確認顯示字體已渲染、沒有文字被裁切、沒有元素重疊、圖片未失真且主體完整、品牌、帳號和行動呼籲保持一致。然後使用此輪播的封面模式、完整模式序列以及每張幻燈片的模式來更新系統的 last-used.json（例如 {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}）。

設計思維

在每一步都應用這個推理。這是讓輸出避免被視為 AI 垃圾的關鍵。

在編寫文案之前

• 用一句話說出該張幻燈片的單一想法。如果你做不到，這張幻燈片還不存在。
• 先寫標題，然後在不失原意的情況下將其精簡到 8 個字以下。
• 優先使用具體名詞和強動詞，而不是形容詞。說出時間、溫度、數量。
• 大聲朗讀每一行。如果它可能屬於任何品牌，請為這個品牌重寫。

在放置元素之前

• 首先決定閱讀順序：什麼被先看到、第二看到、第三看到。大小和粗細必須強化這個順序。
• 每個元素的位置都需要一個理由。對齊網格，或者刻意打破它（僅限封面）。
• 將空白視為設計元素。當幻燈片感覺擁擠時，刪減內容。永遠不要將字體縮小到低於最小值。

文案標準（反垃圾）

• 簡短的陳述句。每個句子一個想法。
• 沒有破折號。沒有「不僅是 X，更是 Y」的結構。沒有強迫性的三連詞。
• 沒有填充性開場白和 AI 詞彙：「深入探討」、「解鎖」、「提升」、「交織的圖景」、「遊戲規則改變者」、「在當今快節奏的世界中」。
• 主動語態。使用簡單的詞：「用」，而不是「利用」。
• 鉤子使用三種模式之一：好奇心缺口、具體數字或直接稱呼。
• 副標題做出承諾，而不是總結。它說明讀者可以從滑動中獲得什麼。
• 標題中沒有裝飾性表情符號。沒有標題大小寫的標題。

版面配置基礎

• 層級：標題是最大、最粗的元素。每個標題中最多一個強調色單詞或短語，不要更多。
• 對比：文字放在照片上時，需要位於遮罩或半實色卡片上。絕不直接放在複雜的照片上。
• 對齊：整個版面使用一致的內邊距。預設為左對齊；封面刻意居中。
• 字體排印：最多兩種字體家族。每種字體都必須載入；渲染門檻會拒絕未載入的字體。
• 視覺節奏：平均分配內容。在一個序列中混合長幻燈片和短幻燈片。
• 一致性：對所有類似元素使用相同的間距、字體大小和顏色。重複建立信任。