「ここ、もうちょっと右」がコードになる — CursorのDesign Modeを使いこなす方法

デザイナーから「このボタン、もう少し右にずらして」と言われたとき、エンジニアは何をするか。DevToolsを開き、該当するCSSを探し、marginやpaddingをいじり、コミットする。数ピクセルの修正に5分かかることもある。

CursorのDesign Modeは、この「指差してフィードバック」をそのままAIエージェントへの指示に変える。ブラウザ上の要素をクリックして「これを右に20px」と言えば、エージェントがHTML構造とCSS、画面上の位置を読み取り、コードを書き換える。

4月にCursor 3とともにリリースされたこの機能が、6月4日のアップデートでキャンバスにも拡張された。ブラウザで動くアプリだけでなく、エージェントがキャンバス上に生成したUIコンポーネントにも同じ操作ができるようになっている。

Design Modeの基本：指差しでコードを直す

Design Modeは、Agents Windowのブラウザ内で動くビジュアル編集モードだ。起動はCmd+Shift+D（WindowsはCtrl+Shift+D）。

起動すると、マウスを動かすだけで画面上の要素がハイライトされる。そこからの操作は3通りある。

クリックして指示する。ボタンやテキスト、画像など任意の要素をクリックすると、その要素のXPath、コンポーネント型、属性、Fiberツリーのpropsに加え、適用中のCSSとバウンディングボックスがエージェントに渡る。あとは「フォントサイズを16pxに」「背景色を#f0f0f0に」と自然言語で指示すればいい。

描画でアノテーションする。ページ上に直接描き込んで、変更したい範囲や方向を示せる。「この領域をカード型レイアウトに」といった漠然とした指示も、描画と組み合わせることで精度が上がる。

音声で伝える。マイクに向かって変更内容を話すだけでもいい。要素を選択した状態で「この見出しをもっと大きく、太字にして」と言えば、エージェントが解釈してコードに反映する。

マルチセレクト：2つの要素を「揃えて」

個人的に最も使用頻度が高いのが、マルチセレクトだ。

2つ以上の要素を順にクリックすると、Cursorはそれらの関係性を認識する。「この2つのカードの高さを揃えて」「左のボタンのスタイルを右にも適用して」という指示が通る。

これが効くのは、従来のテキストだけの指示では「どの要素のことを指しているのか」をコンポーネント名やクラス名で正確に伝える必要があったからだ。Design Modeなら、画面上で指差すだけで曖昧さがなくなる。

ナビゲーションバーのリンクを3つ選んで「等間隔に並べ直して」、フォームの入力フィールドを2つ選んで「同じ幅にして」。こうした微調整が、1回のクリック＋1行の指示で終わる。

6月のアップデート：キャンバスへの拡張

6月4日に追加されたのは、キャンバスでのDesign Mode対応だ。

キャンバスとは、エージェントが生成したUI・チャート・インタラクティブなコンポーネントをプレビュー表示する領域のこと。これまでキャンバス上のコンポーネントを修正するには、テキストで「3番目のチャートの色を変えて」のように指示する必要があった。

今回の拡張で、キャンバス上の要素もブラウザと同じように直接クリック・アノテーションして指示が出せるようになった。

同時に追加された機能がもう一つある。コンテキスト使用量レポートだ。エージェントがどこにトークンを使っているか（システムプロンプト、ツール定義、ルール、スキルなど）をインタラクティブなレポートとしてキャンバス上に表示する。「なぜエージェントの応答が遅いのか」「コンテキストウィンドウの何割をルールが占めているのか」が一目でわかる。

地味だが実用的な追加として、共有キャンバスがブラウザでフルスクリーン表示できるようになった点も挙げておく。プレゼンや画面共有でそのまま見せられる。

正直な評価：どこが強く、どこが弱いか

強い点。フロントエンドの微調整が圧倒的に速くなる。特にデザインレビューの場面で威力を発揮する。デザイナーが横にいる状態で「ここ」「これ」と指差しながら修正を回せるのは、テキストベースの指示とは体験が根本的に違う。

CSSの知識がなくても、見た目から入ってコードを直せるという点で、非エンジニアがフロントエンド修正に参加するハードルも下がった。

弱い点。ロジックの変更には向かない。Design Modeが渡すのはあくまで「見た目」に関する情報であって、状態管理やAPI呼び出しのコンテキストではない。「このボタンを押したらモーダルが出るようにして」は、見た目の指示としては伝わるが、裏のロジックまで正確に組めるかはケースバイケースだ。

また、コンポーネントの粒度が細かすぎると選択しにくい場面がある。アイコンの中のSVGパスを選びたいのにアイコンコンテナ全体が選択される、といった状況は頻繁に起きる。

実際に使えるシーン

デザインレビューの即時反映。Figmaのデザインと実装のズレを、画面を見比べながらその場で修正する。マルチセレクトで「このFigmaのデザインに合わせて」と指示するだけで、色・サイズ・間隔の微調整が片付く。

プロトタイプの高速イテレーション。キャンバスに生成されたUIを眺めながら、「このセクションの順番を入れ替えて」「ここにCTAボタンを追加して」とポイントしていく。テキストでレイアウトを説明するより、はるかに早い。

非エンジニアとのペア作業。PMやデザイナーが画面を見ながら「ここが気になる」と指差し、隣でCursorが即座に修正する。コードの知識がなくても「何を直してほしいか」を正確に伝えられる。

Cursorの料金

Design ModeはCursorのPro以上のプランで利用できる。

• Pro: $20/月（年払い）— 個人開発者向け
• Pro+: $60/月 — Proの3倍のクレジット
• Ultra: $200/月 — 20倍の使用量、新機能への優先アクセス
• Teams Standard: $32/席/月（年払い） — チーム向け
• Teams Premium: $96/席/月（年払い） — Standardの5倍の使用量

各プランにはプラン価格と同額のクレジットプールが付き、使用するモデルに応じて消費される。Design Mode自体に追加料金はかからない。

まとめると

Design Modeは「見た目の修正」に特化した機能であり、Cursorの全機能を置き換えるものではない。だが、フロントエンド開発の中でもっとも頻度が高く、もっとも退屈な作業 — CSSの微調整、レイアウトの修正、デザインとの差分解消 — を劇的に速くする。

キャンバスへの拡張で、エージェントが生成したUIを「見ながら直す」ワークフローが完成した。テキストで説明するより、指差すほうが早い。当たり前のことが、ようやくコードエディタでもできるようになった。