Cursorがメガシンカ

前回執筆したこちらの記事から基本的にCursorを利用したのですが、最近革新的なアップデートがありました。

内容

アップデート2.2 より

ブラウザのレイアウトとスタイルエディタ
新しいブラウザサイドバーとコンポーネントツリーで、デザインとコーディングを同時に行えます。

要素の移動、色の変更、レイアウトのテスト、CSS の調整・実験をリアルタイムで行い、その変更を agent を使ってコードベースに即座に反映できます。
複数の要素をクリックして、テキストで変更内容を説明すると、エージェントが起動して見た目の変更を自動で行うこともできます。

うーん説明文だけだとよくわかりません。

実践

とりあえず簡単なvueのSPAを作成します。
今回は、新機能の動作確認なのでトップページのみ
生成指示を出して、承認

その後、npm runを実行します。
右上の3点リーダから「Open Browser」を選択しCursor内ブラウザを起動。

表示されたら、右上の「show CSS Inspector」を選択

ここからが本番です！

ドラッグ操作のみでコードを変更せずにDOM操作できます。
修正後、右上の「Apply」押下で変更を読み取り、変更が反映されます。

勿論、サイズとか細かいレベルの調整もできます。
グルーピングみたいなこともできちゃいます。

DOMの操作したい部分をクリックすると、該当のDOMがプロンプトに表示されるので指示を出して修正することもできます。

感想

まさに革新的な気がします。
結果物を見ながらドラッグ操作のみで完結するので、あーでもないこーでもないの手間が大幅に減るようと思います。
実装 → デザイン修正の工程が大幅に削減されるかもしれません。