デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
画面が1つできたところで、Cursorの画面の見方を押さえておきます。
Cursorの画面は、主に3つのブロックでできています。
置き場所は設定で自由に変えられます。最初は、チャットが左か右のどちらかに出ていると思います。ほかに「ターミナル」というブロックもありますが、これは後のセクションで使います。
ファイル一覧には、自分が開いたフォルダの中身が全部出ます。つまり、ファインダーでさっき開いたフォルダと同じものです。どういうファイルが作られているのか、中身がどうなっているのかを、ここで見られます。
中身に表示されているのはテキストのデータなので、自分で書き換えることもできます。
僕は試しに、画面にあった「パスワードは8文字以上推奨」という文を「パスワードは果物の名前」に書き換えて、Command + S で保存しました。ブラウザで画面を開き直すと、表示が変わっていました。
ありえない文言ですが、エディターではこういう編集もできる、ということです。
ただし、変なところで改行したりすると、画面が崩れることがあります。コードがわかる人向けの使い方なので、試すなら文字だけを書き換えてください。崩れたら Command + Z で戻すか、AIに「元に戻して」と頼めば大丈夫です。
画面の右上で、ブロックの表示・非表示を切り替えられます。ノートパソコンで全部開くとごちゃっとするので、ここはかなり使います。
最近は「エージェントウィンドウ」という表示もできて、チャットだけをChatGPTのアプリのような専用の画面で開くこともできます。このあたりは新しい機能なので、また変わるかもしれません。