kami-deck

kami-deck

kami-landing の姉妹スキルです。kami（紙 / 纸） デザインシステムを採用した、横方向にスワイプする雑誌風デッキを、自己完結型の単一 HTML ファイルとして生成します。印刷物のリズム、インクブルーのアクセント、ウェイトを一種類に絞ったセリフ体、斜体なし、寒色系のグレーなしが特徴です。

ナビゲーションモデルは、意図的に guizang-ppt スキルを踏襲しています。←/→ 矢印キー、ホイール／スワイプ、概要グリッドを開く ESC キーを使用します。美的表現は kami のままです。コンテンツスライドはパーチメント、表紙と章スライドはインクブルー、フォントはすべてセリフ体です。

デザインシステムの唯一の情報源： design-systems/kami/DESIGN.md。 リリース前に必ずお読みください。トークン、書体ルール、使用禁止の色はすべてここに記載されています。スライド固有のスケール比（マクロ × 1.6、印刷物と比べて文字間隔 × 0.6）は、§3「Hierarchy」と §5「Layout Principles · Slides」に記載されています。

得られるもの

• ビューポートサイズのスライド N 枚（最適な枚数は 6～15 枚）を、変形された一つのフレックストラック上に水平方向に配置します。
• 表紙と章スライドは背景をインクブルー（#1B365D）に切り替え、アイボリー色のテキストを表示します。ダークテーマを使用するのはここだけです。
• コンテンツ／統計／引用／CTA スライドはパーチメント（#f5f4ed）を保ち、ウェイト 500 のセリフ体を使用します。
• スライドごとのクロームストリップ：ブランドマーク · デッキタイトル · 現在のスライドカウンター（01 / 09）。
• すべてのカウンター、指標、ページ番号に Tabular-nums を使用します。
• コーラル不使用 — kami のアクセントカラーはインクブルーです。プログレスバーとドットナビゲーションもインクブルーです。
• キーボード／ホイール／タッチ操作のナビゲーション、ESC キーで開く概要グリッド、ドットインジケーター。
• 多言語スタック — EN / zh-CN / ja。:root で language パラメーターを指定します。

スライドの種類

種類	背景	用途
cover	インクブルー	冒頭のタイトルプレート。中央揃えのセリフ体タイトル＋タグライン。
chapter	インクブルー	ローマ数字／アラビア数字の章区切り。
content	パーチメント	セクション番号＋タイトル＋本文＋任意の箇条書き。
stats	パーチメント	3～4 個の指標セル（値 · ラベル · 補足）。
quote	パーチメント	インクブルーの左罫線と著者の署名を添えた引用。
cta	パーチメント	クロージングの提案＋1～2 個のボタン。
end	インクブルー	大きなセリフ体のキーワード＋奥付フッター。

一般的な 11 枚構成のデッキ：

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

ワークフロー

1. ブリーフを集める

2 回に分けて質問します（リスト全体を一度に提示しないでください）。

1. アイデンティティに関する質問 — 名前、マーク、タグライン、場所、版、言語。
2. コンテンツに関する質問 — 各スライドの種類と、入力する各フィールド。

2. 言語スタックを選ぶ

kami-landing と同じです： EN → Charter、zh-CN → TsangerJinKai02 / Source Han Serif、ja → YuMincho。JA では、YuMincho のストロークが細いため、--olive も #4d4c48 に上書きします。

3. index.html を作成する

すべての CSS をインラインにした単一ファイルを出力します。example.html の構造に合わせてください。design-systems/kami/DESIGN.md にあるトークンのみを使用します。

ランタイムスクリプト（キーボード／ホイール／タッチ操作のナビゲーション、ドットインジケーター、プログレスバー、ESC キーで開く概要）は、open-design-landing-deck/scripts/compose.ts に記載されたモデルに合わせてください。open-design-landing-deck の CSS は再利用しないでください。ビジュアル言語が異なります。

4. セルフチェック

• 表紙／章／終了スライドの背景はすべてインクブルー（#1B365D）で、テキストはアイボリーです。それ以外のスライドの背景はパーチメントです。
• パーチメントのスライドでは、インクブルーの面積を全体の 5% 以下にします。
• スライドタイトルのウェイトはセリフ体の 500 のみを使用します。イタリック体は使用しません。
• すべての数値スタック（カウンター、メトリクス、ページ番号）に font-variant-numeric: tabular-nums を適用します。
• →／Space／スクロールを操作します。1 ビューポート分、右方向へスムーズにスライドし、ドットナビゲーションが進み、インクブルーのプログレスバーが進みます。
• Esc を押します。縮小サムネイルが並んだ概要グリッドが表示されます。
• 幅を 1080px と 640px に変更します。表紙／コンテンツが 1 列に折りたたまれ、ドットナビゲーションも引き続き機能します。
• Lighthouse：コントラスト AA、font-display swap、レイアウトシフトなし。

境界

• 2 色目のアクセントカラーは追加しないでください。 インクブルーを選ぶか、何も選ばないでください。
• イタリック体はどこにも使用しないでください。 強調にはインクブルーを使用します。
• タグの塗りつぶしに rgba() を使用しないでください。 パーチメントの上にあらかじめブレンドし、design-systems/kami/DESIGN.md §2 の表にあるソリッドな hex 値を使用します。
• ルーターを追加しないでください。 これは単一ファイルの成果物です。
• Atelier Zero のコラージュ画像（open-design-landing のビジュアルシステム）を再利用しないでください。Kami はグラデーションなし、画像の使用は控えめで、階層は文字で表現します。

関連項目

• kami-landing — 長文形式の 1 ページャーを作成する姉妹スキルです。
• design-systems/kami/DESIGN.md — トークン仕様です。
• open-design-landing-deck — 同じ横方向のスワイプナビゲーションモデルを使用し、ビジュアル言語は異なります（Atelier Zero）。
• 上流プロジェクト：tw93/kami — 元の Claude スキル（MIT）です。Kami の slides.py テンプレートには、このスキルで適用するマクロ × 1.6／マイクロ × 0.6 の比率が記載されています。