kami-deck

与 kami-landing 对应的姊妹技能。生成一份独立的自包含 HTML 文件：一个水平杂志风格的滑动轮播组件，采用 kami（紙 / 纸） 设计体系——印刷节奏感、墨蓝强调色、单一字重衬线体、无斜体、无冷灰色调。

先读——代理合约、模式与自检机制位于 SKILL.md 中。本 README 是面向人类的快速入门指南。

你将获得

• N 个视口大小的幻灯片，水平排列在一个经过变换的弹性轨道上。
• 封面 / 章节 / 结束幻灯片 背景切换为墨蓝色（#1B365D），文字为象牙色。所有其他幻灯片 保持羊皮纸色（#f5f4ed）背景，衬线体字重 500。
• 每张幻灯片的镀铬条：品牌标志 · 轮播标题 · 实时幻灯片计数器（01 / 09）。
• 每个计数器、度量值和日期均采用 tabular-nums（表格数字）。
• 底部 墨蓝色进度条，随翻页逐渐填充。
• 底部附近的 圆点指示器，点击可跳转。
• ESC 概览网格，带缩略图预览。
• 键盘 / 滚轮 / 触摸导航——与 guizang-ppt 相同的交互模型。
• 多语言堆栈——英文 / 简体中文 / 日文，通过 language 参数在 :root 上设置。

30 秒上手

该技能是"代理驱动，无脚本"模式：没有 compose.ts 文件。代理读取 SKILL.md，收集需求概要，然后直接利用 design-systems/kami/DESIGN.md 中的令牌规范和 example.html 中的布局原语，生成 out/index.html 文件。

预览规范版 Open Design 实例：

open example.html

启动一个新项目：

1. 在你的代理（Claude · Cursor · Codex · …）中打开该技能。
2. 回答两轮需求概要问题（品牌身份 + 内容）。
3. 写入文件。完成。

文件结构

skills/kami-deck/
├── SKILL.md      # ← 代理合约（先读此文件）
├── README.md     # ← 你正在阅读的文件
└── example.html  # 规范版 Open Design 渲染（9 张幻灯片）

边界约定

• 无第二强调色。无斜体。无冷调蓝灰色。无硬阴影。
• 一份自包含的 HTML 文件。无路由器，无外部 JS 包。
• 仅封面 / 章节 / 结束幻灯片使用深色背景——其他类型幻灯片不变暗。
• 标签填充色必须使用纯十六进制（kami 的印刷不变规则），而非 rgba()。

参见

• kami-landing ——长篇单页式姊妹技能。
• design-systems/kami/DESIGN.md ——令牌规范。
• open-design-landing-deck ——相同的滑动导航模型，不同的视觉语言（Atelier Zero）。
• 上游：tw93/kami ——设计体系所改编的原始 Claude 技能（MIT 协议）。