wehub-skill-sync
57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
# kami-deck
|
|
|
|
与 [`kami-landing`](../kami-landing/) 对应的姊妹技能。生成一份独立的自包含 HTML 文件：一个水平杂志风格的滑动轮播组件，采用 **kami（紙 / 纸）** 设计体系——印刷节奏感、墨蓝强调色、单一字重衬线体、无斜体、无冷灰色调。
|
|
|
|
> **先读**——代理合约、模式与自检机制位于 [`SKILL.md`](./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`](../../design-systems/kami/DESIGN.md) 中的令牌规范和 [`example.html`](./example.html) 中的布局原语，生成 `out/index.html` 文件。
|
|
|
|
预览规范版 Open Design 实例：
|
|
|
|
```bash
|
|
open example.html
|
|
```
|
|
|
|
启动一个新项目：
|
|
|
|
1. 在你的代理（Claude · Cursor · Codex · …）中打开该技能。
|
|
2. 回答两轮需求概要问题（品牌身份 + 内容）。
|
|
3. 写入文件。完成。
|
|
|
|
## 文件结构
|
|
|
|
```text
|
|
skills/kami-deck/
|
|
├── SKILL.md # ← 代理合约（先读此文件）
|
|
├── README.md # ← 你正在阅读的文件
|
|
└── example.html # 规范版 Open Design 渲染（9 张幻灯片）
|
|
```
|
|
|
|
## 边界约定
|
|
|
|
- 无第二强调色。无斜体。无冷调蓝灰色。无硬阴影。
|
|
- 一份自包含的 HTML 文件。无路由器，无外部 JS 包。
|
|
- 仅封面 / 章节 / 结束幻灯片使用深色背景——其他类型幻灯片不变暗。
|
|
- 标签填充色必须使用纯十六进制（kami 的印刷不变规则），而非 `rgba()`。
|
|
|
|
## 参见
|
|
|
|
- [`kami-landing`](../kami-landing/) ——长篇单页式姊妹技能。
|
|
- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) ——令牌规范。
|
|
- [`open-design-landing-deck`](../open-design-landing-deck/) ——相同的滑动导航模型，不同的视觉语言（Atelier Zero）。
|
|
- 上游：[`tw93/kami`](https://github.com/tw93/kami) ——设计体系所改编的原始 Claude 技能（MIT 协议）。
|