ckm:slides
作者 nextlevelbuilder運用 Chart.js、版型範式、文案寫作公式與可重複使用的投影片策略，設計具備策略性與數據導向的 HTML 簡報投影片。
概觀
什麼是 ckm:slides？
ckm:slides 是一個用來設計完整、具策略性的 HTML 簡報投影片的 AI skill。它不是只吐出一串散亂的條列，而是引導 agent 產出具一致性的、可直接在瀏覽器中使用的簡報結構，並運用：
- Chart.js 做資料視覺化
- Design tokens 維持一致的視覺主題
- Responsive layouts 對應不同裝置
- 文案寫作公式撰寫有說服力的訊息
- 針對常見簡報類型的實證投影片策略
此 skill 對以下簡報特別優化：行銷簡報、募資簡報、利害關係人報告，以及產品 Demo——也就是「故事」與「結構」同樣關鍵的情境。
ckm:slides 適合誰？
如果你符合以下情況，ckm:slides 會很適合你：
- 需要為行銷、業務、募資或報告製作投影片
- 偏好使用 HTML/JavaScript 簡報，而不是傳統 PowerPoint 檔
- 想要可重複使用的版型與範本，而不是從空白投影片開始
- 希望在流程中就內建清楚的敘事結構（例如 YC seed deck、sales pitch、QBR）
開發者、產品行銷、創辦人與數據分析團隊，都可以用這個 skill，從「主題 + 想要的投影片數量」快速走到有架構的 HTML 簡報規劃。
它解決哪些問題？
ckm:slides 能幫你避免：
- 投影片東一塊西一塊，沒有清楚的故事主軸
- 每張投影片的版面與字型風格不一致
- 軟弱、制式的投影片文案，無法打動人
- 每做一份簡報就得手動把 Chart.js 一張張接上去
透過結合版型範式、文案公式與可直接使用的 HTML 範本，這個 skill 會提供 agent 規劃一份扎實簡報、並產出可立即實作的 HTML 所需的一切元素。
什麼情況下不適合用 ckm:slides？
以下狀況 ckm:slides 可能不是最佳選擇：
- 一定要原生 PowerPoint 或 Keynote 檔，而不是 HTML
- 不做前端、或無法託管 HTML/JS 資產
- 只需要單張投影片，而不是一整份簡報
這時，單純的文字型投影片產生器，或是可以輸出 .pptx 的工具，會比較合適。
使用方式
安裝與設定
若要從 nextlevelbuilder/ui-ux-pro-max-skill repository 把 slides skill 加進你的 agent 環境，可使用以下指令安裝：
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides
``
安裝完成後：
1. 開啟 `.claude/skills/slides` 下的 `SKILL.md`，了解此 skill 的高階行為與參數。
2. 檢視 `references/` 資料夾，熟悉 skill 會用到的模式與範本：
- `references/layout-patterns.md`
- `references/html-template.md`
- `references/copywriting-formulas.md`
- `references/slide-strategies.md`
- `references/create.md`
此 skill 本身不需要額外 build 步驟；它會直接在你既有的 agent 環境中執行。不過，你需要有一個方式來服務或開啟產生出的 HTML（例如存成檔案、再用瀏覽器開啟）。
### 基本呼叫模式
skill 預期的參數格式為：
- `[topic] [slide-count]`
並支援 `create` 子指令。從 agent 的 prompt 呼叫時，典型範例如下：
```text
Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.
在內部，routing 流程（如 SKILL.md 所述）大致如下：
- 從
$ARGUMENTS解析子指令（第一個字，例如create）。 - 載入對應的 reference 檔（對
create來說是references/create.md）。 - 使用剩餘的參數（主題與投影片數量）來產生簡報結構與內容。
建議的新簡報製作流程
1. 先定義目標與受眾
在呼叫 ckm:slides 前，先釐清：
- 目標（例如募 seed round、拿下企業客、更新董事會）
- 主要受眾（VC、潛在客戶、內部主管、內部團隊、會議與會者）
- 大致的投影片張數
在 arguments 中帶入這些脈絡，好讓 skill 能選擇適合的結構與模式。
2. 自選或交由 skill 選擇投影片策略
references/slide-strategies.md 列出了 15 種常見簡報結構，例如：
- YC Seed Deck（10–12 張）
- Sales Pitch（7–10 張）
- Product Demo（5–8 張）
- QBR、Board Meeting、Webinar、Workshop 等等
你可以：
- 明確指定要用哪一種結構（例如「Use a YC seed deck structure」），或
- 讓 agent 根據你的目標與受眾，自行推斷最適合的策略。
每一種策略都包含逐頁的投影片大綱，以及情緒曲線（例如 curiosity → frustration → hope → confidence → trust → urgency），用來讓整體故事保持連貫。
3. 用說服型公式產生文案
references/copywriting-formulas.md 提供 25 種公式，包含：
- PAS（Problem–Agitate–Solution）適用問題類投影片
- AIDA（Attention–Interest–Desire–Action）適用開場 hook 與 CTA
- FAB（Features–Advantages–Benefits）適用功能與產品介紹
- Cost of Inaction 與 Before–After–Bridge 適用營造急迫感與轉變
skill 會運用這些公式來設計每張投影片的標題、內文與 CTA。你可以引導它：
- 將各種投影片類型對應到適合的公式
- 以提供的模板用語為起點來發展內容
- 根據你的品牌與受眾成熟度調整語氣
4. 套用版面配置與動畫
references/layout-patterns.md 定義了 25 種以 CSS 為基礎的版型模式，例如：
- Title Slide
- Problem Statement
- Solution Overview
- Feature Grid
- Metrics Dashboard
- Comparison Table
- Timeline Flow
- Team Grid
- Pricing Cards
- CTA Closing
每種版型都包含：
- 建議的使用情境
- 範例動畫 class（
animate-fade-up、animate-stagger、animate-scale等） - 常見投影片類型的 CSS 結構範例
在請 agent 產生簡報時，可以加上類似指示：
For each slide, assign a layout class from
layout-patterns.mdand, where relevant, an animation class.
這樣可讓你的簡報在視覺上維持一致，並更容易用 CSS 做主題化。
5. 使用 HTML 投影片範本
references/html-template.md 提供完整的簡報 HTML 結構，其中包含：
- 透過 CDN 引入
Chart.js的<head> - 使用
:rootCSS 變數的 token-based 主題系統 - 一個
.slide-deck容器與設定為 16:9 長寬比的.slide元素 - 文字與版面配置的基礎樣式
典型的工作流程如下：
- 先從提供的 HTML 範本開始。
- 將產生的簡報內容插入成帶有對應 classes 的
<section>或<div>。 - 把你的 design tokens（例如來自
embed-tokens.cjs）貼到:root區塊中。 - 加上需要的 Chart.js
<canvas>元素與對應的 JavaScript。
skill 可以輸出：
- 一份完整 HTML 檔的草稿，或
- 只有
<body>區域的投影片結構，讓你貼進自己的外層範本中。
6. 串接 Chart.js 資料視覺化
對於強調數據的簡報（例如 metrics dashboard、成長軌跡投影片、QBR、董事會報告），ckm:slides 被設計為可搭配 Chart.js 使用（如 html-template.md 所示）。
你可以引導 agent：
- 在相關版型中建立圖表用的
<canvas>元素 - 根據你的指標，建議 Chart.js config 物件（datasets、labels、colors）
- 嵌入在頁面載入時初始化圖表的
<script>區塊
你需要自行提供實際數據並檢查圖表設定是否正確，不過 skill 會幫你搭好整體架構。
7. 匯出並進行簡報
當簡報 HTML 準備好之後：
- 將它存成專案內的
.html檔。 - 直接用瀏覽器開啟，或透過你慣用的 web server 來服務。
- 使用鍵盤操作或自訂 JS（若你有加）在投影片間切換。
如果需要跟習慣 PowerPoint 的利害關係人分享，你可以以瀏覽器畫面做螢幕分享，或利用瀏覽器的列印成 PDF 功能，將投影片匯出成圖片/PDF。
使用 ckm:slides 的實用小技巧
- 若有可能，盡量明確指定投影片數量與結構。
- 告訴 agent 這份簡報最終要促成什麼決策（募資、購買、內部共識等）。
- 標明哪些投影片需要圖表，以及圖表類型（line、bar、pie 等）。
- 請它先輸出一張表，列出每張投影片的編號、標題、目標、版型與主要文案公式，好在生成完整內容前先檢視整體規劃。
常見問題
ckm:slides 實際會產生什麼內容？
ckm:slides 的設計目標是產生：
- 逐頁投影片大綱，包含目標與敘事弧線
- 各投影片的文案草稿，運用 PAS、AIDA、FAB 等公式
- 依
layout-patterns.md預先定義版型給出的版面建議 - 具響應式、token-based 的投影片 HTML/CSS 結構
- 專為資料視覺化投影片準備的 Chart.js scaffolding
實際輸出會依你如何對 agent 下指令而有所不同，但核心始終是「具策略性的 HTML 簡報內容」，而不是一般文字文件。
ckm:slides 會產生 PowerPoint（.pptx）檔嗎？
不會。ckm:slides 專注於 HTML 簡報。它透過 HTML、CSS 與 Chart.js 建立可在瀏覽器中開啟的簡報。如果你需要 .pptx 檔案，必須在這個 skill 之外，額外使用匯出或轉檔工具。
我可以客製設計來符合自家品牌嗎？
可以。html-template.md 使用 CSS variables 的 design tokens 架構。你可以：
- 將範例
:roottoken 值換成你的品牌色彩、字體與間距 - 延伸 CSS classes，打造自訂版型或動畫
- 加上自己的元件（Logo、頁尾、浮水印樣式）
ckm:slides 提供的是一個有結構的起點，而品牌系統則由你來帶入。
create 子指令是怎麼運作的？
create 子指令是 references/create.md 中描述的主要進入點。當你帶著參數呼叫 create 時，skill 會：
- 將
<task>$ARGUMENTS</task>視為你想要的簡報描述。 - 利用知識庫（版型模式、文案公式、投影片策略、HTML 範本），設計一份與該任務相符且具說服力的簡報。
通常你不會在 CLI 中直接呼叫 create，而是透過對 agent 下指令，要求它使用 ckm:slides skill 搭配 create 子指令。
ckm:slides 最擅長哪幾種簡報？
根據 slide-strategies.md 中的模式，ckm:slides 特別擅長：
- 募資簡報（YC Seed Deck、Series A）
- Sales pitch 與產品 Demo
- 季度營運檢視（QBR）與董事會更新
- Webinars、workshops 與 conference talks
- 案例研究與競品分析簡報
這些簡報都高度仰賴清楚的故事線、具說服力的文字，以及大量圖表——也正是這個 skill 的知識庫所對準的用途。
導覽與鍵盤操作要怎麼處理？
基礎 HTML 範本主要著重在版面與視覺。導覽（鍵盤方向鍵、點擊切換、進度指示）在 reference snippet 中並未完整定義，會留給你的實作來處理。你可以：
- 加上 JavaScript 監聽
ArrowLeft/ArrowRight鍵，切換目前顯示的投影片 - 使用 URL hash 或 data attributes 追蹤當前投影片
- 若你偏好，也可以整合既有的 HTML 簡報框架
ckm:slides 幫你設計內容與結構；實際的導覽行為則取決於你的前端設定。
使用 ckm:slides 一定要會 JavaScript 嗎？
具備基本前端概念會非常有幫助，特別是當你：
- 想修改或擴充 HTML 範本
- 需要設定 Chart.js 圖表與互動效果
不過，多數關鍵工作（故事結構、版型選擇、文案模式）本身並不技術性。就算不是開發者，只要與開發者合作處理 HTML 與圖表部分，一樣可以從這個 skill 中受益。
哪裡可以看到所有可用的模式與策略？
打開 skill 的目錄（通常是 .claude/skills/slides），檢視以下檔案：
SKILL.md：整體行為、參數與 routing 說明references/layout-patterns.md：版面與 CSS 結構references/html-template.md：基礎 HTML 投影片外殼references/copywriting-formulas.md：說服型文案框架references/slide-strategies.md：完整簡報結構與情緒曲線
瀏覽這些檔案可以讓你清楚了解 ckm:slides 的能力，也有助於你在產生簡報時，撰寫更精準的 prompts。