Visual Editorとは？

Visual Editorは、Cursor Browser内の新機能で、AIエージェントが連携して基盤となるコードを更新しながら、Webアプリケーションを視覚的に編集できる機能です。Webアプリ、コードベース、ビジュアル編集ツールを1つのウィンドウに統合し、デザインと開発のギャップを埋めます。要素のドラッグ、コンポーネントとそのプロパティの検査、ポイント＆クリックによる変更の記述を、ワークフローから離れることなく行えます。

対象ユーザー

• フロントエンド開発者: コードファイルを手動で探し回ることなく、UIレイアウトやスタイルの反復作業を高速化したい方。
• デザインエンジニア: ブラウザ上で直接ライブ調整を行うことで、ビジュアルモックアップとプロダクションコードのギャップを埋める必要がある方。
• React開発者: コンポーネントベースのアーキテクチャで作業し、さまざまな状態、プロパティ、スタイルのバリエーションをその場でテストする必要がある方。

主な機能

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

ビジュアルエディタを使用すると、レンダリングされた要素をDOMツリー上でドラッグ＆ドロップすることで、サイトのレイアウトや構造を直接操作できます。ボタンの順序を入れ替えたり、セクションを回転させたり、さまざまなグリッド構成をテストしたりする際に、コンテキストスイッチが発生しません。ビジュアルデザインが思い描いたものと一致したら、エージェントに適用を指示するだけです。エージェントが関連するコンポーネントを特定し、基盤となるコードを更新します。

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

Reactで構築された最新のアプリは、コンポーネントのプロパティを使用してさまざまな状態を制御します。ビジュアルエディタはこれらのプロパティをサイドバーに表示し、バリエーションを簡単に切り替えて各状態のレンダリング結果を確認できます。これにより、さまざまな条件下でのコンポーネントの動作に関する即時フィードバックが得られます。

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

サイドバーには、スタイルを微調整するためのスライダー、カラーパレット、独自のデザインシステムトークンが用意されています。すべての調整は完全にインタラクティブで、ライブカラーピッカーが選択内容をプレビューし、コントロールを使用してグリッド、フレックスボックスレイアウト、タイポグラフィを正確に再配置できます。変更はブラウザに即座に反映されます。

ポイント＆プロンプト

インターフェース上の任意の要素をクリックし、変更したい内容を記述します。ある要素をクリックして「これを大きくして」と指示し、別の要素をクリックして「これを赤くして」とプロンプトを送り、3つ目の要素に「順序を入れ替えて」と指示することもできます。エージェントは並行して動作し、数秒以内に変更が反映されます。

特筆すべき点

「ビジュアルエディタは、デザインとコードにわたる作業を統合し、実装が仕組みに制限されないように、希望する内容をより明確に表現できるようにします。」

これが核心的な洞察です。ビジュアルアイデアを手動でコードに変換することを強制する代わりに、Visual Editorではドラッグ＆ドロップ、ポインティング、自然言語を通じて自然に変更を表現できます。エージェントがコード変換を処理するため、実装の詳細ではなくデザインの意図に集中できます。これは、エージェントがアプリ構築に深く関与し、人間が思考とコードをより直接的に結びつけるインターフェースを通じてアイデアを表現する未来への一歩です。

こんな方におすすめ

Webアプリケーションを構築し、UIの反復サイクルを高速化したい方。ブラウザ、コードエディタ、デザインツールを行き来して単純なレイアウトやスタイルの変更を行うのにうんざりしている場合、Visual Editorは統合されたアプローチを提供します。特に、Reactコンポーネントを扱い、複数の状態をテストする必要がある場合や、リアルタイムで変更が適用されるのを確認したいデザイナーと協業する場合に価値があります。