Cursor の更新されたデザインモード（3 分読了）

チャットはエージェントと作業するための一つのインターフェースですが、UI 作業は本質的に空間的なものです。デザイナー、プロダクトマネージャー、フロントエンド開発者は、要素や領域、あるいはページのステートに指し示す注釈を通じてコミュニケーションをとることがよくあります。 本日アップデートする「デザインモード」は、あなたが目にするものとエージェントが理解するものの間の距離を縮めるための仕組みの一部です。これにより、フローを中断することなく、コンテキスト内でプロダクトを直接編集できるようになります。 [Cursor ブラウザ](https://cursor.com/blog/browser-visual-editor)からは、任意の要素をクリックしたり、ページ上に描画したり、音声で変更内容を説明したりすることができ、Cursor は必要な文脈を取得してコードを編集します。その間、あなたは次の編集へと移ることができます。 これは、エージェントとの間でデザイン変更を反復する際により高速かつ簡単な方法です。なぜなら、指示はもはや単なる一文ではなく、選択された要素、その背後にあるコード、周囲のレイアウト、そしてページ上の視覚的な関係性を含めることができるからです。 これにより、「気づき」と「編集」の間のループがより密接になります。あなたは実行中のプロダクトから離れることなく、意図するインターフェース部分を指し示すことができ、エージェントが裏側で編集を行う間も、プロダクト自体に対して参照を続けながら作業を進めることができます。 ## 指差して、描画して、あるいは説明する デザインモードでは、エージェントに意図を伝えるための複数の方法を提供しています。要素を選択したり、複数の参照を追加したり、インターフェース上に描画したり、音声を使って変更内容を説明したりできます。 実行中のアプリ内の要素をクリックし、選択した要素に対してプロンプトを入力して、エージェントにコード編集を行わせてください。 変更が要素間の関係性に依存する場合、マルチセレクトは有用です。2 つのコンポーネントを参照して、一方を他方に一致させたり、重複するコンテンツを削除したり、一連のコンポーネントをまとめて調整するようにエージェントに指示できます。 複数の要素を選択し、それらがどのように一緒に変更されるべきかを記述してください。 指示がページのどの領域に適用されるかをエージェントに理解させる必要がある場合、描画機能は有用です。混雑した部分を円で囲んだり、特定の領域を四角で囲んだり、アニメーションページの一部にマークをつけたりできます。注釈はビューポートの凍結フレーム上に重ねられるため、エージェントはあなたが応答していたページの正確な状態を確認できます。 今回のリリースでは、音声を使って指示を伝えることも可能になり、ターゲット指定がより精密になり、体験も高速化されました。これにより、デザインモードでの視覚的なインタラクションが、通常の編集ループの一部であるかのような感覚になります。 変更を記述するために、音声入力と描画機能を組み合わせて使用してください。 内部では、要素を選択すると、コンテキストに 2 つの補完的なシグナルが追加されます。1 つは要素のアイデンティティ（xpath、コンポーネント、属性、計算されたスタイル、ファイバーツリーからのプロップス）であり、もう 1 つは空間的文脈のためのスクリーンショット（レイアウト、周囲の要素、および正確なページ状態）です。これにより、エージェントはソースを特定し、コードを効率的に編集するために必要な情報をすべて得ることができます。 ## ワークのリズムに合わせてモデルを調整する ユーザーインターフェースを洗練させる際、通常は1 つの編集が次の編集へとつながっていきます。コンポーネントを調整し、その周囲のスペースに気づき、別のコンポーネントがどのように一致すべきかを確認します。 Design Mode（デザインモード）を使えば、気づいた瞬間にその編集を送信できます。ある要素を指差して変更を説明し、ページの別の部分へ移動し、最初の編集が完了する前に次の編集を送信することも可能です。Design Mode はマルチタスクをより容易にし、複数のサブエージェントの管理も可能にします。 このフローは、ターゲットを絞った UI 変更を迅速に行えるモデルと最も相性が良いです。[Composer 2.5](https://cursor.com/blog/composer-2-5) は、インターフェース作業において高速かつ強力であるため、これに優れています。エージェントが完了するたびにアプリがホットリロードされ、実行中のプロダクト内で変更が表示されるのを確認しながら、インターフェースが適切になるまで続行できます。 私たちは、ソフトウェア構築の未来は、ユーザーがフロー状態（集中状態）で作業したいときに、より高レベルな抽象化と低レベルの詳細の間をシームレスに移動できるものであると考えています。Design Mode は、その実現を可能にするための制御権、自律性、そして精密な編集ツールをユーザーに提供します。 [Agents Window](https://cursor.com/docs/agent/agents-window) で Design Mode をお試しください。詳しくは [Browser docs](https://cursor.com/docs/agent/browser) をお読みいただくか、[Cursor](https://cursor.com/download) をダウンロードして始めましょう。

Cursor の更新されたデザインモード（3 分読了）

背景や根拠まで確認しますか？

調べる

選ぶ

サイト

背景や根拠まで確認しますか？

ニュースの次に確認する

調べる

選ぶ

サイト