必要なもの。
セットアップガイドで無料のデザインヘルパーを入れたCursor、空のフォルダ、そしてページが誰のためのものかという明確なイメージです。無料のHobbyティアで最初のプロトタイプには十分です。
プロンプトの前にブリーフを書く。
一度書いた1段落は、後からの20回の修正指示に勝ります。想定読者、唯一のCTA、セクションの順序を名指しします——例えば、見出しとCTA付きのヒーロー、機能ブロック3つ、お客様の声1つ、フッター、というように。出力にも制約をかけましょう。HTMLファイル1つ、スタイルはインライン、フレームワークなし、システムフォントです。
6ステップで作る。
- Cursorで空のフォルダを開き、ブリーフをチャットに貼り付けます。
- インラインCSS付きの単一のindex.htmlを依頼します——1ファイルにすることで反復が速くなります。
- ブラウザでファイルを開き、作り手ではなく訪問者として読みます。
- 余白、階層、コントラストといったデザイン用語で、変更点をエージェントに伝えます——1メッセージにつき1つか2つの変更に留めます。
- /responsive-previewコマンドを実行し、モバイル、タブレット、デスクトップ幅を監査します。
- 監査で指摘された箇所を直したら、そこで止めます——プロトタイプの役目は判断されることであり、磨き上げることではありません。
デザイナーとしてチェックする。
無料のブラウザツールResponsive Previewは、3つの幅を並べて同期スクロールで表示します——ウィンドウをリサイズするより速いやり方です。モバイルでの横方向オーバーフロー、約80文字を超える行の長さ、44ピクセル未満のタップターゲットに注意してください。
プロトタイプから公開ページへ。
プロトタイプの検証が済んだら、どこかの無料の静的ホストにそのHTMLを公開するか、コード保守をやめて年額$19のCarrdテンプレートにカスタムドメインで作り直しましょう。どちらの道を選ぶにせよ、その前にLaunch Checklist Promptの監査を実行してください。
費用について。
プロトタイプ自体は、Cursorの無料Hobbyティアなら無料です。プロトタイピングを日常的に行うなら、月額$20のProでエージェントの上限が外れます——このCursor紹介リンクで初月50％オフになります。