kami-landing は何をしますか？
kami（紙） デザインシステムによるシングルページ文書を生成します。 美学はエディトリアル印刷、技術ホワイトペーパー、 古いタイプライター書簡から着想を得ています。目標は「モダンなアプリUI」ではなく、 良い内容を良い紙に載せる ことです。
デザインシステムの信頼できる情報源:
design-systems/kami/DESIGN.md成果物を納品する前に必ず読んでください。トークン、書体ルール、「10の不変条件」、 使用禁止色がすべて記載されています。
得られるもの
自己完結型の単一HTMLファイル:
- 暖かみのある羊皮紙キャンバス (
#f5f4ed) — 決して#ffffffではありません。 - 単一の色調アクセント — インクブルー (
#1B365D)。セクション番号、見出しアクセント語、マニフェストの左ルール、メトリクス値に使用します。その他の場所では、インクブルーの面積は文書表面の5%以下に抑えてください。 - ウエイト500の単一セリフ体で階層を表現 — Charter (英語)、TsangerJinKai02 / Source Han Serif (中国語)、YuMincho (日本語) を
languageパラメータに基づいて選択します。イタリックは一切使用しません。 - タイトな印刷リズム — 行間 1.10–1.55、言語ごとに適切な文字間隔（英語は0、中国語は0.35px、日本語は0.02em）。
- 数値スタックは
font-variant-numeric: tabular-numsを設定し、メトリクス列やページ番号の数字がきれいに揃うようにします。 - 奥行きは1pxのリング + かすかなシャドウ（
0 4px 24px rgba(0,0,0,0.05)）で表現。ハードなドロップシャドウ、ニューモーフィズム、backdrop-filterブラーは使用しません。 - タグの塗りつぶしはソリッドHEX（例:
#E4ECF5）で指定し、rgba()は使用しません。印刷レンダラーがアルファタグを二重塗りするためです。 - レスポンシブ対応 — 1280 / 980 / 768 / 560 ピクセル。
ページ構造
1. アイブロウ行 — ロケールスイッチャー · エディション · バージョン（12px サンセリフ大文字）
2. ヒーロー — ディスプレイ見出し（96–106px セリフ体500）、タグライン（21px）、
3つのヒーロートークンチップ（紙色に着色）
3. マニフェスト — セリフ体400、20px、行間1.65のプル引用段落、
インクブルーの左ルールと署名フッター付き
4. メトリクス行 — 3～6セル: 値（24px セリフ体500 インクブルー、tabular-nums）、
ラベル（12px セリフ体500 オリーブ）
5. チャプター — 番号付き（`01`、`02`、…）インクブルー セリフ体500 14px、
セクションタイトル 28-32px、本文 14-15px
6. フッター — キッカーワード（特大セリフ体500）、ライセンス · 年 · 連絡先、
3カラムのサイトインデックス（12px セリフ体500）
ワークフロー契約
1. ブランドブリーフを収集する
AskQuestion（または同等の機能）を使用して、ブランドブリーフを分割して収集します。入力リスト全体を一度にユーザーに提示せず、2ラウンドで質問してください:
- アイデンティティラウンド — 名前、タグライン、所在地、エディション/バージョン、プライマリURL、主要言語。
- コンテンツラウンド — マニフェスト段落と署名、3～6個のメトリクスタイル、3～5個のチャプターエントリ（タイトル + リード + 本文）。
2. 言語スタックを選択する
language パラメータが :root に設定する --serif スタックを制御します。マニフェストとチャプター本文の主要言語に基づいて選択してください:
language | --serif | 備考 |
|---|---|---|
en | Charter, Georgia, Palatino, Times New Roman, serif | デフォルト |
zh-CN | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia | 本文の文字間隔 0.35px |
ja | YuMincho, Hiragino Mincho ProN, Source Han Serif JP | --olive も #4d4c48 に上書き（YuMinchoのストロークが細いため） |
インラインの混在スクリプトコンテンツは問題ありません。ブラウザのグリフ単位のフォールバックチェーンが処理します。3つのファミリーすべてを1つの font-family 宣言にチェーンしないでください。文字の個性が薄れます。
3. index.html を書く
すべてのCSSをインライン化した1つのファイルを出力します。example.html の構造を模倣し、design-systems/kami/DESIGN.md のトークンのみを使用します。新しい色、ウエイト、フォントファミリーを発明しないでください。
エージェントが使用できるコンポーネントプリミティブ（すべて example の <style> ブロックで定義されています）:
.eyebrow,.label— サンセリフ体のオーバーライン.metric— 値 + ラベルの縦方向ペア.section-num+.section-title+.section-lede.tag.standard,.tag.brush— ソリッドHEXタグ（1ページあたり brush は最大1つ）.quote— 左ルール付きセリフ体500引用ul.dash— インクブルーのダッシュ箇条書き.code— アイボリー背景、1pxボーダーのコードブロック.footer-kicker— 特大セリフ体500のキッカーワード
編集可能なすべての要素に data-od-id="<一意のスラッグ>" をタグ付けして、ホストアプリのコメントモードがターゲットにできるようにします。
4. 納品前の自己チェック
- ページ背景は羊皮紙色 (
#f5f4ed) であり、#ffffffではない。 - インクブルー (
#1B365D) の面積が可視表面の5%以下であること — セクション番号、マニフェストルール、メトリクス値、見出しアクセントをカウント。合計5%以下。 - すべてのグレーは暖色系（R ≈ G > B）。
slate-*や#f3f4f6は使用しない。 - セリフ体のウエイトは500を維持 — セリフ体テキストに
font-weight: 700や900を一切使用しない。 -
font-style: italicをどこにも使用しない。強調が必要な場合は、インクブルー色や.tagに置き換える。 - すべての数値スタック（メトリクス値、ページ番号、日付、財務数値）に
font-variant-numeric: tabular-numsを設定する。 - すべてのタグの塗りつぶしはソリッドHEX（例:
#E4ECF5）であり、rgba()ではない。 - シャドウ: 最大でも
1pxのリング、または0 4px 24px rgba(0,0,0,0.05)のかすかなシャドウ。ハードなドロップシャドウは禁止。 - 見出しは表示サイズで6単語以下、CJKは8文字以下。
- 768pxおよび560pxでは、レイアウトが水平スクロールなしで1カラムに折りたたまれること。
このスキルのファイル
design-templates/kami-landing/
├── SKILL.md # この契約書
├── README.md # 人間向けクイックスタート
└── example.html # 標準的なSplatStudioレンダリング
境界
- 新しい色や書体を発明しないでください。 kamiパレットは固定されています。ブリーフがブランドカラーを要求する場合、拒否するか、ブランドカラーを1つの
.tag.brushアクセントとしてレンダリングしてください。 - 2番目のアクセントカラーを導入しないでください。 インクブルーを選ぶか、何も選ばないでください。
- 3つのフォントスタックすべてを1つの宣言に混在させないでください。 主要言語を選び、
:rootで--serifを上書きし、ブラウザのグリフ単位のフォールバックに混在スクリプトのインラインコンテンツを解決させてください。 - タグの塗りつぶしに
rgba()を使用しないでください。 印刷レンダラーがアルファタグを二重塗りします。design-systems/kami/DESIGN.md§2のテーブルからプレブレンドされたソリッドHEXを使用してください。 - アニメーション用のJavaScriptを追加しないでください。 ページは紙であり、アプリではありません。動きは読者がスクロールすることに委ねられています。
関連情報
design-systems/kami/DESIGN.md— 完全なトークン仕様。design-templates/kami-deck/— 同じkami言語でスライドデッキを生成する姉妹スキル。- 上流:
tw93/kami— デザインシステムが適応した元のClaudeスキル（MIT）。