ckm:slides
作者 nextlevelbuilder使用 Chart.js、布局模式、文案公式和可复用的幻灯片策略，设计具有清晰策略和数据驱动的 HTML 幻灯片（slide deck）。
概览
ckm:slides 是什么？
ckm:slides 是一个用于设计完整、具有策略性的 HTML slide deck 的 AI 技能。与只输出零散要点不同，它会引导 agent 生成结构连贯、可直接在浏览器中展示的演示文稿结构，具体包括：
- 使用 Chart.js 进行数据可视化
- 使用 Design tokens 统一视觉主题
- 使用响应式布局适配不同设备
- 使用文案写作公式增强说服力
- 使用成熟的幻灯片策略覆盖常见 deck 类型
该技能针对营销演示、融资 Pitch Deck、利益相关方报告以及产品 Demo 等场景进行了优化，在这些场景中，故事线和结构同样重要。
ckm:slides 适合谁？
如果你符合以下情况，ckm:slides 会比较适合：
- 经常为市场、销售、募资或汇报制作 slide deck
- 更偏好 HTML/JavaScript 演示，而不是传统的 PowerPoint 文件
- 希望基于可复用的布局模式和模板，而不是从空白页开始
- 需要在流程中内置清晰的叙事结构（如 YC 种子轮 deck、销售 Pitch、QBR 等）
开发者、产品营销、创始人以及数据/分析团队，都可以用这个技能从“主题 + 期望页数”出发，生成结构清晰的 HTML 演示文稿方案。
它解决了哪些问题？
ckm:slides 帮助你避免：
- 幻灯片杂乱无章、缺乏清晰故事线
- 各页在布局和字体上风格不一致
- 文案空泛、缺乏说服力
- 每次制作新演示都要手动接 Chart.js 图表
通过结合布局模式、文案写作公式和可直接使用的 HTML 模板，该技能为 agent 提供了规划高质量 deck 并生成“可直接落地实现的 HTML”的所有基础结构。
什么时候不适合使用 ckm:slides？
以下情况中，ckm:slides 可能不是最佳选择：
- 你需要的是原生 PowerPoint 或 Keynote 文件，而不是 HTML
- 你不做前端，也无法托管 HTML/JS 资源
- 你只需要制作一页临时幻灯片，而不是完整 deck
在这些场景下，更简单的纯文本幻灯生成工具，或能导出 .pptx 的工具可能更合适。
使用方法
安装与配置
要将 nextlevelbuilder/ui-ux-pro-max-skill 仓库中的 slides 技能添加到你的 agent 环境中，使用以下命令安装：
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides
安装完成后：
- 打开
.claude/skills/slides下的SKILL.md，了解该技能的整体行为和参数。 - 查看
references/文件夹，了解该技能依赖的模式和模板：references/layout-patterns.mdreferences/html-template.mdreferences/copywriting-formulas.mdreferences/slide-strategies.mdreferences/create.md
该技能本身不需要额外的构建步骤，它会直接在你现有的 agent 环境中运行。但你需要有一种方式来访问或打开生成的 HTML（例如保存为文件，然后在浏览器中打开）。
基本调用模式
技能期望的参数形式为：
[topic] [slide-count]
并支持 create 子命令。一个典型的 agent 调用提示可能是：
Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.
在内部（参见 SKILL.md 中的定义），路由流程如下：
- 从
$ARGUMENTS中解析子命令（第一个单词，如create）。 - 加载对应的 reference 文件（对于
create，为references/create.md）。 - 使用剩余参数（主题和页数）生成 deck 的结构和内容。
推荐的新 deck 创建流程
1. 明确目标和受众
在调用 ckm:slides 之前，先澄清：
- 目标（例如：完成种子轮融资、拿下某个大客户、向董事会汇报）
- 主要受众（VC、潜在客户、管理层、内部团队、会议听众等）
- 预估的幻灯片页数
在参数中传入这些上下文，便于技能选择合适的结构和模式。
2. 选择或交由技能选择幻灯片策略
references/slide-strategies.md 文件列出了 15 种常见 deck 结构，例如：
- 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 用于营造紧迫感和转变对比
技能会使用这些公式来组织每页的标题、正文和 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 生成 deck 时，可以加入类似指令：
For each slide, assign a layout class from
layout-patterns.mdand, where relevant, an animation class.
这样可以让整个 deck 在视觉上保持一致，并方便你通过 CSS 做主题定制。
5. 使用 HTML 幻灯片模板
references/html-template.md 文件提供了完整的 deck HTML 框架，包括：
- 在
<head>中通过 CDN 引入Chart.js - 使用
:rootCSS variables 的 token 驱动主题系统 - 尺寸为 16:9 的
.slide-deck容器和.slide元素 - 基础排版和布局样式
典型的工作流是：
- 以提供的 HTML 模板为起点。
- 将生成的幻灯片插入为带适当 class 的
<section>或<div>元素。 - 将你的 design tokens（例如来自
embed-tokens.cjs）粘贴到:root块中。 - 添加所需的 Chart.js
<canvas>元素，并编写对应的图表 JavaScript。
技能可以输出：
- 一份完整 HTML 文件的初稿，或
- 仅包含
<body>内的幻灯结构，供你粘贴到自己的模板中。
6. 接入 Chart.js 数据可视化
对于数据驱动的 deck（如指标看板、增长 traction 页、QBR、董事会汇报），ckm:slides 设计为与 Chart.js 配合使用（如 html-template.md 所示）。
你可以引导 agent：
- 在相关布局中创建图表所需的
<canvas>元素 - 根据你的指标，建议 Chart.js 配置对象（datasets、labels、colors 等）
- 嵌入在页面加载时初始化图表的
<script>代码块
你需要负责提供真实数据并验证配置是否准确，而该技能提供整体结构与支架。
7. 导出与展示
当 deck 的 HTML 准备完成后：
- 将其保存为项目中的
.html文件。 - 直接在浏览器中打开，或通过你常用的 Web 服务器进行访问。
- 使用键盘操作或你添加的自定义 JS 在幻灯片之间切换。
如果需要与习惯 PowerPoint 的干系人分享，你可以在浏览器中共享屏幕，或通过浏览器的打印为 PDF 功能将页面导出为图片/PDF。
使用 ckm:slides 获得更好效果的技巧
- 尽可能明确指定幻灯片数量和结构。
- 告诉 agent 该 deck 希望促成什么决策（融资、购买、对齐等）。
- 指出哪些页需要图表，以及图表类型（line、bar、pie 等）。
- 让它先输出一个表格，对每页的编号、标题、目标、布局以及主要文案公式进行汇总，方便你在生成完整内容前先审阅整体方案。
常见问题（FAQ）
ckm:slides 具体会生成什么内容？
ckm:slides 设计用于生成：
- 带有目标和叙事节奏的逐页大纲
- 每页的文案初稿，使用 PAS、AIDA、FAB 等公式
- 基于
layout-patterns.md中预设模式的布局建议 - 用于响应式、基于 tokens 的 slide deck 的 HTML/CSS 结构
- 用于数据可视化幻灯片的 Chart.js 支架
具体输出取决于你如何提示 agent，但核心是“策略性 HTML 幻灯内容”，而不是普通的长文本文档。
ckm:slides 会生成 PowerPoint（.pptx）文件吗？
不会。ckm:slides 专注于 HTML slide deck，通过 HTML、CSS 和 Chart.js 创建可在浏览器中打开的演示文稿。如果你需要 .pptx 文件，需要在该技能之外使用单独的导出或转换工具。
可以根据我的品牌风格定制设计吗？
可以。html-template.md 使用 CSS variables 的 design tokens，你可以：
- 将示例
:root中的 token 值替换为你的品牌色、字体与间距 - 扩展 CSS class，用于自定义布局或动画
- 添加自有组件（Logo、页脚、水印样式等）
ckm:slides 提供一个有结构的起点，而品牌体系由你来注入。
create 子命令是如何工作的？
create 子命令是 references/create.md 中描述的主要入口。当你使用 create 并传入参数时，技能会：
- 将
<task>$ARGUMENTS</task>视为你想要的 deck 描述。 - 利用知识库（布局模式、文案公式、幻灯片策略、HTML 模板）设计一个与该任务相匹配、具有说服力的 deck。
你通常不会在 CLI 中直接调用 create，而是通过提示你的 agent 使用 ckm:slides 技能并指定 create 子命令。
ckm:slides 最擅长哪些类型的 deck？
基于 slide-strategies.md 中的模式，ckm:slides 尤其适用于：
- 融资 deck（YC Seed Deck、Series A）
- 销售 Pitch 和产品 Demo
- 季度业务回顾（QBR）与董事会更新
- Webinar、Workshop 和会议演讲
- 案例研究与竞品分析演示
这些类型都依赖清晰的故事线、具有说服力的文案，并且往往需要图表——正是该技能知识库所重点优化的方向。
导航和键盘控制应该怎么处理？
基础 HTML 模板主要关注布局和视觉呈现。导航行为（键盘方向键、点击翻页、进度指示等）在 reference 示例中没有完全定义，需要你自行实现。你可以：
- 添加 JavaScript 监听
ArrowLeft/ArrowRight键来切换当前显示的幻灯片 - 使用 URL hash 或 data 属性来标记当前激活的页面
- 如有需要，将其与现有的 HTML 幻灯框架集成
ckm:slides 负责内容与结构设计，导航逻辑则取决于你的前端实现。
使用 ckm:slides 是否必须懂 JavaScript？
具备基础前端知识会非常有帮助，尤其当你：
- 想修改或扩展 HTML 模板
- 需要配置 Chart.js 图表和交互
但大量工作（故事结构、布局选择、文案模式）本身并不技术化。非开发者也可以通过与开发者协作，充分利用该技能来完成 HTML 和图表的最终落地。
在哪里可以查看所有可用的模式和策略？
打开技能目录（通常为 .claude/skills/slides），并查看：
SKILL.md：整体行为、参数和路由说明references/layout-patterns.md：布局与 CSS 结构references/html-template.md：基础 HTML slide deck 外壳references/copywriting-formulas.md：说服型文案框架references/slide-strategies.md：完整 deck 结构与情绪节奏
浏览这些文件可以帮助你全面了解 ckm:slides 的能力，并在生成 deck 时写出更精确的提示。