実行のしくみ

1DesignTool のすべてのデザインは、同じ 5 ステップのループを通ります。このループを一度理解すれば、ドキュメントの他のすべてのページが予測可能になります。ステアリング、バリアント、エクスポート、Build mode はすべて同じ実行を別の角度から見たものです。

1. ブリーフ

composer(コンポーザー)にやりたいことを書きます。これはすべてのプロジェクトの下部にある入力欄で、新規プロジェクトならホーム画面のボックスです。ブリーフは、テンプレート、デザインシステムのルール、あなたが付けたピン・コメント・ファイルと一緒にエージェントへ送られます。コンポーザーのエージェントチップには、その実行で使う CLI とモデルが表示されます。

2. 構築

アプリはプロジェクトフォルダ内でエージェントをヘッドレスサブプロセスとして起動し、ブリーフと design kit を渡します。design kit とは、すべてのプロジェクトにコピーされる平文のルールブック(.claude/skills/ など)で、ここでの「良い」が何を意味するかをエージェントに伝えます。コントラストの下限、タイプスケール、ヒットターゲットサイズ、マークアップ構造です。エージェントは実際のファイルを書き、プレビューはフォルダを監視して、ファイルが書き込まれるたびに再描画します。

3. ゲート

ターンが終わると、ゲートが結果を kit に照らしてチェックします。テキストのコントラスト、最小フォントサイズ、コントロールのターゲットサイズ、スマートフォンとタブレット幅でのナビゲーションの破綻です。PASS なら結果はそのまま使えます。FAIL なら、どのルールがどこで破られたかが一覧され、その結果を一行の修正ブリーフとしてエージェントに送り返せます。design kit ゲートを参照してください。

4. ステアリング

ここでドラフトをデザインに仕上げます。⌥-click で要素にコメントをピン留めしたり、Tweaks でエージェントが公開するライブコントロールを開いたり、方向性を大きく変える追記ブリーフを書いたりします。各ステアリングは同じループの新しいターンです。エージェントが再構築し、ゲートが再チェックします。

5. 出荷

結果が正しければ、Share / export がパッケージ化します。ZIP、HTML、PNG、PDF、MP4 など、テンプレートのエクスポートセットに従います。プロジェクトフォルダはあなたが置いた場所に残り、すべてのバージョンは履歴から復元できます。

ヒント: ループは繰り返すほど安く回せます。同じブリーフで 3 つの variants を実行し、ブラインド比較して勝者を採用する方が、答えを推測しようとする長いブリーフ 1 本よりうまくいきます。

関連ページ