07 · 跑通你的第一個產物
前面六篇講的是原理。這一篇是一次完整操作，二十分鐘，最後你手上會有一個能在瀏覽器裡開啟、能匯出、能繼續改的東西。
做一個落地頁。理由：單檔案、能一眼看出好壞、不依賴任何素材。
開始之前
第 1 步 · 挑型別和設計系統
新建一個，型別選「Prototype」。
設計系統這一步別跳。從庫裡挑一個跟你想要的氣質接近的。做開發者工具就找網格化、剋制那一類；做面向大眾的產品就找高對比、有表情那一類。
第 2 步 · 寫提示詞
不要寫「做一個好看的落地頁」。寫清楚三件事：賣什麼、給誰、要人做什麼。
text
做一個落地頁，產品是一個給小團隊用的會議紀要工具。
受眾：5 到 20 人的團隊裡那個負責組織會議的人。他們現在的做法是
會後自己整理，或者乾脆不整理。
頁面要讓他們相信：這件事可以自動做完，而且錄音不會外洩。
頁面結構：
1. 首屏 —— 一句話價值主張 + 一個主行動按鈕
2. 三個核心能力，各一句話
3. 一段說明資料怎麼處理（本地、不上傳、可刪除）
4. 三檔價格
5. 常見問題 4 條
6. 頁尾行動區
主行動是「免費試用 14 天」。語氣剋制，不要釋出會那種腔調。這段提示詞的關鍵不在長度，在於每一句都在回答一個它猜不出來的問題。
第 3 步 · 填需求表單
它會彈一張問卷。按 05 裡說的填：受眾寫狀態不寫身份，語氣用參照物，有沒有真資料說清楚。
價格那一塊，如果你還沒定，就在表單裡寫「價格是示意，請標註」。它會照做，不會編三個看起來很真的數字。
第 4 步 · 生成，看左邊
生成過程中左邊那欄值得看完第一次。你能看到它讀了哪些上下文、載入了哪幾條 Craft 規則、寫了哪些檔案。第二次之後就不用盯了，但第一次看一遍，你會對「它到底理解了什麼」有個準。
第 5 步 · 先驗收，再改
出來之後別急著說「再好看一點」。按這個清單過一遍：
- [ ] 首屏那句話，一個不瞭解產品的人能不能看懂
- [ ] 主行動按鈕是不是唯一的、顯眼的
- [ ] 三個核心能力有沒有說人話，還是三個名詞
- [ ] 價格那塊的數字是真的，還是標了示意
- [ ] 手機寬度下有沒有橫向滾動
- [ ] 按鈕有沒有 hover 和 disabled 狀態
- [ ] 有沒有紫藍漸變、通用圖示、編出來的「10,000+ 使用者」
最後一條是 AI 味的常見成分。有的話直接指出來讓它刪。
第 6 步 · 改
三種改法，按成本從低到高：
- 「Edit」 — 改一個詞、調一檔字號，直接在預覽裡改。
- 「Comment」/「Mark」 — 問題掛在某個元素或某塊區域上，圈出來說。
- 重新跟 Agent 說話 — 方向性的問題才值得這麼改。
方向性問題的說法示例：
text
第 3 段（資料處理那一段）現在讀起來像法務條款，但它其實是這一頁
最重要的賣點。請把它提到三個核心能力前面，重寫成一句人話加三個
具體做法，並且給它跟首屏同一級的視覺分量。第 7 步 · 匯出
匯出選項按你的用途：
| 用途 | 匯出成 |
|---|---|
| 自己看、發給同事 | HTML（素材內聯，單檔案） |
| 交給工程接著寫 | 直接用倉庫裡的原始檔 |
| 存檔、走審批 |
產物本來就在你的專案目錄裡，git 能管，能 diff，能回滾。
跑完之後
你已經走完一遍完整迴圈了。接下來兩條路：
第一次做出來的東西不會太好
這是正常的。官方教程裡那句話值得記住：第一版是工作草稿，不是成品。真正拉開差距的是後面的對照和精修，不是第一次的提示詞寫得多漂亮。