lavish-design

このスキル内のREADME.mdファイルを読み、ほかに利用できるファイルも確認してください。 ビジュアル成果物（スライド、モック、使い捨てのプロトタイプなど）を作成する場合は、アセットをコピーして、ユーザーが確認できる静的HTMLファイルを作成してください。本番コードに取り組む場合は、アセットをコピーし、こちらのルールを読んで、このブランドのデザインについて詳しく把握できます。 ユーザーがほかに指示せずにこのスキルを呼び出した場合は、何を作りたいか、デザインしたいかを尋ね、いくつか質問をしてから、必要に応じてHTML成果物または本番コードを出力する、デザインのエキスパートとして対応してください。

ファイルの場所

• README.md — 製品の背景、コンテンツの基本方針、ビジュアルの基礎、アイコン、注意事項
• colors_and_type.css — トークンシステム全体（インク、ブラス、セージ、アンバー、ラス、スチール、クリーム＋タイポグラフィ＋間隔＋角丸＋シャドウ）用の、そのまま使えるCSSカスタムプロパティ
• assets/ — ワードマーク、lavish-markアイコン、フロー図SVG
• preview/ — デザインシステムのタブ見本カード（カードごとに1つのコンセプト）
• ui_kits/editor/ — Lavish Editorのクロームを再現した、クリック操作可能なReact UI

クイックルール

1. ダークインク＋クリーム色の文字＋ブラスのアクセント1色。 2つ目のアクセント、グラデーション、グラスモーフィズムは使わないでください。
2. 本文とブランドを印象づける箇所にはセリフ体（EB Garamond italic）。UIのクロームにはサンセリフ体（Geist）。技術的な内容には等幅フォント（Geist Mono）。
3. 絵文字は禁止。感嘆符は禁止。「🚀 パワフルでシームレス」のようなコピーも禁止。 READMEの「Content Fundamentals」にある、ブランドに合う例と合わない例を読んでください。
4. 要素の注釈アウトライン＝フォーカスアウトライン：ブラス、2px、オフセット2px。 テキスト範囲の注釈には、代わりに半透明のブラスのハイライトを使います。どちらも「ここに注目」という意味です。
5. シャドウは浮かせる面（ツールチップ、注釈カード）だけに使用します。 ボタンやパネル内のカードには使わないでください。
6. セージ＝エージェント。アンバー＝ユーザー。ラス＝危険。 混同しないでください。
7. まず言葉、アイコンはその次。 アイコンが必要な場合は、Lucide（ストローク、1.5、currentColor）を使ってください。

新しいHTML成果物を作るには

1. スタイルシートで @import "../colors_and_type.css"; を使います（単体で動作させる場合は、トークンブロックをインラインでコピーします）。
2. セマンティック変数（--bg、--fg、--accentなど）を使って構築し、16進数をハードコードしないでください。
3. bodyには font-family: var(--font-sans) を設定し、見出しや引用文には var(--font-serif) を使います。
4. ブランドマークには assets/lavish-wordmark.svg を参照してください。描き直さないでください。
5. コンポーネント（ボタン、ピル、吹き出し、注釈カード、トップバー）が必要な場合は、ui_kits/editor/ 内の対応するJSXファイルを開き、スタイルオブジェクトをコピーしてください。すでにトークンに基づいています。