Cursor、ブラウザの Design Mode

Cursor は Cursor ブラウザの Design Mode を更新した。実行中のアプリ上で要素をクリック・描き込み・音声入力し、選択した UI とその背後のコード、周囲のレイアウト、ページ上の視覚的な関係をまとめてエージェントに渡せる。エージェントウィンドウから利用できる。

変更意図の伝え方は次のとおり。

単一要素をクリックして、その要素に対するプロンプトでコード編集を依頼する。
複数要素を同時に選択し、一方を他方に合わせる、重複を除く、コンポーネント群をまとめて調整するなど、要素間の関係に基づく変更を指示する。
ページ上に丸や四角で領域を囲み、アニメーション中の一部に印を付けるなど、注釈で適用範囲を示す。注釈はビューポートの静止フレームに重ね、指示時点のページ状態をエージェントが参照する。
音声で変更内容を説明する。今回の更新で音声入力が加わり、対象指定の精度と操作速度も改善された。

要素を選ぶと、コンテキストには xpath・コンポーネント・属性・計算済みスタイル・fiber tree の props といった識別情報と、レイアウトや周囲要素を含むスクリーンショットの 2 種類が載る。

UI の調整では、1 件の編集が終わる前に別の要素へ移って次の指示を送れる。並行作業と複数サブエージェントの管理がしやすくなる。狙いを絞った UI 変更には Composer 2.5 が速度とインターフェース作業の強さから適している。エージェント完了のたびにアプリはホットリロードされる。