Cursor 2026年6月5日の公式ブログ解説: デザインモードはUI修正を視覚プロンプトにする

Cursor は 2026年6月5日、デザインモードの更新を公式ブログで紹介しました。実行中の画面をクリック、複数選択、描画、音声で指示し、エージェントにUI修正の文脈を渡すための機能です。

要点

• Cursor browser 上の要素をクリックし、その要素に対してエージェントへ修正指示を出せます。
• 複数要素の選択、画面上への描画、音声入力により、UI修正の意図をテキストだけでなく視覚的に伝えられます。
• 選択した要素のXPath、コンポーネント、属性、計算済みスタイル、プロパティ、スクリーンショットなどが文脈として渡されます。
• Composer 2.5 は、速くターゲットを絞ったUI変更に向くモデルとして位置づけられています。
• フロントエンド開発では、指示の精度だけでなく、差分確認、ホットリロード、アクセシビリティ、レスポンシブ確認が重要です。

今回のブログ記事で語られていること

このブログ記事は、チャットだけでUI作業を指示する限界から始まります。UIの修正は空間的です。デザイナーやPM、フロントエンド開発者は、「この余白」「このボタン」「この並び」「この状態の表示」のように、画面上の位置や関係を指しながら話すことが多いです。デザインモードは、その視覚的な指示をエージェントが理解できる形に変える機能として説明されています。

更新されたデザインモードでは、Cursor browser で動いているアプリ上の要素をクリックし、その要素に対して変更を依頼できます。複数要素を選択すれば、片方をもう片方に合わせる、重複した内容を消す、グループ全体の見え方をそろえる、といった関係性を含む指示が可能になります。描画は、混み合った画面の一部を囲んだり、アニメーション中の状態を固定して示したりする場面に向いています。さらに音声入力も入り、エージェントの作業中に次の修正を口頭でキューに入れるような流れが想定されています。

技術的には、選択された要素の情報が重要です。公式記事では、要素のXPath、コンポーネント、属性、計算済みスタイル、Fiberツリー由来のプロパティ、そしてスクリーンショットが文脈として渡されると説明されています。これにより、エージェントは「画面のどれを指しているのか」と「コード上でどこを直すべきか」を結びつけやすくなります。フロントエンド修正では、プロンプトの文章力だけでなく、対象要素と周囲のレイアウトを正しく渡せることが品質を左右します。

Cursor は、この作業のリズムに Composer 2.5 が合うとも説明しています。UI調整は、一つ修正すると次の違和感が見える反復作業です。デザインモードでは、ひとつの変更を送ったあとに、別の場所を見て次の変更を送ることができます。エージェントが終わるたびにアプリがホットリロードし、実行中の画面で確認しながら続けられるため、テキスト指示、画面確認、コード編集の距離を縮める狙いがあります。

背景にあるテーマ

AIコーディングエージェントは、コードだけでなく実行中のプロダクト画面を理解する方向に進んでいます。UI修正では、DOM、コンポーネント、見た目、利用者の意図が分離しやすいため、視覚的なコンテキストを渡せることが重要になります。

今回のブログ記事が関係する人

Cursor でフロントエンド開発をしているチーム、デザイナーやPMとAIエージェントをつなぎたい開発組織、UIの細かな修正を高速に回したいプロダクトチームに関係します。

どう読むと価値があるか

デザインモードは便利ですが、UI修正の最終確認を省けるわけではありません。視覚的に指示できるほど、意図しない隣接要素の変更、レスポンシブ崩れ、アクセシビリティ属性の欠落、デザインシステムからの逸脱も起きえます。使うなら、変更後に複数ビューポート、キーボード操作、読み上げ、差分を確認する流れを残すべきです。

結局、今回のブログ記事をどう読むべきか

デザインモードは、UI修正の指示を文章だけから画面上の対象へ近づける更新です。Composer 2.5 と組み合わせることで、画面を見ながらエージェントへ小さな変更を連続して任せる開発体験を狙っています。