kami-deck

kami-deck

kami-landing 的姊妹技能。生成一个独立的 HTML 文件：采用杂志风格的水平滑动演示文稿，遵循 kami（紙 / 纸） 设计系统——印刷节奏、墨蓝色强调色、衬线字体且仅使用一种字重、不使用斜体、不使用冷灰色。

导航模式特意借鉴了 guizang-ppt 技能——使用 ←/→ 方向键、滚轮 / 滑动、按 ESC 键显示概览网格。视觉风格仍然遵循 kami：内容页采用羊皮纸底色，封面和章节页采用墨蓝色，所有页面均使用衬线字体。

设计系统的权威来源： design-systems/kami/DESIGN.md。 发布前请先阅读。设计令牌、字体规则和禁用颜色都在其中。幻灯片专属的缩放比例（宏观元素 × 1.6，字距为印刷版的 × 0.6）见 §3「层级」和 §5「布局原则 · 幻灯片」。

你将获得

• N 张视口大小的幻灯片（6-15 张为佳），沿一个经过变换的 flex 轨道水平排列。
• 封面和章节页使用墨蓝色（#1B365D）背景搭配象牙白文字——深色主题仅用于这些页面。
• 内容 / 数据 / 引言 / 行动号召页面采用羊皮纸底色（#f5f4ed），衬线字体字重为 500。
• 每张幻灯片的装饰条：品牌标记 · 演示文稿标题 · 实时幻灯片计数器（01 / 09）。
• 所有计数器、指标和页码均使用等宽数字。
• 不使用珊瑚色——kami 的强调色为墨蓝色。进度条和圆点导航也使用墨蓝色。
• 键盘 / 滚轮 / 触控导航、ESC 概览网格、圆点指示器。
• 多语言字体栈——EN / zh-CN / ja，通过 :root 上的 language 参数设置。

幻灯片类型

类型	背景	用途
cover	墨蓝色	开篇标题页。居中的衬线标题 + 标语。
chapter	墨蓝色	罗马数字 / 阿拉伯数字章节分隔页。
content	羊皮纸	章节编号 + 标题 + 正文 + 可选项目符号。
stats	羊皮纸	3-4 个指标单元格（数值 · 标签 · 补充说明）。
quote	羊皮纸	引言，左侧配墨蓝色竖线 + 作者署名。
cta	羊皮纸	收尾推介 + 1-2 个按钮。
end	墨蓝色	超大衬线点题词 + 版权信息页脚。

一个典型的 11 页演示文稿：

1. cover     — ink-blue title plate
2. chapter   — "01 / Why now"
3. content   — manifesto
4. content   — capabilities + bullets
5. stats     — 4 numbers
6. chapter   — "02 / How it feels"
7. content   — method
8. content   — selected work
9. quote     — testimonial
10. cta      — primary action
11. end      — ink-blue kicker

工作流

1. 收集需求

分两轮提问（不要一次列出全部问题）：

1. 身份信息——名称、标记、标语、地点、版本、语言。
2. 内容信息——逐页询问类型 + 对应字段。

2. 选择语言字体栈

与 kami-landing 相同： EN → Charter，zh-CN → TsangerJinKai02 / Source Han Serif，ja → YuMincho。JA 还会将 --olive 覆盖为 #4d4c48，因为 YuMincho 的字形笔画较细。

3. 编写 index.html

输出一个 CSS 全部内联的单文件。结构参照 example.html。仅使用 design-systems/kami/DESIGN.md 中的设计令牌。

运行时脚本（键盘 / 滚轮 / 触控导航、圆点指示器、 进度条、ESC 概览）应与 open-design-landing-deck/scripts/compose.ts 中记录的模型一致。不要复用 open-design-landing-deck 的 CSS；其视觉语言不同。

4. 自检

• 所有封面页／章节页／结束页均使用墨蓝色背景 （#1B365D）和象牙白文字。其他所有幻灯片均使用 羊皮纸色背景。
• 墨蓝色在任何羊皮纸色幻灯片表面所占比例均 ≤ 5%。
• 幻灯片标题仅使用字重为 500 的衬线字体。不使用斜体。
• 所有数字堆栈（计数器、指标、页码）均带有 font-variant-numeric: tabular-nums。
• 按 → / Space / 滚动。页面平滑地向右滑动一个视口；圆点导航前进；墨蓝色进度条向前推进。
• 按 Esc。显示带缩放缩略图的概览网格。
• 调整为 1080px 和 640px。封面／内容折叠为 单列；圆点导航仍可正常使用。
• Lighthouse：对比度 AA、字体显示 swap、无布局偏移。

边界

• 不要引入第二种强调色。选择墨蓝色， 或者不选任何颜色。
• 不要在任何地方使用斜体——强调改用墨蓝色。
• 不要对标签填充使用 rgba()；请先在羊皮纸色背景上混合， 再使用 design-systems/kami/DESIGN.md §2 表格中的纯色十六进制值。
• 不要添加路由器。这是一个单文件产物。
• 不要重复使用 Atelier Zero 拼贴图像（open-design-landing 视觉系统）。Kami 不使用渐变、少用图像，并通过字体层级 来体现内容层级。

另请参阅

• kami-landing — 长篇单页姊妹技能。
• design-systems/kami/DESIGN.md — 令牌规范。
• open-design-landing-deck — 相同的 水平滑动导航模式，不同的视觉语言（Atelier Zero）。
• 上游项目：tw93/kami — 原始 Claude 技能（MIT）。Kami 的 slides.py 模板记录了本技能采用的宏观 × 1.6／微观 × 0.6 比例。