1DesignTool の最短ルートは、ブリーフ 1 回とステアリング 1 回、約 5 分です。このページではそのループをたどります。新しいプロジェクト、最初の実行、そして最初の修正です。この後のドキュメントの全体像がつかみやすくなります。
プロジェクトを作成する
ホーム画面から New project を押します。あるいはホームのコンポーザーにデザインをそのまま書けば、アプリがプロジェクトを作成します。テンプレートを選ぶと、出力形式(スライドデッキ、モバイル画面セット、UI モックアップ)がエージェントに伝わり、対応するビューアとチェックが読み込まれます。Blank を選ぶと、形式はブリーフ任せになります。
最初のブリーフを書く
良い最初のブリーフには、アイデア、対象読者、雰囲気が入っています。仕様書ではなく、1〜2 文で十分です。「コーヒーのサブスクリプションのランディングページ。ダークで、エディトリアル、力強いタイポグラフィ」で OK です。Send で送ると実行が始まります。コンポーザーにはエージェントの作業状況が表示され、実際のファイルがプロジェクトフォルダに書き込まれるたびにプレビューパネルが埋まっていきます。
ターンが終わるとゲートが報告します。Design checks が緑なら、結果は kit のルール(コントラスト、文字サイズ、ヒットターゲット、あらゆる幅で動くナビゲーション)を通過しています。結果は右パネルでライブのままです。ホバーし、クリックして中を進み、幅をドラッグしてみてください。
1 回ステアリングしてみる
見出しが気に入らない? プレビューで ⌥-click して、1 行書きます。「ここを引き締めて、最大 2 行で」と送れば、コメントはエージェントが読むピンとして届き、次のターンでまさにその箇所が修正されます。方向性を大きく変えたいときは、代わりにコンポーザーに追記します。
ヒント: ステアリングするのは how ではなく what です。「
margin-top: 4remを追加して」より「ファーストビューの上に余白を」の方がうまくいきます。design kit があなたの指示を、プロジェクト全体で一貫したトークンに翻訳します。
さらに進める:モバイルアプリを MCP で再デザイン
同じループは、もっと大きな成果物にもスケールします。ここでは Mobile app プロジェクトが習慣トラッキングアプリ(Today リング、 ストリーク、統計画面)をネイティブな SwiftUI スタイルで組み立て、続けて MCP client(Cursor)がアプリの外から次のターンを駆動します。 アクセントを変え、リングを太くし、週次チャートを加える再デザインです。
外部ターンも他と同じように着地します。バブルには via MCP · Cursor タグが付き、実行はトランスクリプトでライブに進み、終わるとゲートが報告 します。スタジオは止まりません。クライアントはその実 API を使うだけです。
MCP — 任意のエージェントからスタジオを動かす では、サーバー、アクセスパネル、クライアントが呼べる内容を扱います。