デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
さっきの新規登録画面には「ログイン」がありましたが、押しても何も起きませんでした。なので、ログイン画面を作ってもらいます。
Cursorに「ログイン画面作って」と書いても、作ってはくれます。ただ、それだとどういうものができるのかがあやふやです。
そこで使うのが、チャット欄のモード切り替えです。クリックすると「Agent」「Plan」「Debug」「Ask」のように、チャットにどう応答してほしいかを選べます。
基本はAgentになっていて、内容に合わせて自動で判断してくれるので、普段はAgentのままでも大丈夫です。僕がおすすめしたいのは、Planです。
Planモードにしている間、AIは作業をしません。僕らが頼んだことをどうやって進めるか、計画を立てることに専念してくれます。
Planモードで「ログイン画面作って」と送ると、AIはまず今あるHTMLとCSSを確認して、計画を立て始めました。そして、質問を返してくれました。
内容があやふやなところや、決めないとずれそうなところを推測して、こうやって聞いてくれます。選択肢はクリックで選べるし、自分で書いて答えることもできます。
正直、AとBの違いは、技術のことがわからないとよくわかりません。そういうときは「AとBを説明してください」と聞けば、噛み砕いて説明してくれます。
Aは、ログインのHTMLだけを追加して、今のスタイルをそのまま使う。Bは、見た目のCSSを共通のファイルにして、新規登録とログインの両方がそれを読み込む。Bは整理をしてくれるだけなので、僕はAにしました。
わからないことをサボらずに聞いていくと、「こういうときはこういうことをやるのか」という一般的な知識が少しずつ入ってきます。AIにコードのことを頼むのも、うまくなっていくと思います。これがAI時代の学び方なのかな、と個人的には思っています。
バイブコーディングでは、仕様を詰めた方がいいです。でも、僕らは技術のことはわかりません。僕もエンジニアではないので、わかりません。エージェントの方が、たぶん僕らよりはコードのことをわかっています。だから、エージェントに聞いて計画を立ててもらう。このプランニングがめちゃくちゃ重要です。
これはAIに限った話ではありません。意味がわからないまま進めると、途中で「これ何のためにやってるんだっけ」と不安になります。計画を立てて、「これがダメだったから次はこうしよう」と進めた方が、的確に進められます。
質問に答えると、AIが実装の計画を作ってくれます。「View Plan」を押すと、どういう方針で作るか、やること（ToDo）は何かが、中身のエリアにまとまって表示されます。
この内容でよければ「Build」を押します。Agentモードに切り替わって、作業が始まります。
Planモードは、Cursorを使ううえで僕がかなり重要だと思っている機能です。ぜひ覚えておいてください。