はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です
12月11日、Cursorでビジュアルエディタがリリースされました。
Xでは非常に評判が良く、Figmaにとって代わるのではという書き込みも見受けられます。
実際にどんなものなのかを試してみたいと思います。
デザインの変更・適用
まずは普通に内蔵ブラウザを開きます。
で、ブラウザ右上のアイコンのうち、以下の「Show CSS Inspector」をクリック
そうするとfigmaのような各要素ごとに色やpadding等の調整・設定ができるウィンドウが出てきます。
内蔵ブラウザの各要素をクリックするとそれぞれ選択が可能になることがわかります。
更にドラッグ＆ドロップで以下のように移動、入れ替えができます。
そして上のようにタスク入力欄とタスク表示欄を入れ替えた状態で（実際は元々の順番があるべき姿のような気がしますが機能のお試しなのでご容赦を）「今の画面デザインの状態をコードに反映して」と依頼してみます。
そうすると現在の画面の状態を確認し、それを元にコードを修正してくれます。
再度起動すると以下のように先ほど変更した内容が反映されていることがわかります。
デザイン変更その２
では次に先ほど最初に表示されたウィンドウを使ってみましょう。
「ToDoリスト」の部分を選択し、フォントの色を変えてみます。
今回は赤色に。
実際に画面上で文字色が反映されていることを確認します。
内蔵ブラウザ上部に「Apply」というボタンがあるので今度はこちらをクリックします（VisualEditorの操作としてはこちらが正しい適用方法になります。最初のはプロンプトでもできますよという例です）。
そうすると先ほどと同様、変更を認識し、コードが変更されます。
要素指定による変更指示
あとはこちらは内蔵ブラウザのリリース時に既に対応されていた機能のような気がするのですが、
例えばタイトルの部分をクリックしますと
プロンプトの入力欄にその要素が表示されます。
その状態で
「背景色を青、文字色を白、そして文字を「ToDo管理」に変更して」
と依頼するとプロンプトで要素を指示しなくとも選択された要素に対する指示であると考えて変更を行ってくれます。
結果、以下のように変更されていることが確認できます。
不具合が直れば検証のためのコードを削除し、クリーンな状態に戻してくれます。
終わりに
Cursorのビジュアルエディタ機能、いかがでしょうか。
ある程度デザインやCSSに関する知見が必要となりますが、逆にそういった人達にとっては非常に有益な機能であると思います。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
