21st-ui-build

プロジェクトを理解した UI の構築

プロダクトのアイデンティティを保ちながら、21st を活用して実装を効率化します。

ワークフロー

1. .21st/design.json と .21st/DESIGN.md を読みます。どちらも存在しない場合は、 21st init --design-context を実行します。

2. 対象ルート、そのルートに最も近いコンポーネント、プロジェクトの指示、既存のトークンを確認します。明示されたプロジェクトの事実は、一般的な好みより優先します。

3. 生成する前に検索します。

   21st search "<specific UI need>" --context auto
   

4. まず、インストール済みのプロジェクトのプリミティブを再利用します。重複を減らす、または結果を大幅に改善する場合に限り、21st の検索結果を取得またはインストールします。

5. 適合する結果がない場合は、MCP の get_usage.aiGenerationEnabled を確認するか、21st usage を実行して 21st AI generation の行を読みます。CLI 1.17.1+ では 21st usage --json も使用できます。AI が明示的に有効な場合に限り、利用可能な AI クレジットを使って、プロジェクトに適した代替案を生成します。

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

   それ以外の場合は、21st search と 21st get（MCP の場合は search と get_component）の結果に基づき、自身のコーディングエージェントで代替案を実装します。AI アクセスがない場合、ホスト型の generate や iterate_generation を呼び出したり、提案したりしないでください。

6. 選択した方向性を、プロジェクトで実際に使用されているフレームワークで実装します。プロジェクトが React コンポーネント、トークン、確立された API を使用している場合、スケッチ用の HTML をそのまま貼り付けないでください。

7. レスポンシブ動作、キーボード操作、視認可能なフォーカス、セマンティクス、動きの軽減、読み込み状態、空の状態、エラー状態を維持します。

8. プロジェクトのチェックと 21st review <changed paths> を実行します。自動適用するのは、安全で決定的な修正に限ります。

デザインルール

• 新たに任意の値を追加するより、プロジェクトのトークンを優先します。
• 似たものを並行して作るより、既存のコンポーネントを優先します。
• ユーザーから明示的に再デザインを依頼されない限り、既存の密度、角丸、タイポグラフィ、アイコン、レイアウトのリズムを維持します。
• 利用可能な場合は、実際のプロダクトの文言と状態を使用します。
• プロジェクトで使用されている、またはユーザーから依頼されている場合を除き、装飾的なグラデーション、過剰なカード、ガラス効果、大きすぎる見出し、アニメーションは避けます。
• コンポーネント、トークン、機能が存在すると、確認せずに断言しないでください。

引き継ぎ

使用した方向性、再利用した 21st／プロジェクトのコンポーネント、変更したファイル、実施した検証を報告します。ユーザーが新しい方向性を選択した場合は、長期的に参照できるビジュアル上の選択を .21st/design.json の decisions に記録します。