Cursor はブラウザ ビジュアル エディターを起動します。デザインとコードがシームレスに統合されます。 Cursorは、Cursorブラウザに統合された「ブラウザビジュアルエディタ」を正式にリリースしました。Webアプリケーション、コードベース、ビジュアル編集機能を1つのウィンドウに統合することで、開発者は直感的なドラッグ＆ドロップやクリック＆検索ツールチップを通じてインターフェース要素を直接操作・変更でき、設計アイデアとコード実装のギャップを埋めることができます。 コア機能と動作原理：ドラッグ＆ドロップによるレイアウト再配置：ユーザーはレンダリングされたDOMツリー上の要素を直接ドラッグ＆ドロップすることで、ボタンの順序を入れ替えたり、領域を回転したり、グリッドレイアウトをテストしたりできます。AIエージェントが関連コンポーネントを自動的に特定し、基盤となるコードを更新するため、CSSやJSXを手動で記述する必要がなくなります。 • コンポーネントの状態をテストする: React などのフレームワークを使用して構築されたアプリケーションの場合、サイドバーにコンポーネントのプロパティがリアルタイムで表示されるため、ユーザーはインタラクティブなコントロールを通じてさまざまなバリアントの状態をすばやく切り替えて検証できます。 • ビジュアル属性の調整：サイドバーには、スライダー、カラーピッカー、デザインシステムトークンなどのツールが統合されており、リアルタイムのスタイル微調整をサポートします。例えば、ユーザーはリアルタイムカラーピッカーを使用して、色を変更したり、グリッド/フレキシブルボックスレイアウトを調整したり、タイポグラフィを最適化したりできます。すべての変更は、AIエージェントによってソースコードに同期されます。 • クリックして変更するプロンプト：ユーザーはインターフェース要素をクリックした後、自然言語（「これを大きくする」「赤くする」「順番を入れ替える」など）を使って変更内容を説明できます。AIエージェントは複数のプロンプトを並行して処理し、数秒以内にリアルタイムで更新を適用します。この「クリックして選択する」インタラクションにより、変更プロセスはデザイナーとの会話のような感覚になります。 これらの機能により、設計とコーディングのプロセスが効率化されます。レンダリングされたビューから始まり、AIエージェントがドラッグ＆ドロップやプロンプトを通じてコードを変更し、最終的にブラウザでリアルタイムにコードをプレビューします。このアプローチにより、「実行メカニズムの創造性に対する制限」が軽減され、開発者は意図をより正確に表現できるようになります。 メリット：AI統合型ビジュアルエディターは、特にフロントエンド開発者やフルスタック開発者の開発効率を大幅に向上させます。抽象的なコードロジックを具体的なインターフェース操作に変換することで、ユーザーの「アイデアの表現」を向上させ、イテレーションサイクルを加速します。その核となるのがCursor AIです。このエージェントはコード更新だけでなく、マルチタスクの並列実行もサポートし、変更の安全性と可逆性を確保します。 例えば、「ある要素をクリックして『大きくして』と指示すると同時に、別の要素には『赤くして』、さらに3つ目の要素には『順番を入れ替えて』と指示できます。エージェントは並行して実行され、変更は数秒以内に反映されます。」これは、Cursorが描く「思考がコードに直接反映される」未来のビジョンを体現しています。 カーソル公式ブログ
