スキル自身の言葉で
トースト、料金カード、ホールドして削除するボタンなど、一度に1つの UI パーツを探索するための発散系スキルです。記述されたパーツを受け取り、指定された軸（レイアウト、密度、パーソナリティ、モーション、インタラクションモデル）に沿って本当に異なる複数のバージョンを構築し、ビジュアルピッカーの背後に配置することで、ユーザーがライブで切り替えながら確認し、優れたものを本採用できるようにします。
このスキルは明示的に呼び出されたときのみ実行され、既定では3種類のバリアントを生成し、探索用のコードを本番コードに混在させず、バリアントが統合された時点でプロトタイプ用の表面を削除します。
生成されるもの
- バリアントを保持するライブビジュアルピッカーで、切り替えながら確認し、1つを本採用できます。
- 各バリアントの軸、それが最適な選択となる場面、コストを示す比較表です。
- 選択されたバリアントの本番コードで、コードベースに統合され、プロトタイプ用の表面は削除されています。
- ブラウザツールが利用可能な場合の、各バリアントのスクリーンショットです。
仕組み
- 011つのパーツに範囲を絞る
ブリーフが複数のコンポーネントにまたがる場合、このスキルは最も効果の高い単一のパーツを選び、どれをなぜ選んだかを説明し、残りはフォローアップの実行として提案します。
- 02現場を偵察する
フレームワーク、スタイリングシステム、モーションライブラリ、トークン、プロダクトのパーソナリティ、そしてそのパーツがレンダリングされるコンテキストをマッピングし、バリアントがプロダクトにネイティブに見えるようにします。
- 03まず方向性に名前を付ける
既定では3種類のバリアントを生成し、要求された場合や空間が本当に広い場合は最大5種類まで対応します。コードを書く前に、それぞれに名前と軸が与えられます。
- 04ピッカーハーネスを構築する
プロジェクト内では、独立したルートがバリアントごとに1ファイルと小さなハーネスファイルを保持します。ピッカー自体は設計するのではなく、PICKER.md からコピーされます。
- 05表示前に検証する
ハーネスが実行され、すべてのバリアントがレンダリングとインタラクションの正しさについて切り替えながら確認されます。ブラウザツールがある場合はスクリーンショットも取得します。
- 06勝者を本採用する
ユーザーが選択した後、そのバリアントはプロジェクトのファイル構成、命名、トークンの使用方法に従って統合され、プロトタイプ用の表面は削除されます。