デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
Cursorには、ブラウザの機能があります。デザインツールっぽく見た目を直せる、けっこう便利な機能です。
これまでは、Chromeなど別のアプリのブラウザで画面を確認していました。Cursorでは、中身のエリアにブラウザを開けます。
どこで開くのかわかりづらいUIなのですが、右上の三点のアイコンをクリックすると、いちばん上に「Open Browser」があります。これを押すとブラウザが出てきます。
「Enter URL」の欄に、普通のサイトのURLを入れればインターネットのページが開きます。開発環境のURL（僕の場合は localhost:3000）を入れれば、作った画面が開きます。
ブラウザの右上にパネルのボタンが並んでいます。左から3番目くらいのボタンを押すと、パネルが開きます。
選択のボタンを青色のオンにして、画面の文章などをクリックすると、右側にその要素のプロパティが表示されます。Figmaなどのデザインツールを使っている人はもう気づくと思いますが、デザインツールのように見た目をいじれます。
僕が試したのは、こんなことです。
色のトークンを定義していれば、ここに定義した色のリストが出て、そこから選ぶこともできます。今回の開発環境では定義していないので、何も出ません。
このままでは、変更はまだコードに適用されていません。「Apply」を押すと、AIがこのスタイルをコードに実装してくれます。
戻したいときは「Undo」を押せば最初の状態に、1つ前に戻したいときは戻るボタンを押せば戻れると思います。
Applyして待っていると反映されました。ブラウザを再読み込みしてもボタンのままになっていて、別のブラウザで開いた画面も変わっていました。僕のときは、背景が意図せず変わってしまうこともありました。思った通りにならないところは、AIに直してもらいましょう。
これはデザインツールではないので、要素を増やすといった作業は、自分で実装するかAIに頼みます。そうして作ったものをベースに、スタイルだけを変えるのに使うと便利です。
こういう機能は、他のツールにはあまりないと思います。慣れは必要かもしれませんが、細かいところをいじってパターンを作りたいときには向いているので、覚えておくと便利です。僕は、これもCursorを使うメリットの1つだと思っています。