チャットはエージェントと作業するためのインターフェースの1つですが、UIの作業は空間的なやり取りになりがちです。デザイナー、PM、フロントエンド開発者は、多くの場合、要素や領域、ページの状態を指し示す注釈を通じて意思疎通します。

本日更新するDesign Modeは、見えているものとエージェントが理解するものの距離を縮める取り組みの一環です。これにより、流れを止めることなく、コンテキストの中でプロダクトを編集できます。

Cursor browserからは、任意の要素をクリックしたり、ページに描き込んだり、変更内容を音声で説明したりできます。するとCursorが、次の編集に進んでいる間にコードを編集するために必要なコンテキストを取得します。

指示はもはや単なる文章ではなく、選択した要素、その背後にあるコード、周囲のレイアウト、ページ上の視覚的な関係も含められるため、エージェントと一緒にデザイン変更をすばやく簡単に反復できる方法です。

これにより、気づいてから編集するまでのループがさらに短くなります。実行中のプロダクトを離れることなく、意図したインターフェース上の箇所を指し示し、そのままプロダクト自体を基準に参考資料を使い続ける一方で、裏側ではエージェントが編集を進めます。

#変更箇所を指定し、描き込み、または音声で伝える

Design Mode には、変更の意図をエージェントに伝えるための方法がいくつか用意されています。要素を選択したり、複数の参考資料を追加したり、インターフェース上に描き込んだり、変更内容を音声で説明したりできます。

複数選択は、変更内容が要素同士の関係に依存する場合に役に立ちます。2 つのコンポーネントを参照して、一方をもう一方に合わせるようエージェントに依頼したり、重複した内容を削除したり、コンポーネントのグループをまとめて調整したりできます。

描き込みは、指示がページのどの領域に適用されるのかをエージェントが把握する必要がある場合に役に立ちます。要素が密集したセクションを丸で囲んだり、特定の領域を四角で囲んだり、アニメーションしているページの一部に印を付けたりできます。注釈はビューポートの静止フレーム上に重ねて表示されるため、エージェントはその指示を出した時点の正確なページ状態を確認できます。

今回のリリースでは、音声を使って指示を伝えられるようになったほか、対象指定の精度が向上し、操作もより高速になりました。これにより、Design Mode での視覚的なやり取りが、普段の編集ループの自然な一部として感じられるようになります。

内部では、要素を選択すると、相互に補完し合う 2 つのシグナルがコンテキストに追加されます。1 つは要素の識別情報 (xpath、コンポーネント、属性、計算済みスタイル、fiber tree からの props) 、もう 1 つは空間的なコンテキストを示すスクリーンショット (レイアウト、周囲の要素、正確なページ状態) です。これにより、エージェントはソースを正確に見つけ、効率よくコードを編集するために必要な情報を得られます。

#作業のリズムに合うモデル選び

ユーザーインターフェースを磨いていく作業では、ひとつの編集が次の編集につながることがよくあります。あるコンポーネントを調整すると、その周囲の余白が気になり、さらに別のコンポーネントもそれに合わせる必要が見えてきます。

Design Mode なら、そうした編集を気づいたその場で送れます。ひとつの要素を指して変更内容を伝え、ページの別の場所に移って、最初の編集が終わる前に次の編集を送ることもできます。Design Mode を使えば、より簡単に並行して作業でき、複数のサブエージェントの管理もしやすくなります。

このフローは、狙いを定めた UI の変更をすばやく行えるモデルで特に力を発揮します。Composer 2.5 は、速度が速くインターフェース作業にも強いため、こうした用途に適しています。エージェントが完了するたびに、アプリはホットリロードされます。変更が実行中のプロダクトに反映されるのを確認しながら、インターフェースがしっくりくるまで作業を続けられます。

私たちは、これからのソフトウェア開発では、ユーザーが必要に応じて高い抽象度と低レベルの詳細をシームレスに行き来し、望むときにはフロー状態のまま作業できるようになると考えています。Design Mode は、それを可能にするコントロール性、主導権、そして精密な編集ツールをユーザーに提供します。

エージェントウィンドウ で Design Mode をお試しください。詳しくは Browser ドキュメントを読むか、Cursor をダウンロードして使い始めてください。