chore: import zh skill kami-deck

2026-07-13 21:37:02 +08:00
commit 4b1ff95126
4 changed files with 1327 additions and 0 deletions
@@ -0,0 +1,56 @@
+# 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 协议）。
@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`kami-deck`
+- 中文类目：Open Design 演示模板批次2
+- 上游仓库：`nexu-io__open-design`
+- 上游路径：`design-templates/kami-deck/SKILL.md`
+- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/design-templates/kami-deck/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准
@@ -0,0 +1,161 @@
+---
+name: kami-deck
+description: >
+  Produce a print-grade slide deck in the kami (紙 / 纸) design system —
+  warm parchment background (or ink-blue for cover / chapter slides),
+  serif at one weight, ink-blue accent ≤ 5% per slide, no italic.
+  Horizontal magazine swipe pagination (←/→ · wheel · swipe · ESC
+  overview). One self-contained HTML file, zero dependencies beyond
+  Google Fonts.
+triggers:
+  - kami deck
+  - 紙 deck
+  - 纸 deck
+  - paper slides
+  - white paper deck
+  - editorial deck
+  - print-style slides
+  - kami slides
+od:
+  category: brand-deck
+  surface: web
+  mode: deck
+  scenario: marketing
+  audience: founders, researchers, design studios, conference talks
+  tone: editorial, restrained, print-first
+  scale: 6-15 viewport-locked slides
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  craft:
+    requires:
+      - typographic-rhythm
+      - pixel-discipline
+inputs:
+  - id: brand
+    label: Brand identity (shared across slides)
+  - id: deck_title
+    label: Deck title shown in the per-slide chrome
+  - id: slides
+    label: Ordered list of typed slides (cover · chapter · content · stats · quote · cta · end)
+  - id: language
+    label: Primary language stack
+parameters:
+  language:
+    type: enum
+    values: [en, zh-CN, ja]
+    default: en
+    description: Sets `--serif` to Charter / TsangerJinKai02 / YuMincho respectively.
+outputs:
+  - path: <out>/index.html
+    description: Self-contained kami deck with horizontal swipe pagination.
+capabilities_required:
+  - file-write
+example_prompt: |
+  Build me a 9-slide kami-style internal deck for "Hokuto Research" —
+  a Q1 portfolio review. Cover slide on ink-blue with the firm name.
+  Chapter dividers between Macro, Equities, and Outlook. Three content
+  slides with ink-blue numbered headings. One stats slide showing
+  AUM / IRR / fund count. One closing CTA. End card with the firm
+  signature. Japanese language stack.
+---
+
+# kami-deck
+
+姊妹技能，与 [`kami-landing`](../kami-landing/) 同源。生成一个独立自包含的 HTML 文件：采用 **kami（紙 / 纸）** 设计系统的横向杂志风格滑动翻页演示文稿——印刷节奏、墨蓝强调色、单一字重的衬线体、无斜体、无冷灰色调。
+
+导航模型有意借鉴了 [`guizang-ppt`](../guizang-ppt/) 技能——`←/→` 方向键、滚轮/滑动、ESC 进入概览网格。视觉风格保持 kami 特色：羊皮纸色内容页、墨蓝色封面和章节页，通篇使用衬线体。
+
+> **设计系统唯一权威来源：**
+> [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md)。
+> 交付前请务必阅读。令牌、排版规则和禁用颜色均在其中定义。幻灯片特有的缩放比例（宏比例 × 1.6、字间距 × 0.6 相对于印刷）记录在第 3 节"层级体系"和第 5 节"布局原则 · 幻灯片"中。
+
+## 你将得到什么
+
+- N 张视口大小的幻灯片（最佳数量为 6–15 张），水平排列在一条经过变换的弹性轨道上。
+- **封面页和章节页**：背景切换为墨蓝色（`#1B365D`），搭配象牙色文字——这是唯一使用深色主题的地方。
+- **内容页 / 数据统计页 / 引用页 / 行动号召页**：背景保持羊皮纸色（`#f5f4ed`），字重为 500 的衬线体。
+- **每页幻灯片的状态条**：品牌标识 · 演示文稿标题 · 实时页码计数器（`01 / 09`）。
+- **表格数字**应用于所有计数器、指标、页码。
+- **无珊瑚色**——kami 的强调色是墨蓝色。进度条和圆点导航也使用墨蓝色。
+- **键盘 / 滚轮 / 触控导航**，ESC 概览网格，圆点指示器。
+- **多语言支持**——支持英文/简体中文/日文，通过 `language` 参数在 `:root` 上设置。
+
+## 幻灯片类型
+
+| 类型        | 背景     | 用途                                                    |
+| :---------- | :------- | :------------------------------------------------------ |
+| `cover`     | 墨蓝色   | 开篇标题页。居中衬线标题 + 标语。                       |
+| `chapter`   | 墨蓝色   | 罗马/阿拉伯数字章节分隔页。                              |
+| `content`   | 羊皮纸色 | 章节编号 + 标题 + 正文 + 可选列表项。                   |
+| `stats`     | 羊皮纸色 | 3–4 个指标单元格（数值 · 标签 · 副标题）。              |
+| `quote`     | 羊皮纸色 | 拉引引用，左侧墨蓝色竖线 + 作者署名。                   |
+| `cta`       | 羊皮纸色 | 结尾号召语 + 1–2 个按钮。                               |
+| `end`       | 墨蓝色   | 超大衬线收尾词 + 版权页脚。                             |
+
+一个典型的 11 页演示文稿结构：
+
+```
+1. cover     — 墨蓝色标题页
+2. chapter   — "01 / 为什么是现在"
+3. content   — 宣言
+4. content   — 能力与要点
+5. stats     — 4 个数据
+6. chapter   — "02 / 使用感受"
+7. content   — 方法论
+8. content   — 精选案例
+9. quote     — 推荐语
+10. cta      — 主要行动
+11. end      — 墨蓝色收尾词
+```
+
+## 工作流程
+
+### 1. 收集需求
+
+分两轮询问（不要一次性列出全部问题）：
+
+1. 身份信息轮——名称、标识、标语、地点、版本、语言。
+2. 内容轮——针对每页幻灯片：类型 + 对应字段。
+
+### 2. 选择语言栈
+
+与 [`kami-landing`](../kami-landing/SKILL.md#2-pick-the-language-stack) 相同：
+英文 → Charter，简体中文 → 仓耳今楷02 / 思源宋体，日文 →
+YuMincho。日文还会将 `--olive` 覆盖为 `#4d4c48`，因为 YuMincho 的笔画更细。
+
+### 3. 编写 `index.html`
+
+输出单个文件，所有 CSS 内联。参照 [`example.html`](./example.html) 的结构。
+仅使用 `design-systems/kami/DESIGN.md` 中的令牌。
+
+运行时脚本（键盘 / 滚轮 / 触控导航、圆点指示器、进度条、ESC 概览）应与 [`open-design-landing-deck/scripts/compose.ts`](../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 级、font-display swap、无布局偏移。
+
+## 边界
+
+- **不要**引入第二种强调色。只选墨蓝色，或者什么都不选。
+- **不要**在任何地方使用斜体——强调改用墨蓝色表示。
+- **不要**对标签填充使用 `rgba()`；应在羊皮纸色上预混合后使用 `design-systems/kami/DESIGN.md` 第 2 节表格中的纯色十六进制值。
+- **不要**添加路由。这是单文件制品。
+- **不要**复用 Atelier Zero 拼贴图像（即 open-design-landing 视觉体系）。Kami 风格无渐变、少图片，层级关系完全由排版承载。
+
+## 参见
+
+- [`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 许可证）。Kami 的 slides.py 模板记录了本技能所应用的宏比例 × 1.6 / 微比例 × 0.6 的比值。