nexu-io/open-design/kami-deck

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

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):

1. Identity round — name, mark, tagline, location, edition, language.
2. 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

• [ ] 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.

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

• `kami-landing` — long-form one-pager sister skill.
• `design-systems/kami/DESIGN.md` — token spec.
• `open-design-landing-deck` — same

horizontal swipe nav model, different visual language (Atelier Zero).

• Upstream: `tw93/kami` — original

Claude skill (MIT). Kami's slides.py template documents the macro × 1.6 / micro × 0.6 ratios this skill applies.