CursorのDesign Modeを使ったら、UIの微調整でコードを探す時間がほぼ消えた話

👀 結論から

フロントの微調整をしているとき、いちばん時間を溶かすのはコードを書く時間ではなく「この見た目はどのファイルのどの行なのか」を探す時間だと思っています。

Cursor 3 に入った Design Mode は、まさにそこを短縮してくれる機能でした。

ブラウザに映っている要素をクリックして「ここの余白を詰めて」と言うだけで、エージェントが該当のコードを見つけて直してくれます。

結論から言うと、細かいUIの手直しが続く日にはかなり効きますが、ゼロから画面を作る場面ではそこまででもない、という印象でした(・∀・)

Design Mode は、Cursor 3（2026年4月2日リリース）で公開された機能で、Agents Window の中のブラウザ上で動きます。

ブラウザを開いた状態で Cmd + Shift + D（Windows は Ctrl + Shift + D）を押すとモードが切り替わります。

できるのは大きく3つです。

つまり「コードのどこを直すか」ではなく「画面のどこをどうしたいか」で指示できる、というのがこの機能の肝ですね。

このブログの記事一覧まわりの微調整を題材に試してみました。

やったのは、カードのタイトルとサムネイルの間隔が気になっていたので、該当のカードをクリックして「タイトルとサムネの間をもう少し詰めて」と伝えるだけです。

これまでなら、開発者ツールでクラス名を調べて、そのクラスをエディタで検索して、該当のスタイル定義まで辿って・・・という流れでした。

それが1ステップで終わったので、「探す」工程が丸ごと消えた感覚がありました。

面白かったのは、指示を出したあと自分は次の箇所を見に行けることです。

エージェントが直している間に別の要素を選んで次の指示を出せるので、細かい修正が何個もあるときはリズムよく進みました🚀

ここが個人的に一番気になったところなので、公式の説明も確認しました。

要素を選ぶと、Cursor は次のものをまとめてエージェントに渡しているとのことでした。

「クリックした要素の情報だけ」ではなく、周辺のレイアウトや関係性まで含めて渡しているのがポイントだと思います。

実際、「この要素だけ詰めて」と頼んだときに、隣の要素との間隔まで考慮した直し方をしてきたので、渡している文脈の広さはそれなりにあるんだなと感じました。

逆に言うと、雑に「いい感じにして」と言うと、こちらの意図していない範囲まで手が入ることもあります(・_・;)

選ぶ要素は具体的に、指示は狭く、が今のところのコツだと思っています。

何度か使ってみて、向き不向きははっきりしてきました。

向いている

向いていない

「デザインを作る機能」というより、すでにあるものを指差して直す機能だと捉えたほうがしっくりきます。

私の場合、実装が一通り終わってから最後の詰めのフェーズで一気に使うのが一番相性がよかったです(^^)

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

AI開発・執筆に使っている作業デスク環境を楽天ROOMにまとめています ✨ デスク周りの参考にどうぞ 🙌

Cursor の Design Mode は、画面を見ながら直接エージェントに指示できる機能でした。

「どのファイルか探す」という工程がなくなるだけで、細かい修正の体感速度はかなり変わります。

フロントの詰め作業が多い人は、一度試してみる価値があると思います🙌

※ ショートカットや提供範囲は今後も変わる可能性があります。最新情報は Cursor 公式ドキュメントをご確認ください👀