aesthetic-guide

美的スタイルガイド

指定された UI の美的スタイルについて、網羅的で実装にそのまま使えるデザインシステムのドキュメントを作成します。コーディングエージェントがほとんど解釈に迷わず、その美的スタイルを忠実に実装できる詳細なリファレンスガイドを提供してください。

ワークフロー

1. 美的スタイルを特定する — ユーザーのリクエストから特定します
2. カタログを確認する — references/aesthetic-catalog.md を読み、この美的スタイルに関する事前調査済みのデータがあるか確認します
3. 必要に応じて調査する — カタログに美的スタイルがない場合、またはユーザーがカスタムのバリエーションを希望する場合は、ウェブで調査し、実装レベルの詳細（正確な CSS 値、フォント、色、タイミング関数）を集めます
4. 出力スキーマを読み込む — 必須の構成を確認するため、references/output-schema.md を読みます
5. ガイドを作成する — 出力スキーマのすべてのセクションに、具体的でコピーしてそのまま使える値を記入します。曖昧な表現や「適切な値を選択」といった記述は避け、すべてのプロパティに正確な値、または根拠を示した範囲を指定します
6. Markdown ファイルとして納品する — 完成したガイドをプロジェクトに書き込みます（デフォルト：.claude/docs/{aesthetic-name}-design-system.md）

調査プロトコル

カタログにない美的スタイルを調査する場合：

• 「{aesthetic} CSS」「{aesthetic} UI design system」「{aesthetic} web design examples」を検索します
• オープンソースの実装、CodePen のサンプル、デザインシステムのドキュメントを探します
• 具体的な値を抽出します。HEX コード、フォント名、px/rem 値、cubic-bezier 曲線、シャドウの構文などです
• 複数の情報源を相互参照し、その美的スタイルを定義する共通の特性を特定します
• 必須のプロパティ（これがないと、その美的スタイルにならないもの）と、特徴的なプロパティ（よく使われますが、必須ではないもの）を区別します

出力要件

• 色はすべて HEX または HSL 値で指定します。「ダークブルー」のような色名は使いません
• フォントはすべて、代替フォントのスタックを含む具体的なファミリー名で指定します
• 間隔の値はすべて px または rem で指定します
• トランジションはすべて、時間とタイミング関数を指定します
• インタラクティブな状態（ホバー、アクティブ、フォーカス、無効）には、明示的な CSS を指定します
• すべてのコンポーネントに、各擬似状態の定義を含めます
• 適用可能な場合は、CSS カスタムプロパティ（変数）と Tailwind の同等の設定を両方含めます

カスタマイズ

ユーザーは次のようなリクエストをする場合があります。

• 特定のフレームワーク（Tailwind、バニラ CSS、CSS-in-JS）— 出力形式を調整します
• 複数スタイルの組み合わせ（「柔らかなシャドウを使ったブルータリズム」など）— 各プロパティがどのスタイルに由来するかを示して、スタイルを組み合わせます
• バリエーション（「ダークモードのサイバーパンク」や「ライトモードのサイバーパンク」など）— 指定されたバリエーションを作成します
• 部分的なガイド（色のみ、タイポグラフィのみなど）— リクエストされたセクションのみを作成します