皆さんこんにちは。宮治研究室3年の西堀宙知(@Sora339)です！MYJlabアドベントカレンダーの12日目を担当させていただきます。
普段研究室ではハードウェアやセンシング分野に興味がある雰囲気を出していますが、今日はWeb開発の最前線に突っ込んでみることにします。
A visual editor for the Cursor Browser
Cursorは多くの人が知っていると思うので詳しい説明は割愛しますが、AIを活用した開発のために最適化されたAIエディタの先駆け的存在です。
そんなCursorが2025/12/10(執筆時時点で一昨日)にVer.2.2の新機能としてリリースしたのがこの「Visual editor for the Cursor Browser」です。
これを活用することで、直感的なGUIでWebページをデザインし、AIがそれをコードに自動で落とし込んでくれます。
この機能は、Cursor内でブラウザーを立ち上げて自分やAIエージェントが操作することができる「ブラウザ」機能に付随するものです。
早速見てみましょう。
ちなみに今(2025/12/12現在)Cursorを立ち上げると上のようなサジェストが出ます。これで試してみることもできますが、今回はポートフォリオサイトのデモをNext.jsでちゃちゃっと作ってもらいました。
サーバーを立ち上げてリンクを踏むと「Cursorブラウザで開く」選択肢が提示されるので開いてみましょう。
こんなサイトが一発でできる時点で、ほんの少し前までは驚きでした。よく見ると、AIチャットエリアとブラウザ表示の間に今回のビジュアルエディタがあります。
ブラウザ表示エリアの要素をクリックすると、その要素に当たっている各種CSSプロパティの値をいじれる感じです。ブラウザの開発者モードのスタイル表示がGUIになった感じですね。
試しになにか変えてみましょう。「プロジェクトを見る」ボタンの文字が背景と同化してしまっています。
ボタン要素をクリックしてから、ビジュアルエディタの「Color」の項目から簡単に背景色を変えることができました。もちろん、文字色の方を変えることもできます。
あとはビジュアルエディタの上にある「Apply」ボタンを押せば、AIがその時点でブラウザ表示されている見た目になるようにコード側に変更を加えてくれます。
もうちょっと修正を進めてみましょう。「スキル」と「お問い合わせ」のカードが横並びになっているのは少し不自然です。
「スキル」のカード要素を選択後、そのまま上に向かってドラッグすると、この横並びのレイアウトの領域から外すことができました。
まだお問い合わせのカードの横幅が他と合っていません。原因はグリッドレイアウトの列数が2のままになっていることです。
このレイアウトの列数変更も、ビジュアルエディタのGUIで直感的に行うことができました。
まだ挙動に不安が残る場面はありますが、これこそがデザイナーとエンジニアが望んだ未来ではないでしょうか？
エディタからコードが消える日
ウェブ開発の簡単なUI作成の範囲ではありますが、エディタからコードが消える日も近いかもしれません。
以上、西堀のアドカレ2025でした！