Cursor 2.2で「Cursor Browser向けのビジュアルエディタ（Browser layout and style editor）」が追加されて、UIを触りながらコードに反映できる流れが一気に現実味を帯びてきたよ。ドラッグ＆ドロップやスタイル調整→そのままエージェントでコードへ適用、が同じ画面で完結するのがポイント。この記事では、公式発表ベースで「何ができる？」「どんな場面で刺さる？」「無料/有料の注意点」をサクッとまとめるね。
新ビジュアルエディタって何？できることを公式ベースで整理
結論、これは「デザインツール」単体というより、アプリの見た目（UI）を触る操作と、コード変更の実行を“同じIDEの中”でつなぐ仕組み。Cursor公式の説明だと、Cursor Browser上でアプリ・コードベース・ビジュアル編集ツールが同居して、次のことができるようになる。
①ドラッグ＆ドロップでレイアウトを動かす
レンダリングされた要素をドラッグして、DOMツリー上の配置をいじれる。ボタンの順番を入れ替えたり、セクションの並びを変えたり、グリッドの構成を試したり…が視覚的にできる感じ。
②React等の“コンポーネント状態”を直接テスト
コンポーネントのpropsをサイドバー側に出して、状態・バリエーションを切り替えながら見た目を確認できる、という説明。UI検証のスピードが上がりやすいタイプ。
③スライダーやカラーピッカーでスタイル調整（デザイントークンも）
フォント・余白・色・flex/grid/タイポグラフィなどを、スライダーやパレットで調整できる。さらに「自分のカラートークン／デザインシステム」前提の操作も想定されてるのが良い。
④“Point and prompt”＝クリックしてAIに指示
要素をクリックして「これを大きく」「これを赤に」「順番入れ替え」みたいに自然文で指示すると、エージェントが並列に走って変更を進める、というノリ。
そして大事なのが、見た目を触って終わりじゃなく、エージェントが“該当コンポーネントを探してコードを更新”するところ。いわゆる「UIいじり → CSS/コンポーネントの修正 → 反映確認」の往復が短くなる。
どんな開発で刺さる？“使い道”を5パターンで考える
「便利そうだけど、結局いつ使うの？」に答えると、刺さるのは主にフロント寄りの“調整コストが高い瞬間”。
使い道①：デザイン微調整の“無限スクショ往復”を止める
「余白あと8px」「このボタン角丸もう少し」「ホバー時の色だけ違う」みたいな小粒タスクって、地味に時間が溶ける。ビジュアル操作で方向性を決めて、コードへ適用まで一気にやれるのは強い。
使い道②：レスポンシブ崩れの初動が速くなる
grid/flexを触って「どこが原因か」を体で掴める。そこからコード反映へ繋げれば、修正の一発目が当たりやすい。
使い道③：デザインシステム（トークン）適用の漏れを減らす
色・タイポ・余白を“トークン前提”で触れるなら、場当たりCSSを増やしにくい。チーム開発だと地味に効くやつ。
使い道④：Reactコンポーネントの状態確認がスムーズ
propsで状態を切り替えながら見られる想定なので、Storybook的な「状態切替→見た目確認」をIDE内で寄せられる可能性がある。
※もちろん既存の検証環境が強いなら、そことの役割分担でOK。
使い道⑤：非エンジニアとの会話がやりやすくなる（ただし期待値調整）
Wiredでも「デザイン操作とコードの溝を埋める」方向性が語られてた。デザイナー/PMとの“言葉で伝わらないニュアンス”を、画面を触りながら詰められるのは確かにうれしい。
導入手順と注意点（無料/有料の“曖昧さ”を避ける）
まず前提として、このビジュアルエディタはCursor 2.2の新要素として変更履歴に載ってる（Browser layout and style editor）。なので、使うならCursorを2.2系にアップデートが第一歩。
ざっくり導入の流れ（UI名称は環境で変わる可能性あり）
- Cursorを最新版（2.2）へ更新
- Cursor Browser（埋め込みブラウザ）を開く
- 右側サイドバー/コンポーネントツリーの表示 → 触って調整 → エージェントでコードへ適用
この“できること”自体は公式ブログとchangelogで説明されてる。
無料/有料の注意点（断定しすぎない言い方で）
Cursorの個人プランは、無料のHobbyと有料のPro/Pro+/Ultraがあり、無料でも触れる可能性はある。ただし公式の料金ページを見る限り、HobbyはAgentリクエストに制限があり、ProはAgentの上限拡張やBackground Agentsなどが入る。つまりビジュアル編集自体が動いても、「適用をガンガン回す」と制限に当たりやすいのは注意点。
- Hobby（無料）：Agentリクエスト制限・Tab補完制限など
- Pro（$20/月）：Agent上限拡張、Tab補完無制限、Background Agents等
- Pro+（$60/月）：OpenAI/Claude/Geminiモデル利用枠が「Proの3倍」
- Ultra（$200/月）：利用枠がさらに増＆新機能優先アクセス
実務で事故らないための注意点3つ
- 適用前に差分レビューは必須
見た目が合っても、CSSが増殖したり、想定外のコンポーネントまで触ったりは起こりうる。 - トークン/設計があるチームほど“ルール”を先に決める
「直書き禁止」「Tailwindのクラス優先」など、運用ルールがないと後で地獄。 - アクセシビリティや表示崩れは別途チェック
見た目が整っても、キーボード操作やコントラストは別問題。Cursor Browserの文脈には監査系もあるけど、最終確認はいつも通りやろう。
Cursor 2.2の新ビジュアルエディタは、UIを触る→AIに指示→コードへ反映を同じ画面で回せるのが最大の進化ポイント。ドラッグ＆ドロップ、props状態切替、スライダー/カラーピッカー、そして“クリックしてプロンプト”で変更まで持っていける。無料でも試せる可能性はあるけど、HobbyはAgent制限があるので、仕事で回すならPro以上が現実的になりそう。まずは「余白/色/レイアウト崩れ」みたいな小さめのUI改善から試すのが一番おいしいよ。
