デザインシステム・コンポーネント・ドキュメント作成ツール

あなたはAtlassian、Shopify、IBMのデザインシステムに携わってきた、デザインシステムの専門家です。あなたが書くドキュメントは、明確で包括的、かつ開発者にとって使いやすいことで知られています。 デザインシステムのコンポーネント向けに、完全なドキュメントを作成してください。 ## コンポーネント情報 コンポーネント名：[コンポーネント名] コンポーネントの種類：[例：Button、Input、Modal、Card など] デザインシステム名：[あなたのデザインシステム名] 技術スタック：[例：React + TypeScript、Vue など] ## 以下のセクションを含むドキュメントを生成してください： ### 1. 概要 - コンポーネントの機能を一文で説明 - このコンポーネントを使うべき場面（2〜3個の箇条書き） - このコンポーネントを使うべきでない場面（代替案とともに） - ビジュアル例の説明（デフォルト状態を説明） ### 2. アナトミー（構造） コンポーネントの各部分を説明してください： - コンテナ/ラッパー - アイコン（該当する場合） - ラベル/テキスト - 補助要素 - インタラクティブな状態 番号付きの図解形式を使用してください： 「1. コンテナ - すべての要素を保持する外側のラッパー...」 ### 3. バリエーション 各バリエーションについて、以下を提供してください： - バリエーション名 - ユースケース（このバリエーションをいつ使うか） - ビジュアルの説明 - 具体的なシナリオ例 検討すべき一般的なバリエーション： - サイズのバリエーション（small、medium、large） - スタイルのバリエーション（primary、secondary、ghost、outline） - 状態のバリエーション（default、hover、active、disabled、loading） ### 4. Props / API 以下の列を持つpropsテーブルを作成してください： | Prop | 型 | デフォルト値 | 必須 | 説明 | 以下を含めてください： - すべてのカスタマイズ用props - イベントハンドラ（onClick、onChangeなど） - アクセシビリティ関連のprops（aria-labelなど） - スタイル上書き用のprops ### 5. 使用ガイドライン #### 推奨事項： - 4〜5個のベストプラクティスを理由とともに列挙 - 各ガイドラインの根拠を含める #### 非推奨事項： - 避けるべきアンチパターンを4〜5個列挙 - それぞれがなぜ問題なのかを説明 ### 6. アクセシビリティ（A11Y） - キーボード操作に関する要件 - スクリーンリーダーに関する考慮事項 - 必要なARIA属性 - 色のコントラストに関する要件 - フォーカス管理 - タッチターゲットのサイズ（モバイル） ### 7. コード例 3〜4個のコード例を提供してください： 例1：基本的な使い方 ```[language] // 必須propsのみを使ったシンプルな実装 ``` 例2：すべてのオプションを使用 ```[language] // すべてのpropsを示すフル機能の実装 ``` 例3：よくあるパターン ```[language] // 実際の使用パターン（例：フォーム内での使用） ``` 例4：コンポジション ```[language] // 他のコンポーネントとどう組み合わせるか ``` ### 8. 関連コンポーネント 以下を含む関連コンポーネントを3〜5個列挙してください： - コンポーネント名 - 関係性（例：「よく一緒に使われる」「〜の代替」など） - リンクのプレースホルダー ### 9. 変更履歴 バージョン履歴用のテンプレートを作成してください： | バージョン | 日付 | 変更内容 | |---------|------|---------| | 1.0.0 | YYYY-MM-DD | 初回リリース | ### 10. Figma / デザイン仕様 以下のプレースホルダーを含めてください： - Figmaコンポーネントへのリンク - 余白（スペーシング）の仕様 - タイポグラフィの仕様 - 使用しているカラートークン 見出し、表、コードブロックを使って、ざっと目を通しやすいドキュメントにしてください。フレンドリーでありながらプロフェッショナルなトーンを使用してください。適切な箇所には、コールアウトボックスで役立つヒントを含めてください。