Cursorブラウザ向けのビジュアルエディター
本文の状態
日本語全文を表示中
詳細モードで約3分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
Cursor Blog
Cursorブラウザが、デザイナーとエンジニアの協業を促進するビジュアルエディターを提供する。
Source Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
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.
News to Guide
ニュースの次に確認する
発表内容を、現在の料金や仕様と照らし合わせられる関連ガイドです。
今日のまとめ
AIデイリーブリーフで今日の重要ニュースをまとめ読み