项目文件夹
您已经派生过 skillhub-172-kami-deck
skillhub-172-kami-deck
bb16495fc4
Co-Authored-By: Cursor Grok 4.6 <cursor@cursor.com>
kami-deck
与 kami-landing 配套的姊妹技能。生成一个独立的
HTML 文件:一个水平杂志风格的滑动卡片组,采用
kami (紙 / 纸) 设计体系——印刷节奏、墨蓝强调色、
单一字重的衬线字体、无斜体、无冷灰色。
请先阅读——智能体合约、模式与自检位于
SKILL.md中。本 README 是面向人类的快速入门指南。
你将获得
- N 个视口大小的幻灯片,水平排列在一条经过变换的 flex 轨道上。
- 封面 / 章节 / 结束幻灯片 背景切换为墨蓝色
(
#1B365D),搭配象牙白文字。所有其他幻灯片 保持 羊皮纸色 (#f5f4ed),衬线字体字重为 500。 - 每张幻灯片的装饰条:品牌标记 · 卡片组标题 · 实时
幻灯片计数器 (
01 / 09)。 - 所有计数器、度量值和日期均采用表格数字。
- 底部墨蓝色进度条,随翻页进度填充。
- 底部附近的圆点指示器;点击可跳转。
- 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
要开始一个新项目:
- 在您的智能体中打开该技能(Claude · Cursor · Codex · …)。
- 回答两轮简要问题(身份 + 内容)。
- 写入文件。完成。
文件
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 许可证),本设计体系改编自该项目。