你需要準備的東西。
已安裝 Cursor,並依照設定指南加入免費設計小工具、一個空資料夾,以及對這個頁面是給誰看的有清楚概念。免費的 Hobby 方案就足夠做出第一版原型。
先寫簡介,再下提示詞。
一次寫好一段簡介,勝過事後修改二十次。寫清楚目標受眾、單一的行動呼籲,以及各區塊的順序 — 例如:帶標題與 CTA 的 hero 區、三個功能區塊、一則客戶見證、頁尾。也要限制輸出方式:一個 HTML 檔案、樣式寫在行內、不使用框架、使用系統字型。
六個步驟做出原型。
- 在 Cursor 中開啟空資料夾,把簡介貼進對話中。
- 要求產出單一的 index.html,樣式寫在行內 — 單一檔案能讓迭代更快。
- 在瀏覽器中打開這個檔案,用訪客的角度而不是建構者的角度來看它。
- 用設計上的語彙告訴 agent 要改什麼 — 間距、層次、對比 — 每則訊息只提一兩項變更。
- 執行 /responsive-preview 指令,檢查手機、平板與桌機寬度。
- 修正檢查標出的問題後就停手 — 原型的任務是被評估,不是被打磨到完美。
用設計師的眼光檢查它。
免費的瀏覽器工具 Responsive Preview 會並排顯示三種寬度的頁面,並同步捲動 — 比手動調整視窗大小快得多。留意手機版上的水平溢出、超過約 80 字元的行長,以及小於 44 像素的點擊區域。
從原型到正式上線頁面。
如果原型驗證通過,可以把 HTML 發布到任何免費的靜態主機上,或是跳過程式碼維護,改用 Carrd 版型加上一年 $19 的自訂網域重新建置。不論選哪條路,先跑一次 Launch Checklist Prompt 檢查。
這需要花多少錢。
原型本身:不花錢,在 Cursor 免費的 Hobby 方案上就能完成。如果你經常做原型,Pro 方案每月 $20,可以解除 agent 使用額度限制 — 你可以使用這個 Cursor 推薦連結,第一個月享 5 折優惠。