kirklin/kirklin-slides

演示配圖

演示配圖使用 HTML 頁面製作 16:9 的圖片。每頁為一個 1920×1080 的 HTML 頁面，套用所選風格的樣式後，由無頭瀏覽器渲染為 3840×2160 的 PNG，用於插入方案、彙報和立項材料等文檔。

CRITICAL — 製作任何一頁之前，MUST 先用 Read 工具讀取以下規範：

1. kirklin-slides-copy.md：文字規範，適用於所有風格
2. kirklin-slides-layouts.md：27 種版式的內容和排版規則
3. kirklin-slides-components.md：頁面結構和元件類名
4. 所選風格的規範：顏色、字號和各版式的尺寸，檔案位置參見風格列表
5. 建立、渲染、檢查、重新編號、匯出、預覽風格和截取帖子之前，必讀 kirklin-slides-workflow.md。
6. 增加新風格之前，必讀 kirklin-slides-new-style.md。

下文中的 <skill 目錄> 指本檔案所在的目錄。

風格

風格決定配圖的顏色、字型、字號和裝飾。所有風格共用同一套樣例頁、元件類名和文字規範。目前提供的風格如下表：

風格	英文名	適用場景	規範
黑底發佈會風格	launch-dark	立項、方案彙報、投屏講解	kirklin-slides-style-launch-dark.md

樣例頁位於 assets/pages/，各風格的樣式檔案位於 assets/styles/<英文名>/style.css。執行 node <skill 目錄>/scripts/preview-style.ts <英文名> 彙總圖.png，可生成一種風格全部樣例的彙總圖。

適用場景

• 為方案、彙報、立項材料等文檔製作配圖
• 修改或補充已有的配圖
• 製作封面、時間安排、團隊介紹等單頁
• 依文檔順序匯出全部配圖，並生成彙總圖
• 截取社交媒體帖子並放入配圖
• 根據使用者提供的配圖增加新風格，例如淺色風格

快速決策

• 專案中已有 slides/style.css 時，沿用該風格。檔案第一行的註解為風格的英文名，按英文名讀取對應的風格規範，新頁面放入同一個 pages/ 目錄。
• 使用者指定風格時，使用指定的風格。
• 專案中沒有 style.css 且使用者未指定風格時，若只有一種風格，直接使用；若有多種風格，根據內容和場合推薦一種，使用者查看彙總圖後再確定。
• 使用者提供一套新的配圖，並要求以後按此製作時，按 kirklin-slides-new-style.md 增加新風格，現有風格保持不變。
• 先確定每頁的標題，再根據頁面的主要內容選擇版式。常見內容與版式的對應關係如下表，完整說明參見 kirklin-slides-layouts.md。

內容	版式
一個關鍵數字	大數字
多個數字	數字方塊
多條並列的結論	要點
多個特點或能力	圖示列表
兩種做法的取捨	對比
按兩個維度分組的事項	四象限
多個事項在多個方面的比較	表格
數值大小的比較	橫條
按時間段統計的數值	柱狀圖
指標隨時間的變化	折線圖
總數的構成	環形圖
逐級減少的階段	漏斗
里程碑	時間軸
分階段的計劃	路線圖
按週排期的任務	甘特圖
同時進行的兩件事	雙軌
先後進行的步驟	流程
一段原話	引述
一張圖片和說明	圖文
外部帖子	截圖
成員和分工	團隊
合作方	標誌牆
一段程式碼	程式碼

核心邊界

• 所有風格的畫布尺寸均為 1920×1080，渲染結果為 3840×2160。
• 文字位於風格規定的版心內，版心由 style.css 中的四個邊距變數定義。
• 頁面只包含結構、內容和由資料計算出的百分比，顏色、字號等樣式由風格決定，顏色的含義以風格規範為準。
• 每頁只表達一個主題，內容較多時拆分為多頁。
• 數字、人名和日期來自使用者材料，或由材料直接計算得出，例如總數、起止時間和最大值。計算得出的數字在頁尾註明計算方法；材料中沒有且無法計算的數字不寫入配圖，也不做估算。
• 樣例頁中的佔位文字全部替換為使用者的內容，使用者未提供的部分整塊刪除。
• 可相互比較的圖表使用同一個比例尺，並在頁尾註明比例尺。
• 標題為完整的句子，以句號結尾。中文與英文、數字之間加空格，數值範圍用「到」連接。
• 文檔中配圖的序號與出現順序一致，插入新頁後重新編號。
• 腳本使用 TypeScript 編寫，專案中的輔助腳本同樣使用 TypeScript。

範例

# BAD：標題為話題，數字與漢字之間沒有空格，範圍使用波浪線
審批流程介紹
每個模組需要2~3人

# GOOD：標題為結論，以句號結尾
新流程讓審批少等兩天。
每個模組由 2 到 3 人負責

# BAD：兩張橫條圖使用不同的比例尺，選用的方案使用了表示嚴重的顏色
# GOOD：兩張橫條圖使用同一個比例尺並在頁尾註明，選用的方案使用風格規範中表示選用的顏色

檢查清單

• 每頁修改後均已重新渲染，並用 Read 工具查看過 PNG。
• 檢查腳本未報告問題，頁面中沒有遺留樣例的佔位文字。
• 數字、人名和日期均能在使用者材料中找到，或能由材料計算得出。
• 文檔中的圖片說明與標題一致，序號與出現順序一致。
• 使用者要求匯出時，匯出腳本執行無誤，並已查看彙總圖。
• 修改本 skill 的腳本、樣例頁或風格後，pnpm --dir <skill 目錄> test 全部通過。

不在本 skill 範圍

• .pptx 檔案和線上簡報
• 海報、社交媒體卡片和網頁設計
• 文檔正文的寫作

參考

檔案	說明
kirklin-slides-copy.md	文字規範
kirklin-slides-layouts.md	版式目錄
kirklin-slides-components.md	頁面結構和元件
kirklin-slides-workflow.md	製作流程和腳本用法
kirklin-slides-new-style.md	增加新風格
kirklin-slides-style-launch-dark.md	黑底發佈會風格
assets/pages/	27 種版式的共用樣例頁
assets/styles/	各風格的樣式
scripts/use-style.ts	為專案設定風格
scripts/add-page.ts	按版式複製一頁樣例
scripts/render.ts	渲染頁面
scripts/check-pages.ts	檢查文字和版面
scripts/export-slides.ts	匯出文檔的全部配圖和彙總圖
scripts/preview-style.ts	生成一種風格的樣例彙總圖
scripts/post-shot.ts	截取社交媒體帖子