デザイナーにとってのCursorとは。
CursorはAIエージェントを内蔵したコードエディタです。チャットでやりたいことを説明すれば、目の前のファイルをエージェントが書いたり編集したりします。デザイナーにとっては、静的なモックアップの代わりに動くプロトタイプが手に入るということです——ブラウザで開いて、リサイズして、そのまま引き渡せる本物のHTMLとCSSです。Hobbyティアは無料、Proは月額$20です。
インストールしてプロジェクトを開く。
- cursor.comからCursorをダウンロードしてインストールします——macOS、Windows、Linux向けのビルドがあります。
- サインインするかアカウントを作成します。無料のHobbyティアにクレジットカードは不要です。
- フォルダを開きます——既存のプロジェクトでも、プロトタイプ用の空フォルダでも構いません。
- チャットパネルを開き、簡単なお願いをしてエージェントが応答するか確認します。
無料のデザインヘルパー2つを追加する。
どちらもこの店からの無料ダウンロードで、追加にかかる時間は1つ約1分です。
- Responsive Previewコマンド——ページをモバイル、タブレット、デスクトップ幅でスクリーンショットし、チャット上でパス・警告・失敗のレイアウト監査を返す/responsive-previewスラッシュコマンドです。
- Ghost Wireframeスキル——一貫したゴーストロールでスケルトンUIのワイヤーフレームを生成し、スタイリング前にレイアウトをブロックアウトできます。
最初のデザインパスを実行する。
- プロジェクトのページを開くか、エージェントにシンプルなページのひな形を作ってもらいます。
- そのページで/responsive-previewコマンドを実行します。
- 監査結果を読みます——オーバーフロー、窮屈なタップターゲット、ブレークポイントの問題は警告または失敗として表示されます。
- 失敗した箇所の修正をエージェントに依頼し、もう一度コマンドを実行します。
費用について。
Hobbyティアはエージェントのリクエスト数が限られていますが無料で、エディタを学ぶには十分です。月額$20のProはエージェントの上限を拡張し、フロンティアモデルへのアクセスとクラウドエージェントも追加されます——日常的なプロトタイピング作業はここに落ち着きます。Proを選ぶなら、このCursor紹介リンクで初月50％オフになります。詳しくはデザイナーにとってCursorは価値があるか？をご覧ください。
Cursorが不向きな場合。
ムードボード、ビジュアル探索、クライアント向けモックアップなど、コードを一切見たくない場合は、どんなエディタよりデザインツールの方が向いています。目指すのがプロトタイプではなく実際に公開する1ページのサイトなら、Carrdテンプレートならエディタを開かずにたどり着けます。