21st-ui-explore

根拠に基づいた UI の方向性を検討する

プロジェクトのビジュアルアイデンティティを保ちながら、実際に選べる選択肢を作成します。

ワークフロー

1. .21st/design.json と、関連するプロダクト UI を確認します。コンテキストが不足している場合は、 21st init --design-context を実行します。

2. 生成前に、21st で複数の関連する参考例を検索します。

   21st search "<interface and product context>" --context auto
   

3. 名前を付けた方向性を 3 つ定義します。それぞれ、階層、情報密度、ナビゲーションモデル、 コンテンツの強調、インタラクションパターン、構成など、意味のある軸を少なくとも 2 つ変えてください。 色だけを変えた案は対象になりません。

4. 実際のスタック、トークン、ブランドアセット、必須コンテンツ、アクセシビリティ、レスポンシブ動作など、 共通の制約は固定します。

5. 比較可能なプレビューを作成します。MCP の get_usage.aiGenerationEnabled を確認するか、 21st usage を実行して 21st AI generation の行を読みます。CLI 1.17.1 以降では、 21st usage --json も利用できます。AI が明示的に有効な場合に限り、利用可能な AI クレジットを使って ホステッド生成を行います。

   21st generate "<goal plus fixed constraints>" --context auto --variants 3
   

   それ以外の場合は、21st search と 21st get（MCP：search と get_component）を参考に、 独自のコーディングエージェントでプレビューを実装します。AI にアクセスできない場合は、 ホステッドの generate や iterate_generation を呼び出したり、提案したりしないでください。

6. ホストが選択ツールに対応している場合は、すべての選択肢をまとめて提示します。対応していない場合は、 各選択肢のプレビューまたはディープリンクと、簡潔な比較を提示します。

7. 具体的なトレードオフを示して方向性を 1 つ推奨しますが、選択はユーザーに委ねます。

8. 選択後、採用しなかったローカルの案を削除し、決定内容を .21st/design.json に記録します。

方向性の要件

各方向性について、次の内容を提示します。

• 短く、内容が伝わる名前。
• 中心となるアイデアと、ユーザーに期待する効果。
• 使用した 21st／プロジェクトの参考例。
• プロジェクトとの一貫性を保つ要素。
• 意味のある相違点を 2 つ以上。
• アクセシビリティまたはレスポンシブ対応のリスク。
• 最適な利用シナリオ。

ランダムなスタイル変更は生成しないでください。すべての相違点は、ユーザーが評価できるプロダクトまたはユーザビリティの仮説に基づく必要があります。