kami-landing

kami-landing

**kami（紙 / 纸）**デザインシステムで、1ページのドキュメントを作成します。 エディトリアル印刷物、技術白書、古いタイプライターで打たれた書簡から着想を得た美しさを目指します。目標は「優れた紙に載った優れたコンテンツ」であり、「モダンなアプリ UI」ではありません。

デザインシステムの正式な参照元： design-systems/kami/DESIGN.md。 公開前に必ず読んでください。トークン、タイポグラフィのルール、「10の不変条件」、使用禁止の色はすべてここに記載されています。

得られるもの

自己完結型の HTML ファイルが1つ作成されます。内容は次のとおりです。

• 温かみのある羊皮紙色のキャンバス（#f5f4ed）— #ffffff は使用しません。
• 単一の有彩色アクセント — インクブルー（#1B365D）をセクション番号、見出しのアクセント語、マニフェストの左罫線、指標値に使用します。それ以外の場所では、インクブルーがドキュメント表面積に占める割合を5%以下にしてください。
• 階層表現には1種類のウェイト（500）のセリフ体 — Charter（EN）、TsangerJinKai02 / Source Han Serif（CN）、または YuMincho（JA）を、language パラメーターに応じて選びます。イタリックは一切使用しません。
• 引き締まった印刷物のリズム — 行の高さは1.10〜1.55、文字間隔は言語ごとに設定します（EN は0、CN は0.35px、JA は0.02em）。
• 数値のスタックには font-variant-numeric: tabular-nums を設定し、指標の列とページ番号がきれいに揃うようにします。
• 1px のリング＋控えめなシャドウで奥行きを表現します（0 4px 24px rgba(0,0,0,0.05)）。強いドロップシャドウ、ニューモーフィズム、backdrop-filter によるぼかしは使用しません。
• タグの塗りつぶしには単色の16進数カラー（例：#E4ECF5）を使い、rgba() は使用しません。印刷レンダラーでは、アルファ値付きのタグが二重に描画されるためです。
• 1280 / 980 / 768 / 560 に対応します。

ページ構成

1. Eyebrow row     — locale switcher · edition · version (12px sans uppercase)
2. Hero            — display headline (96–106px serif 500), tagline (21px),
                     three hero-token chips (paper-tinted)
3. Manifesto       — pull paragraph in serif 400, 20px, 1.65 LH, with
                     ink-blue left-rule and signature footer
4. Metrics row     — 3-6 cells: value (24px serif 500 ink-blue, tabular-nums),
                     label (12px serif 500 olive)
5. Chapters        — numbered (`01`, `02`, …) ink-blue serif 500 14px,
                     section title 28-32px, body 14-15px
6. Footer          — kicker word (mega serif 500), license · year · contact,
                     three-column site index in 12px serif 500

ワークフローの契約

1. ブランド概要を収集する

AskQuestion（または同等のもの）を使って、ブランド概要をいくつかのまとまりに分けて収集します。入力項目をすべて一度にユーザーに提示せず、次の2回に分けて質問します。

1. アイデンティティに関する質問 — 名前、タグライン、所在地、版 / バージョン、主要 URL、主要言語。
2. コンテンツに関する質問 — マニフェストの段落と署名、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	body の letter-spacing は 0.35px
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	YuMincho のストロークが細いため、--olive も #4d4c48 に上書きします

複数の文字体系が混在するインラインコンテンツも問題ありません。ブラウザーがグリフごとのフォールバックチェーンを処理します。1つの font-family 宣言に3種類すべてのファミリーを並べないでください。文字の個性が損なわれます。

3. index.html を作成する

CSS をすべてインラインにした単一ファイルを出力します。example.html の構成に合わせ、design-systems/kami/DESIGN.md のトークンのみを使用してください。新しい色、ウェイト、フォントファミリーは作成しないでください。

エージェントが使用できるコンポーネントの基本要素（すべて example の <style> ブロックで定義されています）：

• .eyebrow、.label — サンセリフ体のオーバーライン
• .metric — 値とラベルの縦並び
• .section-num + .section-title + .section-lede
• .tag.standard、.tag.brush — 単色16進数カラーのタグ（1ページにつき brush は最大1つ）
• .quote — 左罫線付きのセリフ体500の引用
• ul.dash — インクブルーのダッシュ付き箇条書き
• .code — アイボリー背景、1px 枠線のコードブロック
• .footer-kicker — 特大のセリフ体500の単語

ホストアプリのコメントモードで編集可能な要素を指定できるよう、各要素に data-od-id="<unique-slug>" を付けてください。

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を指定します。
• タグの塗りつぶし色には、単色の16進数カラー（例：#E4ECF5）のみを使い、rgba()は使用しません。
• 影は最大でも1pxのリング、または控えめな0 4px 24px rgba(0,0,0,0.05)にします。くっきりしたドロップシャドウは使用しません。
• ディスプレイサイズでの見出しは6語以下にします。CJKの場合は8文字以下にします。
• 768pxと560pxでは、横スクロールなしでレイアウトが1列に折りたたまれるようにします。

このスキルのファイル

design-templates/kami-landing/
├── SKILL.md                 # this contract
├── README.md                # human quick-start
└── example.html             # canonical Open Design rendering

適用範囲

• 新しい色や書体を勝手に追加しないでください。 kamiのパレットは固定です。ブリーフでブランドカラーを求められた場合は、使用を控えるよう提案するか、ブランドカラーを単一の.tag.brushアクセントとして表現します。
• 2つ目のアクセントカラーを追加しないでください。 インクブルーを選ぶか、何も選ばないでください。
• 1つの宣言に3種類すべてのフォントスタックを混在させないでください。 主となる言語を選び、:rootで--serifを上書きし、インラインの混在スクリプトコンテンツは、グリフごとのフォールバックでブラウザーに処理させます。
• タグの塗りつぶしにrgba()を使わないでください。 印刷レンダラーでは、半透明のタグが二重に描画されます。design-systems/kami/DESIGN.md §2の表にある、あらかじめ色を合成した単色の16進数カラーを使用します。
• アニメーションにJavaScriptを追加しないでください。 ページは紙であり、アプリではありません。動きは読者がスクロールすることで生まれます。

関連項目

• design-systems/kami/DESIGN.md — トークンの完全な仕様です。
• design-templates/kami-deck/ — 同じkamiのデザイン言語でスライドデッキを作成する姉妹スキルです。
• 上流プロジェクト：tw93/kami — このデザインシステムが応用している、オリジナルのClaudeスキル（MIT）です。