Cursor Browser 向けのビジュアルエディタをリリースしました。Web アプリ、コードベース、そして強力なビジュアル編集ツールを、同じウィンドウの中でシームレスに扱えます。要素をドラッグして動かし、コンポーネントや props をその場で検査し、ポイント＆クリックで変更内容を自然言語で指示できます。これにより、プロダクト内のインターフェースがより直感的で即時性の高いものとなり、デザインとコードのギャップを埋めます。

#ドラッグ＆ドロップで再配置

ビジュアルエディタを使うと、DOM ツリー上でレンダリングされた要素をドラッグ＆ドロップして動かしながら、サイトのレイアウトや構造を直接操作できます。

これにより、ビジュアルデザインとコーディングが一体化します。ボタンの並び順を入れ替えたり、セクションを回転させたり、さまざまなグリッド構成を試したりしても、コンテキストを切り替える必要はありません。ビジュアルデザインがイメージどおりになったら、その適用をエージェントに指示します。エージェントが関連するコンポーネントを特定し、裏側のコードを更新してくれます。

#コンポーネントの状態を直接テストする

多くのモダンなアプリは React で構築されており、コンポーネントはさまざまな状態を制御するためのプロパティを持ちます。ビジュアルエディタを使うと、これらの props をサイドバーに簡単に表示できるため、コンポーネントの異なるバリアント間で変更を加えやすくなります。

#ビジュアルコントロールでプロパティを調整

ビジュアルエディターのサイドバーでは、スライダーやパレット、独自のカラートークンやデザインシステムを使ってスタイルを細かく調整できます。すべての変更はインタラクティブに反映され、選択内容をプレビューできるリアルタイムなカラーピッカーに加え、グリッドや Flexbox レイアウト、タイポグラフィを精密に調整するコントロールも用意されています。

#クリックして指示

ビジュアルエディタでは、インターフェース上の任意の要素をクリックして、変更内容をその場で指示できます。ある要素をクリックして「これを大きくして」と指定し、別の要素には「これを赤にして」と指示し、三つ目には「順番を入れ替えて」と入力する、といったことが可能です。エージェントは並列で実行され、数秒で変更が画面に反映されます。

#抽象レベルを一段引き上げる

Cursor の新しいビジュアルエディタは、デザインとコードを横断して作業を統合し、実現したいことをより明確に表現できるようにすることで、実装が細かな手順に縛られないよう支援します。

私たちは、エージェントがウェブ上のアプリケーション構築とさらに深く結びつき、人間は思考とコードをより直接的につなぐインターフェースを通じてアイデアを表現する未来を思い描いています。これらの機能は、その実現に向けた一歩です。

Browser docs をご覧ください。Cursor 2.2 におけるすべての新機能について詳しく知ることができます。