kami-deck

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

kami-deck

Sister skill to

kami-landing

. Produces a single self-contained HTML file: a horizontal magazine-style swipe deck in the kami (紙 / 纸) design system — print rhythm, ink-blue accent, serif at one weight, no italic, no cool grays.

The navigation model is intentionally borrowed from the

guizang-ppt

skill —

←/→

arrow keys, wheel / swipe, ESC for the overview grid. The aesthetic stays kami: parchment content slides, ink-blue cover and chapter slides, serif everywhere.

Design system source of truth:
design-systems/kami/DESIGN.md
. Read it before shipping. Tokens, type rules, and forbidden colors all live there. Slide-specific scale ratios (macro × 1.6, letter-spacing × 0.6 vs. print) are documented in §3 "Hierarchy" and §5 "Layout Principles · Slides".

作为

kami-landing

的姊妹技能，它可生成单个独立HTML文件：一款采用**kami（紙 / 纸）**设计系统的杂志式横向滑动演示文稿——具备印刷级排版节奏、墨蓝色点缀、仅使用一种字重的衬线字体，不使用斜体，也不使用冷灰色系。

导航模式特意借鉴了

guizang-ppt

技能——支持

←/→

方向键、滚轮/滑动操作，按下ESC键可查看概览网格。视觉风格遵循kami设计：内容幻灯片使用羊皮纸背景，封面和章节幻灯片使用墨蓝色背景，全页面采用衬线字体。

设计系统权威来源：
design-systems/kami/DESIGN.md
。交付前请先阅读该文档。所有设计标记、字体规则和禁用颜色均收录于此。幻灯片特有的比例缩放规则（宏观×1.6，字间距×0.6，与印刷版对比）记录在第3节“层级结构”和第5节“布局原则·幻灯片”中。

What you get

你将获得

N viewport-sized slides (6-15 is the sweet spot) laid out horizontally on one transformed flex track.
Cover and chapter slides flip background to ink-blue (
```
#1B365D
```
) with ivory text — the only place dark theme is used.
Content / stats / quote / CTA slides stay on parchment (
```
#f5f4ed
```
) with serif at weight 500.
Per-slide chrome strip: brand mark · deck title · live slide counter (
```
01 / 09
```
).
Tabular-nums on every counter, metric, page number.
Coral-free — kami's accent is ink-blue. Progress bar and dot nav are ink-blue too.
Keyboard / wheel / touch nav, ESC overview grid, dot indicator.
Multilingual stack — EN / zh-CN / ja, set on
```
:root
```
via the
```
language
```
parameter.

N个视口尺寸的幻灯片（6-15张为最佳数量），在一条经过变换的弹性轨道上横向排列。
封面和章节幻灯片会将背景切换为墨蓝色（
```
#1B365D
```
），搭配象牙色文字——这是唯一使用深色主题的场景。
内容/数据/引用/号召性用语幻灯片保持羊皮纸背景（
```
#f5f4ed
```
），衬线字体字重为500。
每张幻灯片的导航条：品牌标识 · 演示文稿标题 · 当前幻灯片计数器（
```
01 / 09
```
）。
所有计数器、指标、页码均使用等宽数字格式。
无珊瑚色——kami的点缀色为墨蓝色。进度条和点状导航也使用墨蓝色。
支持键盘/滚轮/触摸导航，ESC概览网格，点状指示器。
多语言支持——支持英文/简体中文/日文，通过
```
:root
```
上的
```
language
```
参数设置。

Slide types

幻灯片类型

Kind	Background	Use it for
`cover`	ink-blue	Title plate at the start. Centered serif title + tagline.
`chapter`	ink-blue	Roman/Arabic numeral chapter divider.
`content`	parchment	Section number + title + body + optional bullets.
`stats`	parchment	3-4 metric cells (value · label · sub).
`quote`	parchment	Pull quote with ink-blue left rule + author signature.
`cta`	parchment	Closing pitch + 1-2 buttons.
`end`	ink-blue	Mega serif kicker word + colophon footer.

A typical 11-slide deck:

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

类型	背景色	使用场景
`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      — 墨蓝色收尾页

Workflow

工作流程

1. Gather the brief

1. 收集需求

Ask in two rounds (don't dump the whole list at once):

Identity round — name, mark, tagline, location, edition, language.
Content round — for each slide, kind + the typed fields.

分两轮询问（不要一次性列出所有问题）：

品牌信息轮——名称、标识、标语、地点、版本、语言。
内容轮——每张幻灯片的类型+对应内容字段。

2. Pick the language stack

2. 选择语言字体栈

Same as

kami-landing

: EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja → YuMincho. JA also overrides

--olive

#4d4c48

because YuMincho strokes are thinner.

与

kami-landing

相同：英文→Charter，简体中文→TsangerJinKai02 / Source Han Serif，日文→YuMincho。日文还会将

--olive

覆盖为

#4d4c48

，因为YuMincho的笔画更细。

3. Write

index.html

3. 编写

index.html

Output a single file with all CSS inline. Mirror the structure of

example.html

. Use only the tokens from

design-systems/kami/DESIGN.md

The runtime script (keyboard / wheel / touch nav, dot indicator, progress bar, ESC overview) should match the model documented in

open-design-landing-deck/scripts/compose.ts

. Do not reuse the open-design-landing-deck CSS; the visual language is different.

输出单个内嵌所有CSS的文件。参考

example.html

的结构。仅使用

design-systems/kami/DESIGN.md

中的设计标记。

运行时脚本（键盘/滚轮/触摸导航、点状指示器、进度条、ESC概览）应与

open-design-landing-deck/scripts/compose.ts

中记录的模型一致。请勿复用open-design-landing-deck的CSS；二者视觉语言不同。

4. Self-check

4. 自我检查

All cover / chapter / end slides use ink-blue background (
```
#1B365D
```
) with ivory text. All other slides are on parchment.
Ink-blue covers ≤ 5% of any parchment slide's surface.
Slide titles use serif weight 500 only. No italic.
All numeric stacks (counter, metrics, page numbers) carry
```
font-variant-numeric: tabular-nums
```
.
Press
```
→
```
/
```
Space
```
/ scroll. Smoothly slides one viewport to the right; dot nav advances; the ink-blue progress bar ticks forward.
Press
```
Esc
```
. Overview grid appears with scaled thumbnails.
Resize to 1080px and 640px. Cover / content collapse to a single column; dot nav still works.
Lighthouse: contrast AA, font-display swap, no layout shift.

所有封面/章节/结尾幻灯片均使用墨蓝色背景（
```
#1B365D
```
）搭配象牙色文字。其他所有幻灯片均使用羊皮纸背景。
墨蓝色在任何羊皮纸幻灯片上的占比≤5%。
幻灯片标题仅使用字重为500的衬线字体。不使用斜体。
所有数字内容（计数器、指标、页码）均带有
```
font-variant-numeric: tabular-nums
```
属性。
按下
```
→
```
/
```
空格
```
/ 滚动。平滑向右滑动一个视口；点状导航更新；墨蓝色进度条向前推进。
按下
```
Esc
```
键。显示带缩放缩略图的概览网格。
调整窗口大小至1080px和640px。封面/内容页折叠为单列；点状导航仍可正常使用。
Lighthouse检测：对比度达标AA级，字体加载使用swap策略，无布局偏移。

Boundaries

边界限制

Do not introduce a second accent color. Pick ink-blue or pick nothing.
Do not use italic anywhere — emphasis swaps to ink-blue.
Do not use
```
rgba()
```
for tag fills; pre-blend over parchment and use solid hex from the table in
```
design-systems/kami/DESIGN.md
```
§2.
Do not add a router. This is a single-file artifact.
Do not reuse Atelier Zero collage imagery (the open-design-landing visual system). Kami is gradient-free, image-light, and hierarchy is carried by type.

请勿引入第二种点缀色。要么选墨蓝色，要么不使用点缀色。
请勿在任何地方使用斜体——强调内容改用墨蓝色。
请勿使用
```
rgba()
```
作为标签填充色；提前在羊皮纸背景上混合颜色，使用
```
design-systems/kami/DESIGN.md
```
第2节表格中的纯色十六进制值。
请勿添加路由。这是一个单文件产物。
请勿复用Atelier Zero的拼贴图像（open-design-landing的视觉系统）。kami设计无渐变、少图像，通过字体构建层级结构。

kami-deck

Original

Translation

kami-deck

kami-deck

What you get

你将获得

Slide types

幻灯片类型

Workflow

工作流程

1. Gather the brief

1. 收集需求

2. Pick the language stack

2. 选择语言字体栈

3. Write
`index.html`

3. 编写
`index.html`

4. Self-check

4. 自我检查

Boundaries

边界限制

See also

相关链接

kami-deck

Original

Translation

kami-deck

kami-deck

What you get

你将获得

Slide types

幻灯片类型

Workflow

工作流程

1. Gather the brief

1. 收集需求

2. Pick the language stack

2. 选择语言字体栈

3. Write index.html

3. 编写index.html

4. Self-check

4. 自我检查

Boundaries

边界限制

See also

相关链接

3. Write
`index.html`

3. 编写
`index.html`