カーソルがデザインの引き継ぎを台無しにした

Cursorは、フロントエンド開発で最も煩わしいループをほぼ違法なものに感じさせるようにしました。Figma、コードエディタ、そしてCmd+Rを連打するChromeタブの間を行き来する代わりに、Cursorの新しいビジュアルエディタは、内蔵ブラウザの中に直接存在し、表示されているものの背後にある実際のコードを編集します。

数週間前、CursorはIDE内にフルブラウザペインを追加しましたので、エディタを離れることなく`localhost`にアクセスできるようになりました。今、そのブラウザにFigmaスタイルのサイドバーが加わりました：要素を選択をクリックし、ページ上の任意のものにカーソルを合わせると、レイアウト、タイポグラフィ、スペーシング、背景、境界線、影などのコントロールが表示されます。

それは、デザイナーがモックアップを提供し、開発者がそれをHTML/CSSに変換し、リフレッシュして調整し、再びリフレッシュするという従来の流れが崩れ始めることを意味します。カードをドラッグしたり、パディングを調整したり、3×2グリッドを視覚的に2×3に入れ替えたりして、適用ボタンを押すと、CursorのAIが基盤となるReactまたはNext.jsのコードを書き換え、その後プレビューをリロードします。

三つのツールと二つのメンタルモデルを使い分ける代わりに、デザインツールのように振る舞いながらIDEのように確実に動作する一つのキャンバスで作業します。エディターは次の機能を提供します： - グリッド、フレックス、行、列、自由形式の配置のためのレイアウトコントロール - フォント、サイズ、色、行間、整列、ぼかし、シャドウのための外観コントロール - パディング、マージン、ギャップ、および寸法のためのスペーシングコントロール

そのワークフローは「Figmaキラー機能」の見出しを技術的には間違っているが、方向性としては正しい。CursorはFigmaのコラボレーション、プロトタイピング、またはデザインシステムを置き換えようとしているのではなく、美しいフレームと動作するコンポーネントの間にある手渡し自体、つまり遅い翻訳レイヤーを狙っている。

デザイナーはCSSに触れることなく、生産的なようなUIを調整でき、開発者は自分のコードベースに留まり、AIにボイラープレートの編集を任せることができます。このツールは役割の境界を曖昧にします。オートレイアウトを調整する人とJSXを編集する人は同じ場合もあり、同じウィンドウで同じライブプレビューを使って作業しています。

パラダイムシフトと呼ぶべきか、単なる時代遅れのアップグレードと呼ぶべきかはともかく、効果は明白です。Cursorのビジュアルエディタは、フロントエンドの作業を「編集、保存、リフレッシュ」から「確認、ドラッグ、適用」へと変え、AIが静かにコードをバックグラウンドで組み立てています。

カーソルは今や、あなたのIDEをファイルエディタのサイドにプレビューが付いたものではなく、ライブブラウザウィンドウのように扱います。この新しいコンボは、内蔵カーソルブラウザをビジュアルエディタパネルと組み合わせており、実行中のアプリの上に直接表示されます。もうChromeやSafariに切り替える必要はなく、あなたのローカルホストは文字通りカーソル内の別のペインです。

開発サーバーを立ち上げると、あなたのアプリがこの埋め込まれたブラウザに瞬時に表示されます。アドレスバーも含めて、`localhost:3000` にアクセスし、クリックしたり、モーダルを表示させたり、長いページをスクロールしたりすることが、通常のサイトと同じように可能です。コンテキストの切り替えが一つのワークスペースに集約されるため、デザインの調整、コードの編集、ビジュアルチェックが一連の流れで行えます。

要素を選択ボタンをクリックすると、カーソルはChrome DevToolsとFigmaが融合したようなモードに切り替わります。ページ上にカーソルを合わせると、単一の`<span>`から全体のグリッドセクションまで、すべてのDOMノードがその場所でハイライトされます。1回クリックすることで選択が固定され、右側のビジュアルエディターパネルに接続されます。

そのパネルは、実際のコードにマッピングされた密なコントロールのセットを表示します。次のことができます： - 要素をドラッグしてレイアウト内で順序を変更する - レイアウトタイプを切り替える（グリッド、行、列、自由形式） - スライダーを使ってパディング、マージン、ギャップ、高さを調整する

外観の制御も同様に深くまで及びます。フォントファミリー、サイズ、色、配置、行の高さ、間隔、背景、境界線、影、ぼかしが、ライブ要素からわずか数ピクセル離れた位置にあります。見出しを別のフォントに変更し、黄色に設定し、中央揃えにし、境界線を追加したら、適用をクリックしてその編集を構造化された変更リクエストとしてパッケージ化します。

重要なのは、静的なモックアップではなく、実際の製品を操作することです。3×2のグリッドを2×3のレイアウトに変えたり、カードを引き伸ばしたりすると、Cursorは実行中のReactアプリを更新し、AIエージェントを介してコードベースに同期します。ページをリフレッシュしても、編集は持続します。なぜなら、それらは捨てられるプロトタイプではなく、あなたのコンポーネントに存在するからです。

Cursorの新しいワークフローは、一つの大胆なプロンプトから始まります。Astro K JosephはCursorで空のプロジェクトを立ち上げ、Gemini 3 Proを起動し、次のように入力します：「NATOに似たAI自動化プラットフォームのためのランディングページを作成してください。スタイリッシュなUI、アニメーション、そしてモダンなデザインを備えたものです。」リクエストを一つ送信するだけで、彼はヒーローセクション、機能カードのグリッド、ボタン、グラデーション、アニメーションを完備した完全にスキャフォールドされたReactランディングページを得ることができます。

その最初のAI生成ステップは意図的に大規模です。レイアウト、タイポグラフィ、コンポーネントを手動でコーディングする代わりに、モデルが全体的な体験を生成します：ルーティング、コンポーネント、CSS、そしてインタラクションです。Cursorの内蔵ブラウザはローカルホストの開発サーバーを指し、新しく生成されたページはIDE内にライブで表示されるため、コンテキストの切り替えは不要です。

そこから、ビジュアルエディターが登場します。ジョセフは「要素を選択」をクリックし、ライブページにカーソルを合わせ、ヒーローヘッドライン、CTAボタン、または六つのカードグリッドなどの任意のDOMノードを選択します。Figmaスタイルのサイドバーがスライドインし、レイアウトと外観のコントロールが表示されます：位置、表示（グリッド、行、列、自由形式）、パディング、マージン、フォントファミリー、フォントサイズ、行の高さ、色、背景、境界、シャドウ、およびぼかし。

以前はCSSを探し回る必要があったマイクロ調整が、今では直接操作できるようになっています。彼は： - ヒーローフォントを別のファミリーに変更する - テキストカラーを黄色に変更する - フィーチャーグリッドを3×2から2×3に再配置する - スライダーを使って隙間、高さ、パディング、マージンを調整する

その編集は、彼が適用をクリックするまで視覚層の中にのみ存在します。その時、Cursorはデルタをスナップショットし、「送信」ボタンを介してAIエージェントに送信します。モデルはすべての視覚的な調整を正確なコード編集に変換し、JSX、Tailwindクラス、またはCSSモジュールを更新し、それらをリポジトリに書き戻します。

Cursorブラウザでの迅速なリフレッシュがループを確認します。グリッドは現在2×3でレンダリングされ、タイポグラフィは保持され、新しいカラーが持続しています。Cursor自身の文章「Cursorブラウザのビジュアルエディタ」では、「あなたが見ているもの」を「実際のコード」に変えることを説明しており、IDEを離れることなく実現しています。

Figmaのベテランたちは、カーソルビジュアルエディタのサイドパネルが開く瞬間に不気味な既視感を覚えるでしょう。IDE内のブラウザで選択した要素がフォーカスに入り、右側のパネルにはお馴染みのプロパティグループが填まります：レイアウト、外観、効果、スペーシング。それはコードツールというよりも、あなたのJSXとCSSに直接接続された簡素化されたFigmaインスペクタのように見えます。

外観セクションは、デザイナーが日々何度も触れる基本的なビジュアルコントロールを反映しています。フォントファミリー、サイズ、太さに加え、行間や文字間隔のためのタイポグラフィコントロールがあり、Figmaのスライダーや数値入力のように振る舞います。また、カーソルはテキストの整列を切り替えるトグル（左、右、中央）も提供しているため、ヒーローヘッドラインの構成を変更することは、デザインファイル内で微調整するのとまったく同じ感覚です。

カラーも一流の扱いを受けます。ネイティブのカラーピッカーを使えば、テキストや背景の色を即座に入れ替えることができ、実際のCSS値にマッピングされる単色塗りやグラデーションがサポートされています。ボーダー、シャドウ、ぼかしはそれぞれ独自のミニスタックに配置され、トグルや数値コントロールを使って1pxのアウトライン、柔らかなカードシャドウ、微妙な背景のぼかしを設定できます。TailwindクラスやSCSS変数を探し回る必要はありません。

レイアウトはFigmaのDNAが最も顕著に表れる部分です。レイアウトセクションでは、グリッド、フレックス、行、列、自由形式といった表示モードが公開されており、これらは基本的なCSSプロパティに直接対応していますが、シンプルなドロップダウンやトグルとして表示されます。プリセットを選択することで、3×2のカードグリッドを2×3のレイアウトに切り替え、ギャップスライダーをドラッグしてカード間の間隔を調整することができます。これはFigmaでのオートレイアウトの間隔編集と同じように機能します。

フレックスおよびグリッドコンテナでは、アラインメントとジャスティフィケーションのコントロールが直感的に理解しやすくなっています。アイテムを始まり、中央、または終了に合わせるためのボタンや、`justify-content`や`align-items`に触れずにアイテム間のスペースを分配するためのボタンが用意されています。パディングとマージンは、クラシックなボックスモデルコントロールとして表示され、すべての側面を調整するためにドラッグしたり、ロックを解除して各エッジを独立して調整したりできます。

デザイナーはもはや「これをもっとバランスの取れた感じにしてほしい」という要望を長い開発チケットに翻訳する必要はありません。セクションをクリックして、フォントサイズを32pxから40pxに変更し、24pxの垂直パディングを追加し、グリッドを1行に調整することができます—すべてCursor内で行い、AIが面倒なCSSの差分を処理します。その結果、Figmaの直感が製品コードに1:1で適用され、デザインと実装の間にあった心理的な壁が崩れ始めます。

ハンドオフは、整然とパッケージされたFigmaファイル、PDF仕様書、そして祈りを意味していました。Cursorの新しいビジュアルエディタは、それを共有の生きた空間に変え、デザイナーと開発者が同じ実行中のコードを、同じIDE内で同時に触れ合うことを可能にします。デザイナーは赤線をエクスポートする代わりに、実際に出荷される製品を調整します。

Cursorの組み込みブラウザは「デザイン → 実行 → 検査」のループをすでに単一のウィンドウに統合しました。その上にFigmaスタイルのサイドバーを重ねることで、静的なモックをJiraチケットに押し込む古い儀式は時代遅れに見えてきます。デザイナーは実際のコンポーネントで4pxのパディング変更が正しいと感じるかを確認するためだけにスプリントを待つ必要がなくなりました。

エディターは選択したDOMノードのレイアウト、タイポグラフィ、外観のコントロールを表示するため、デザイナーはライブUI上でピクセル単位の完璧な整列を追求できます。彼らは以下のことができます： - マージンとパディングを1pxずつ調整する - ドロップダウンを使って3×2のグリッドを2×3に切り替える - 単一のパネルからフォント、行の高さ、カラートークンを微調整する

それらはすべて、CSSのコードに触れることなく行われ、CursorのAIが静かに基盤となるスタイルとコンポーネントを書き換えます。

それは通常の力のダイナミクスを逆転させます。「小さなビジュアル修正」のチケットを提出する代わりに、デザイナーはCursor内で一級の貢献者として活動し、その後適用をクリックして変更をAIエージェントに送信します。これにより、コードベースが更新されます。Gitの履歴は、彼らの編集を具体的な差分として記録し、曖昧な「もっと目立たせて」というリクエストとしては残しません。

リアルタイムコラボレーションは、Figma専用の特権ではなくなります。開発者は`localhost`上でCursorブラウザを見ながら、デザイナーがカードをドラッグしたり、グラデーションを変更したり、フレックスレイアウトを入れ替えたりする様子を確認し、それに応じてコンポーネントAPIを即座にリファクタリングしたり、共有スタイルを抽出したりできます。フィードバックのサイクルは、非同期コメントでの日々から、数分間の並行イテレーションに短縮されます。

これがデザイン主導のエンジニアリングワークフローの姿です：ビジュアルの真実の源とコードベースが一つの環境に統合されます。デザイナーは実際のコンポーネントで、実際の制約のもとで繰り返し作業を行い、エンジニアは解釈的な仕様ではなく、製品準備が整った差分を引き継ぎます。Cursorは「デザイン」をプレプロダクションフェーズからビルドプロセスの核心へと移動させます。

Cursorでのレイアウト再構築は、スタイルシートと格闘するのではなく、Figmaでフレームを編集することにより近く感じられます。ビジュアルエディターは、サイドバーにグリッドとフレックスボックスのコントロールを直接表示し、AIが裏側のCSSを書き換えている間に構造を操作します。ブラウザのプレビューに留まることができますが、すべての調整はコードに持続的に反映されます。

Astro K Josephのデモでは、6枚のカードセクションが3x2 CSSグリッドとして始まります。彼はグリッドコンテナを選択し、レイアウトコントロールを開いて、列と行のコントロールを数回クリックすることで2x3レイアウトに切り替えます。`grid-template-columns`、`repeat()`、分数単位の推測は一切ありません。

ギャップ調整は、ネストされたクラスファイルを検索する代わりに、ドラッグジェスチャーに変わります。ギャップスライダーにカーソルを合わせてドラッグすることで、カードの間隔を広げ、リアルタイムでプレビューが引き伸ばされるのを目にします。高さ、パディング、マージンは同じパネルにまとめられているため、垂直のリズムとホワイトスペースは、三つの別々のCSS編集ではなく、一つの連続した調整となります。

要素の順序は、歴史的に見てフレックスボックスの頭痛の種でしたが、直接的な操作の問題にもなります。カードをつかんでグリッド内の新しい位置にドラッグすると、CursorがDOMの順序やレイアウトルールをそれに応じて更新します。これにより、2つのブロックを入れ替えるために`order`、`flex-direction`、メディアクエリを調整するという精神的な負担が軽減されます。

このビジュアルレイヤーは、レイアウトが密になると最も重要になります。入れ子になったフレックスコンテナ、レスポンシブグリッド、ユーティリティクラスを持つ複雑なマーケティングページでは、以下がしばしば必要となります： - 実際に間隔を制御しているコンテナを特定すること - クラス名をTailwindまたはカスタムトークンにマッピングすること - 外部ブラウザでブレークポイントをテストすること

カーソルがループを単一の表面にまとめます。クリックしてレイアウトモード（グリッド、行、列、自由形式）を変更し、スライダーをドラッグして適用をクリックします。その後、AIエージェントがJSXまたはHTMLと関連するCSSを書き換え、結果が埋め込まれたブラウザですぐに表示されます。

古いワークフローでは、深くネストされたレイアウトルールを手作業で編集するか、「この3x2のグリッドを2x3に変え、同じ隙間を保ち、カードの幅を変えないでください」といった長くて壊れやすいプロンプトを作成する必要がありました。Cursorのアプローチは、まず視覚的な操作に変え、次に言語指示を行います。詳細については、CursorはこれらのコントロールをCursor 2.2: Visual Editor for Cursor Browserで文書化しています。

「適用」ボタンをクリックすると、Cursorはデザイン用のおもちゃからリファクタリングエンジンに切り替わります。ビジュアルパネルで行うすべての微調整—フォントの変更、8pxのパディングの増加、グリッドの3x2から2x3への変更—は、スタイルガイドというよりも差分仕様のように読み取れる構造化された変更リストにシリアライズされます。「もっと良くして」という代わりに、Cursorは「color: #FFEB3B → #FF0000」、「padding-top: +8px」、「grid-template-columns: 3 → 2」と記録します。

その細かな編集は、CursorのAIエージェントへのプロンプトペイロードになります。このツールは、要素のDOMパス、現在の計算スタイル、そしてあなたが行った正確な調整をパッケージ化し、それらの文脈を選択したモデル（Composer、Gemini 3.0 Proなど）とともに送信します。エージェントは、あなたが視覚的に求めているものだけでなく、その要素がコンポーネントツリーの中のどこに存在するかも理解します。

そこから、Cursorはあなたのコードベース（JSX、CSSモジュール、Tailwindユーティリティの混乱、さらにはインラインスタイル）を巡回し、真の情報源を見つけ出します。もし黄色の見出しがTailwindクラスから来ている場合、エージェントはランダムな`style={{ color: "#FF0000" }}`をインラインする代わりに、`text-yellow-400`を`text-red-500`に更新します。もしグリッドレイアウトが`className="grid grid-cols-3 gap-6"`に存在するなら、それを`grid-cols-2`に書き換え、ギャップも適宜調整します。

重要なのは、Cursorが単に新しいCSSスニペットをファイルの下に追加するだけではないことです。AIはターゲットを絞ったリファクタリングを行います。既存のクラスを編集したり、重複を統合したり、デザイントークンや変数をそのまま維持したりします。変更可能な内容は次の通りです：

• 1React/Next.js JSXとプロパティ
• 2CSS、SCSS、そしてCSSモジュール
• 3テイルウィンドとユーティリティクラス文字列

視覚的な意図から構造化されたコード変更へのその橋が本当の鍵です。Cursorは、あなたのドラッグ＆ドロップの実験を、リフレッシュ、コードレビュー、将来のリファクタリングを経ても生き残る一貫したリポジトリ全体の編集に変え、メンテナンスが難しいオーバーライドの山に残されることはありません。

Cursorの新しいビジュアルエディタは、すぐにFigmaとの比較を招きますが、スタック内で異なる役割を果たします。Figmaは初期段階のキャンバスを支配しています：探索、デザインシステム、プロトタイピング、マルチプレイヤーコメント。Cursorはその後に登場し、アートボードやフレームではなく、実際のコンポーネントやスタイルを編集するコード実装ツールとして機能します。

Figmaは、デザインシステムの厳密さ、コンポーネントのバリアント、クロスプラットフォームプロトタイピングにおいて依然としてCursorを上回っています。一方で、Cursorは「これをどのように見せるべきか？」から「この正確なレイアウトを私のマシンでどのようにプロダクションのReactコードに組み込むか？」という質問に変わるときには勝利します。

ノーコードおよびローコードのビルダー、例えばWebflowやFramerは、Cursorの約束により近い位置にありますが、重要なポイントがあります。それはランタイムを彼らが制御していることです。あなたのプロジェクトは彼らのビジュアルキャンバス、ホスティング、スキーマ内に存在し、エクスポートパスは往々にして二の次のように感じられ、優先度の高いワークフローとは言えません。

カーソルがそのモデルを反転させます。ビジュアルエディタはあなたのローカルのフレームワークベースのコードベース（Next.js、React、Vue、その他あなたがすでに出荷しているもの）に直接対応しているため： - Gitの履歴とブランチ戦略を維持できます - ビルドパイプライン、テスト、インフラを維持できます - プラットフォームロックインや独自のレンダリングエンジンを回避できます

標準のVS Code + GitHub Copilotのセットアップと比較して、Cursorの利点は徹底的な統合にあります。Copilotは行やブロックを提案しますが、CursorはIDE内ブラウザ、Figmaスタイルのコントロール、AIエージェントを一体化し、ツールを切り替えることなく、視認・調整・出荷を行うことができる連続した作業環境を提供します。

典型的なCopilotのフローは依然として次のようになります：JSXを編集し、保存し、Chromeに切り替え、リフレッシュし、CSSを調整し、これを繰り返す。カーソルはそのループを緊密な視覚フィードバックサイクルに圧縮します：要素を選択し、ドラッグし、間隔を調整し、適用をクリックすると、AIがコードを書き換えるのを見ながら、内蔵ブラウザがリアルタイムで更新されます。

Cursorは市場において、デザインツールとサイトビルダーの間の居心地の悪い中間地点をターゲットにしています。それはWebflowのレイアウトパネルのようなビジュアルコントロールを提供しますが、エディターやリポジトリ、フレームワークの慣習を放棄することを決して求めません。

そのハイブリッドモデルが定着すれば、既存企業は両側から圧力を受けることになる。Figmaは、デザイナーとフロントエンド開発者がCursorで共同編集を行う中で、一部の「ハンドオフ」の関連性を失うリスクがある。一方で、WebflowとFramerは、すでに所有しているシンプルで監査可能なコードの上にほぼWYSIWYG編集を提供するツールに対して自社のロックインを正当化しなければならない。

Cursorのビジュアルエディタは、うまく機能すると魔法のように感じますが、現在は非常に特定の世界に存在しています。この体験は、JSX、コンポーネント、プロップがツールが操作できるDOMにクリーンにマッピングされるReactや他の現代的なJavaScriptスタックで最も洗練されています。サーバーサイドでレンダリングされたテンプレート、レガシーのjQueryアプリ、またはカスタムWebコンポーネントに移行すると、動作が不透明になり、画面上のドラッグが正常なコードに変換されるという保証が大幅に少なくなります。

デザインシステムへのサポートにも限界があります。エディターはCSS変数、色、間隔を調整できますが、完全なトークン分類、複雑なテーマ設定、またFigmaのような成熟したデザインシステムが理解する特注のユーティリティクラスをまだ把握していません。厳格なアトミックやBEM規則に依存するチームは、Cursorが社内ルールに違反するスタイルを喜んで生成することに戸惑うかもしれません。

バージョン管理は、もう一つの摩擦の層をもたらします。AI生成のパッチはしばしば複数のファイルに同時に影響を与え、一回の「適用」で構造的なJSXの変更とカスケードCSSの変更が混在した差分が生じることがあります。大規模なReactコードベースにおけるこれらのgit差分を読むことは、人間が作成したコミットではなく、ミニファイされたビルドアーティファクトをレビューしているように感じられることがあります。

チームはこれに関してプロセスを必要とします。いくつかのチームは、視覚的な編集をレビュー規則の背後に制限したり、すべてのAI生成のコミットに以下を含めることを求めるでしょう： - 短い人間が作成した要約 - 変更のスクリーンショットまたはGIF - Cursorセッションまたはプロンプトへのリンク

それでも、2週間後に予期しないレイアウトのシフトをデバッグすることは、慎重に語られるリファクタリングではなく、AIが生成したコードを探ることを意味します。

複雑なフロントエンド作業も消えることはありません。Redux、Zustand、またはReactコンテキストにおける状態管理、複雑なフォームバリデーション、認証フロー、データ集約型のダッシュボードはまだ、コンポーネントのライフサイクル、メモ化、パフォーマンス予算を理解したエンジニアを必要としています。Cursorは価格カードのグリッドを3x2から2x3に数秒で再スタイルできますが、レジリエントなオフラインファーストの同期エンジンを設計することはできません。

このワークフローを評価しているチームにとっては、Cursorの新しいビジュアルエディタがIDEをウェブデザインスタジオに変える のようなリソースが正しい枠組みを提供します。これは、フロントエンドアーキテクチャや深いプロダクト思考の代わりではなく、強力なコード実装支援ツールです。

コードエディターは何年も前から単なるテキストボックスではなくなりました。Cursorのビジュアルエディターは、それらを完全なクリエイティブスタジオに近づけています。あなたのIDEがブラウザ、Figmaスタイルのレイアウトパネル、そしてコマンドに応じてコードを作り直すAIペアプログラマーを組み込むと、もはや「ファイルを編集」しているのではなく、1つの場所で制作パイプラインを指揮していると言えるのです。

この動きは、統合された個人環境への広範なシフトに適合しています。コーディング、デザイン、ドキュメンテーション、プロジェクト管理が一つの表面に集約されるワークスペースです。Gitの差分、デザインの微調整、アーキテクチャの図、機能仕様などが、コピー＆ペーストやSlackのスレッドでつなぎ合わせられた別々のアプリではなく、同じプロジェクトグラフの異なるビューとして感じられるようになります。

今日、Cursorのスタックはコード + ブラウザ + ビジュアルエディタ + AIですが、進むべき道はさらに広がっています。リアルタイムのコンポーネント状態コントロールを想像してください。Reactのプロパティや、Storybookスタイルのバリアント、そしてフィーチャーフラグをサイドバーから直接表示し、JSXに触れることなく、読み込み、エラー、成功状態を簡単に切り替えられるのです。

次のステップはほとんど自動的に決まります。IDEの内部から、次のことができます： - ヒーローセクションのためのAI生成のA/Bテストを立ち上げる - 開発サーバーの設定を通じてトラフィックの割合をルーティングする - リアルタイムのメトリクスをエディタのサイドバーにストリームする

デザインレビューはコードベース内で行うことができます。PMがカードをドラッグし、コピーを調整し、その変更に「Experiment 14」とタグ付けすると、AIがブランチを作成し、分析ツールを接続し、お好みのトラッカーに要約を投稿します。このアーティファクトはFigmaのフレームやPDFではなく、コード、データ、論理がすべて一緒にある実行中の実験です。

IDEが隣接するツールを吸収し続ける中で、ソフトウェア作業の重心はこのオールインワンコックピットに決定的に移行しています。Cursorのビジュアルエディタはフロントエンド開発者にとって小さな生活の質の向上のように見えますが、「デザインツール」と「開発環境」の境界を静かに再定義しています。

そのように見ると、このアップデートはデザインの引き継ぎの一部を排除するだけではありません。「エディタを開く」ということが、ソフトウェアをゼロから構築し、形作り、出荷するための主要なスタジオに足を踏み入れることを意味する未来を予感させます。

Cursorの新しいビジュアルエディターとは何ですか？

それは、IDE内蔵のブラウザにFigmaのようなインターフェースを追加し、AIエージェントが対応するコードを書いている間に、ウェブアプリのUIを視覚的に編集できる機能です。

カ cursor ビジュアルエディターは Figma の完全な代替ですか？

まだです。コードでデザインを直接実装し、反復するのには優れていますが、初期デザイン、プロトタイピング、またはチームコラボレーションにおけるFigmaのコアな強みを置き換えるものではありません。

ビジュアルエディターは実際に私のコードをどのように変更しますか？

要素を選択し、そのプロパティを視覚的に変更した後、変更を確定します。AIエージェントは、これらの視覚的な編集を解釈し、実際のソースファイル（CSSやJSXなど）をリファクタリングします。

この機能は今利用可能ですか？

はい、ビジュアルエディターはCursorバージョン2.2以降のすべてのユーザーに利用可能です。アクセスするにはアプリケーションを更新する必要があるかもしれません。