Cursorのデザインモードに「Annotate」：画面に直接描いて・要素を直して、AIに見た目で頼む
Cursorのデザインモードで、ページ上に描き込んだり要素を直接編集したりして、それを「視覚的なプロンプト」としてエージェントに渡せるようになった。画面サイズを切り替えての確認もその場でできる。
どんな問題を解決するか / いつ使うか
「このボタンの上の余白をもう少し」「この辺を寄せて」のような、言葉にしにくい見た目の修正を、文章ではなく画面上の印で伝えたいとき。レスポンシブの崩れをいくつかの幅で見ながら直したいときにも使う。
やり方
- Cursorでデザインモードを開き、対象ページを表示する。
- Annotateで、直したい箇所に線や囲みを描く、または要素を直接編集する。
- 必要なら画面サイズを切り替え、別の幅での見え方も確かめる。
- 描き込み・編集をエージェントに渡し、コードに反映させる。
注意点
- 2026-10-27（日本時間10-28）にCursor公式が発表した新機能。細かな操作名・場所はバージョンで変わる可能性があるので、Cursor本体の表示で確認する。
- 描き込みだけだと意図がずれることがあるので、「何を変え、何を残すか」を一言添えるとよい（AIへの修正指示は「変える・残す・確かめる」の3点で書く）。