［開発者向け］CursorのDesign Mode進化——要素選択・描き込み・音声で、エージェントにUI変更を指示する

2026-06-07

はじめに

　Cursorが2026年6月5日、ビジュアル編集機能「Design Mode」のアップデートを発表しました。実行中のアプリ上で要素をクリック選択したり、画面に描き込んだり、音声で指示したりすることで、エージェントへのUI変更指示がより直感的に行えるようになりました。本稿では、この更新内容を詳しく解説します。

参考記事

メイン記事:

タイトル: Design Modeで視覚的なプロンプトを使ってエージェントを指示する
著者: Erik Nilsson, Ian Huang & Ryo Lu
発行元: Cursor
発行日: 2026年6月5日
URL: https://cursor.com/ja/blog/design-mode

要点

Design Modeでは、実行中のアプリ上で要素をクリック選択し、その要素に対してプロンプトを送ることで、エージェントがコードを直接編集する
複数要素の同時選択、画面への描き込み（丸・四角などのアノテーション）、音声入力の3つの指示方法が用意されている
要素選択時、XPath・コンポーネント属性・計算済みスタイルなどの識別情報と、スクリーンショットによる空間的コンテキストの両方がエージェントに渡される
Composer 2.5との組み合わせを推奨しており、編集完了後はアプリがホットリロードされ変更をリアルタイムで確認できる
Browserのデザインサイドバーでは、位置・サイズ・色・シャドウなどをビジュアルコントロールで調整後、Applyでエージェントがコード反映を実行する

詳細解説

Design Modeとは何か

　Design Modeは、Cursorのエージェントウィンドウ上で動作するビジュアル編集インターフェースです。従来、エージェントへの指示はテキストチャットで行うのが一般的でしたが、UIの作業は本来、「この要素の余白が広すぎる」「この2つのコンポーネントを揃えたい」といった空間的なやり取りです。Design Modeは、その空間的な意思疎通をエージェントとの間で実現するために設計されています。

　Cursor 3のAgents Windowリリースから続く流れとして、今回の更新はエージェントがコードを編集している間も、開発者がプロダクト上で作業し続けられる体験を強化するものです。「見えているものとエージェントが理解するものの距離を縮める」というのが、Cursor自身が語る狙いです。

3つの指示方法

　Design Modeには、変更の意図をエージェントに伝えるための方法が3つ用意されています。

要素の選択

　実行中のアプリ内の任意の要素をクリックして選択し、その要素に対してテキストでプロンプトを出します。複数の要素を同時選択することも可能で、「2つのコンポーネントの一方をもう一方に合わせる」「グループをまとめて調整する」といった、要素間の関係に依存した変更にも対応します。

描き込み

　ページ上に丸や四角などのアノテーションを描くことで、指示が適用される領域をエージェントに伝えます。要素が密集したセクションを丸で囲んだり、アニメーションしている領域に印を付けたりするケースで特に有効です。注釈はビューポートの静止フレーム上に重ねて表示されるため、エージェントは指示を出した時点の正確なページ状態を確認できます。

音声入力

　今回のアップデートで新たに追加された機能です。音声入力と描き込みを組み合わせて変更内容を説明することもでき、テキストを打たずに指示を伝えられます。

エージェントへ渡されるコンテキスト

　要素を選択すると、エージェントには相互に補完し合う2種類の情報が渡されます。1つは要素の識別情報（XPath、コンポーネント名、属性、計算済みスタイル、React Fiber Treeからのprops）、もう1つはスクリーンショットによる空間的なコンテキスト（レイアウト、周囲の要素、正確なページ状態）です。

　この2つの組み合わせにより、エージェントはソースコード上の正確な変更箇所を特定し、効率よく編集を実行できます。テキストだけで「ヘッダー右端のボタンの色を変えたい」と伝えるより、要素を直接指し示す方がはるかに正確な指示になる、という点は直感的に理解しやすいと思います。

並行編集とモデルの選択

　Design Modeでは、1つの編集をエージェントが処理中でも、別の要素を選択して次の変更指示を送ることができます。あるコンポーネントを調整したら余白が気になり、さらに別の要素も調整したくなる、という連続した編集フローに対応しており、複数のサブエージェントを並行して管理しやすくなっています。

　Cursorは、このフローに適したモデルとして Composer 2.5 を推奨しています。速度が速くインターフェース作業に強い点がその理由です。編集が完了するとアプリはホットリロードされ、変更が実行中のプロダクトに即座に反映されます。

Browserのデザインサイドバー

　Cursorのブラウザ機能（Browser）には、サイト内を直接編集できるデザインサイドバーが付属しています。サイドバーでは次の項目をビジュアルコントロールで調整できます。

位置とレイアウト: flex direction・alignment・grid layoutの変更
サイズ: 幅・高さ・padding・marginをピクセル単位で調整
色: デザインシステムの色の更新、グラデーションの追加、カラートークンへのアクセス
外観: シャドウ・不透明度・border radiusのスライダー調整
テーマのテスト: ライトテーマとダークテーマで即座にプレビュー

　調整内容が想定どおりになったら「Apply」ボタンをクリックすると、エージェントが起動してビジュアル上の変更を適切なコード修正に変換します。複数の要素を選択してテキストで変更内容を説明した場合は、エージェントが並列で起動し、変更はホットリロード後にページ上へライブで反映されます。

セキュリティと承認モード

　Browserのツールはデフォルトで承認が必要な設定になっており、エージェントが実行する前に各アクションを確認できます。承認モードは3段階で設定可能です。

Manual approval: 各ブラウザアクションを個別に確認（推奨）
Allow-listed actions: 許可リストに一致するアクションは自動実行、それ以外は承認が必要
Auto-run: すべてのアクションを承認なしで即時実行

　注意: Auto-runモードは、信頼できないコードや見知らぬWebサイトでは使用しないことをCursorは強く推奨しています。エージェントが悪意のあるスクリプトを実行したり、機密データを送信したりするリスクがあるためです。許可リストの設定も定期的に見直すことが推奨されています。

　エンタープライズ向けには、エージェントが自動移動できるサイトを制限するオリジン許可リスト機能も提供されています。Settings Dashboard の MCP Configuration から設定可能で、組織内の全ユーザーに対してブラウザツールのアクセスを制御できます。

対応モデル

　Cursorのドキュメントによれば、Browserで最高のパフォーマンスを発揮するモデルとして Sonnet 4.5、GPT-5、Auto が推奨されています。

まとめ

　今回のDesign Modeアップデートは、エージェントへの指示をテキストから「視覚的な操作」に拡張するものです。要素選択・描き込み・音声という3つの入力手段を組み合わせることで、デザイナーやフロントエンド開発者が感覚的に行ってきたUI調整をエージェントと共同作業する形で実現できると思います。過去記事でも解説したAgents Windowと組み合わせて、どのような使い方が生まれるか注目です。