概要
AIコードエディタCursorは12月11日、新機能「Visual Editor（ビジュアルエディタ）」を発表した。Webアプリ、コードベース、ビジュアル編集ツールを1つのウィンドウに統合し、従来のデザインツールとコーディングの境界を取り払う革新的なアップデートとなっている。
主な機能
ドラッグ&ドロップ操作
要素を選択して、ドラッグ&ドロップで順番の入れ替えや位置変更が可能。従来はコードを直接編集する必要があった操作を、視覚的に行えるようになった。
CSSプロパティの直接編集
右側のインスペクターパネルから、以下のようなCSSプロパティを直接変更できる：
- フォントサイズ・行間
- 余白（margin/padding）
- 角丸（border-radius）
- 透明度（opacity）
- レイアウト設定
AIによる自動プロンプト生成
ビジュアルで変更した内容をCursorのAIが自動的にプロンプトとして解釈し、実際のコードに反映する。「やりたいこと」がわかっていれば、プログラミング知識がなくてもサイトに変更を加えることができる。
従来のデザインツールとの違い
WIREDでは「デザイナー向けのvibe-codingツール」と評されている。従来のデザインツール（Figmaなど）が独自の抽象化を使用するのに対し、Cursorのビジュアルエディタは実際のCSSにマッピングされる。
これにより、デザイナーは象徴的な近似ではなく、実際にシップするシステムの中で作業することができる。
現在の課題
フォーラムでは、以下のような問題が報告されている：
- 複数要素を選択する際に新しいチャットが開いてしまうバグ
- 既存のエージェントチャットに要素を追加できない問題
Cursorチームは「現在修正中」と回答しており、早期の解決が期待される。
今後の展望
このアップデートは、開発者とデザイナーの協働方法を根本的に変える可能性がある。コードベース上で直接ビジュアル編集できることで、デザイン→コード化という従来のワークフローがより効率化されると期待されている。
現在のバージョン（2.2.14）で利用可能。