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".
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.
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
Workflow
1. Gather the brief
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
Same as kami-landing:
EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja →
YuMincho. JA also overrides --olive to #4d4c48 because YuMincho
strokes are thinner.
3. Write 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.
4. Self-check
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.
See also
1---2name: kami-deck3description: A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI.4---5
6# kami-deck
7
8Sister skill to [`kami-landing`](../kami-landing/). Produces a single
9self-contained HTML file: a horizontal magazine-style swipe deck in
10the **kami (紙 / 纸)** design system — print rhythm, ink-blue accent,
11serif at one weight, no italic, no cool grays.
12
13The navigation model is intentionally borrowed from the
14[`guizang-ppt`](../guizang-ppt/) skill — `←/→` arrow keys, wheel /
15swipe, ESC for the overview grid. The aesthetic stays kami: parchment
16content slides, ink-blue cover and chapter slides, serif everywhere.
17
18> **Design system source of truth:**
19> [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md).
20> Read it before shipping. Tokens, type rules, and forbidden colors
21> all live there. Slide-specific scale ratios (macro × 1.6,
22> letter-spacing × 0.6 vs. print) are documented in §3 "Hierarchy"
23> and §5 "Layout Principles · Slides".
24
25## What you get
26
27- N viewport-sized slides (6-15 is the sweet spot) laid out
28 horizontally on one transformed flex track.
29- **Cover and chapter slides** flip background to ink-blue
30 (`#1B365D`) with ivory text — the only place dark theme is used.
31- **Content / stats / quote / CTA slides** stay on parchment
32 (`#f5f4ed`) with serif at weight 500.
33- **Per-slide chrome strip**: brand mark · deck title · live slide
34 counter (`01 / 09`).
35- **Tabular-nums** on every counter, metric, page number.
36- **Coral-free** — kami's accent is ink-blue. Progress bar and dot
37 nav are ink-blue too.
38- **Keyboard / wheel / touch nav**, ESC overview grid, dot indicator.
39- **Multilingual stack** — EN / zh-CN / ja, set on `:root` via
40 the `language` parameter.
41
42## Slide types
43
44| Kind | Background | Use it for |
45| :---------- | :--------- | :-------------------------------------------------------- |
46| `cover` | ink-blue | Title plate at the start. Centered serif title + tagline. |
47| `chapter` | ink-blue | Roman/Arabic numeral chapter divider. |
48| `content` | parchment | Section number + title + body + optional bullets. |
49| `stats` | parchment | 3-4 metric cells (value · label · sub). |
50| `quote` | parchment | Pull quote with ink-blue left rule + author signature. |
51| `cta` | parchment | Closing pitch + 1-2 buttons. |
52| `end` | ink-blue | Mega serif kicker word + colophon footer. |
53
54A typical 11-slide deck:
55
56```
571. cover — ink-blue title plate
582. chapter — "01 / Why now"
593. content — manifesto
604. content — capabilities + bullets
615. stats — 4 numbers
626. chapter — "02 / How it feels"
637. content — method
648. content — selected work
659. quote — testimonial
6610. cta — primary action
6711. end — ink-blue kicker
68```
69
70## Workflow
71
72### 1. Gather the brief
73
74Ask in two rounds (don't dump the whole list at once):
75
761. Identity round — name, mark, tagline, location, edition, language.
772. Content round — for each slide, kind + the typed fields.
78
79### 2. Pick the language stack
80
81Same as [`kami-landing`](../kami-landing/SKILL.md#2-pick-the-language-stack):
82EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja →
83YuMincho. JA also overrides `--olive` to `#4d4c48` because YuMincho
84strokes are thinner.
85
86### 3. Write `index.html`
87
88Output a single file with all CSS inline. Mirror the structure of
89[`example.html`](./example.html). Use only the tokens from
90`design-systems/kami/DESIGN.md`.
91
92The runtime script (keyboard / wheel / touch nav, dot indicator,
93progress bar, ESC overview) should match the model documented in
94[`open-design-landing-deck/scripts/compose.ts`](../open-design-landing-deck/scripts/compose.ts).
95Do **not** reuse the open-design-landing-deck CSS; the visual
96language is different.
97
98### 4. Self-check
99
100- [ ] All cover / chapter / end slides use ink-blue background
101 (`#1B365D`) with ivory text. All other slides are on
102 parchment.
103- [ ] Ink-blue covers ≤ 5% of any parchment slide's surface.
104- [ ] Slide titles use serif weight 500 only. No italic.
105- [ ] All numeric stacks (counter, metrics, page numbers) carry
106 `font-variant-numeric: tabular-nums`.
107- [ ] Press `→` / `Space` / scroll. Smoothly slides one viewport
108 to the right; dot nav advances; the ink-blue progress bar
109 ticks forward.
110- [ ] Press `Esc`. Overview grid appears with scaled thumbnails.
111- [ ] Resize to 1080px and 640px. Cover / content collapse to a
112 single column; dot nav still works.
113- [ ] Lighthouse: contrast AA, font-display swap, no layout shift.
114
115## Boundaries
116
117- **Do not** introduce a second accent color. Pick ink-blue or
118 pick nothing.
119- **Do not** use italic anywhere — emphasis swaps to ink-blue.
120- **Do not** use `rgba()` for tag fills; pre-blend over parchment
121 and use solid hex from the table in
122 `design-systems/kami/DESIGN.md` §2.
123- **Do not** add a router. This is a single-file artifact.
124- **Do not** reuse Atelier Zero collage imagery (the open-design-landing
125 visual system). Kami is gradient-free, image-light, and hierarchy
126 is carried by type.
127
128## See also
129
130- [`kami-landing`](../kami-landing/) — long-form one-pager sister skill.
131- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) — token spec.
132- [`open-design-landing-deck`](../open-design-landing-deck/) — same
133 horizontal swipe nav model, different visual language (Atelier Zero).
134- Upstream: [`tw93/kami`](https://github.com/tw93/kami) — original
135 Claude skill (MIT). Kami's slides.py template documents the macro
136 × 1.6 / micro × 0.6 ratios this skill applies.
Nexu