Cursorブラウザ向けのビジュアルエディター
Cursor はブラウザ版エディタに視覚的編集機能を導入し、ドラッグ＆ドロップやプロパティ調整を通じてデザインとコードの隔たりを解消する新機能を発表した。
キーポイント
直感的なレイアウト操作
DOM ツリー上で要素を直接ドラッグ＆ドロップして配置を変更でき、ボタン順序の変更やグリッド構成のテストがコンテキストスイッチなしで可能になる。
React コンポーネント状態の可視化
サイドバーにプロパティを直接表示し、スライダーやカラーパレットを使ってスタイルを微調整できるため、異なるコンポーネントの状態を容易にテスト・変更できる。
ポイント＆プロンプトによる即時反映
インターフェース上の任意の要素をクリックして「大きくする」「赤くする」などの指示を出すと、エージェントが並列処理で数秒以内にコードを更新しリアルタイムで反映される。
デザインとコードの統合
視覚的編集ツールとコードベースを同一ウィンドウに統合することで、設計意図の実装における機械的な制約を取り除き、思考からコードへの接続を強化する。
影響分析・編集コメントを表示
影響分析
この発表は、AI エージェントがコード生成だけでなく、実際の UI レイアウトやスタイル変更を視覚的インターフェースを通じて直接実行できる能力を獲得したことを示しており、開発者の生産性向上とデザイナーとエンジニアの協業プロセスの変革に大きな影響を与える。特に「ポイント＆プロンプト」機能は、技術的な知識が浅いユーザーでも複雑な UI 修正を直感的に行えるようになり、ソフトウェア開発の民主化を加速させる可能性を秘めている。
編集コメント
従来のコードベースの編集から、視覚的インターフェースを介した直接的な操作へとパラダイムがシフトする重要な一歩であり、AI エージェントの実行能力が「生成」から「実行・修正」へ進化していることを示す好例です。
Cursor Browser向けビジュアルエディター
この度、Cursor Browser向けビジュアルエディターのリリースをお知らせします。このエディターは、Webアプリ、コードベース、そして強力なビジュアル編集ツールをすべて同じウィンドウに統合します。要素をドラッグで移動させたり、コンポーネントとプロパティを直接検査したり、ポイント＆クリックしながら変更を指示したりできます。これにより、プロダクトのインターフェースはより即時的で直感的になり、デザインとコードの間のギャップを埋めます。
#ドラッグ＆ドロップで再配置
ビジュアルエディターでは、DOMツリー上のレンダリングされた要素をドラッグ＆ドロップすることで、サイトのレイアウトと構造を直接操作できます。
これにより、ビジュアルデザインとコーディングが統合されます。コンテキストを切り替えることなく、ボタンの順序を入れ替えたり、セクションを回転させたり、さまざまなグリッド構成をテストしたりできます。ビジュアルデザインが思い描いたものと一致したら、エージェントに適用を指示します。エージェントは関連するコンポーネントを特定し、基盤となるコードを更新してくれます。
#コンポーネントの状態を直接テスト
多くのモダンなアプリはReactで構築されており、コンポーネントには異なる状態を制御するプロパティがあります。ビジュアルエディターは、これらのプロパティをサイドバーに簡単に表示し、コンポーネントのさまざまなバリアントに対して変更を加えられるようにします。
#ビジュアルコントロールでプロパティを調整
ビジュアルエディターのサイドバーでは、スライダー、カラーパレット、独自のカラートークンやデザインシステムを使ってスタイルを微調整できます。すべての調整は完全にインタラクティブです。選択をプレビューするライブカラーピッカーや、グリッド、フレックスボックスレイアウト、タイポグラフィを精密に調整するコントロールが含まれます。
#ポイントして指示
ビジュアルエディターでは、インターフェース内のあらゆる要素をクリックし、変更したい内容を記述することもできます。ある要素をクリックして「これを大きくして」と言ったり、別の要素に対して「これを赤にして」と指示したり、3つ目の要素に対して「順序を入れ替えて」と入力したりできます。エージェントは並行して動作し、数秒以内に変更がライブで反映されます。
#抽象化の階層を高める
Cursorの新しいビジュアルエディターは、デザインとコードにわたる作業を統合し、実行が操作の手順に制限されないよう、あなたの意図をより的確に表現する手助けをします。
私たちは、エージェントがWeb上でのアプリ構築により深く結びつき、人間が思考をコードにより直接的に結びつけるインターフェースを通じてアイデアを表現する未来を見据えています。これらの機能は、その未来に向けた一歩です。
Browserのドキュメントを読む。Cursor 2.2のすべての新機能について学ぶ。
原文を表示
We're excited to release a visual editor for the Cursor Browser. It brings together your web app, codebase, and powerful visual editing tools, all in the same window. You can drag elements around, inspect components and props directly, and describe changes while pointing and clicking. Now, interfaces in your product are more immediate and intuitive, closing the gap between design and code.
#Rearrange with drag-and-drop
The visual editor lets you manipulate a site's layout and structure directly by dragging and dropping rendered elements across the DOM tree.
This unifies visual design with coding. You can swap the order of buttons, rotate sections, and test different grid configurations without ever context-switching. Once the visual design matches what you had in mind, tell the agent to apply it. The agent will locate the relevant components and update the underlying code for you.
#Test component states directly
Many modern apps are built in React, where components have properties to control different component states. The visual editor makes it easy to surface these props in the sidebar so you can make changes across different variants of a component.
#Adjust properties with visual controls
The visual editor sidebar lets you fine-tune styles with sliders, palettes, and your own color tokens and design system. Every tweak is fully interactive: live color pickers that preview your choices, as well as controls to rearrange grids, flexbox layouts, and typography with precision.
#Point and prompt
The visual editor also lets you click on anything in your interface and describe what you want to change. You could click on one element and say, "make this bigger," while on another you prompt, "turn this red," and on a third you type, "swap their order." The agents run in parallel, and within seconds your changes are live.
#Up the abstraction hierarchy
Cursor's new visual editor unifies your work across design and code, helping you better articulate what you want so that execution isn't limited by mechanics.
We see a future where agents are even more deeply connected to building apps on the web, and humans express their ideas through interfaces that connect thought to code more directly. These features are a step in that direction.
Read the Browser docs. Learn about all the new features in Cursor 2.2.
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み