如何寫好v0 的提示詞，應該也適用於lovable等其他AI程式工具 核心框架：三個關鍵輸入 經過大量測試，v0團隊發現最好的提示詞都包含三個部分： 1. 產品表面（Product Surface） 具體要做什麼 2. 使用場景（Context of Use） 誰在什麼時候用，要解決什麼問題 3. 約束條件（Constraints & Taste） 怎麼做，有什麼限制 模板長這樣： 做一個[具體的組件、數據、功能]。 給[什麼人] 用， 在[什麼場景] 下， 為了[達成什麼目標]。 約束： - 平台/設備 - 視覺風格 - 佈局要求 第一部分：產品表面別說"做個儀表板"，說清楚儀錶板裡有什麼。 比如： 儀錶板顯示： - 前5 名銷售員的姓名和業績 - 團隊績效vs 目標的進度條 - 銷售漏斗（線索→ 合格→ 展示→ 成交） - 最近6 個月的業績趨勢圖你越具體，v0 就越不會瞎猜，也不會做一堆你用不上的功能。 第二部分：使用場景這是最容易被忽略，但影響最大的部分。 想想這幾個問題： - 誰在用？ - 什麼時候用？ - 要做什麼決策？ - 有多少時間？ 還是剛才那個儀錶板的例子： 銷售經理（不懂技術）在早會時用， 在辦公室的大顯示器上看， 快速找出表現不好的人，順便稱讚一下做得好的。 看出差別了嗎？ 同樣是儀表板，給銷售經理早會用，和給數據分析師深度分析用，設計完全不同。 前者要一眼看重點，後者需要詳細的篩選和下鑽功能。 Vercel 團隊做了個對比測試： 沒寫使用場景的版本： - 搜尋功能是假的（只有個框） - 購物車點不了 - 手機看起來一團糟 寫了使用場景的版本： - 搜尋和購物車都能用 - 完美適配手機 - 也自動增加了快速預覽和分類篩選 雖然多花了26 秒生成，但省掉了後續1-2 輪修改。算下來反而更快。 第三部分：約束條件 包括： - 風格偏好 - 設備假設 - 佈局期望 - 配色方案 - 回應式要求 比如： 專業但親切的感覺。 用卡片式佈局，層次清晰。 配色：綠色表示正常，黃色預警，紅色告急。 主要在大螢幕上用。 要有真實SaaS 產品的感覺。 v0 的預設設定已經不錯了，但具體的約束能讓它變得更好，而且程式碼更簡潔。 實測對比 Vercel 團隊做了三組對比測試，每組只改變一個變數。 測試1：使用場景的影響 模糊版： "要做個電商網站，要有商品清單、篩選和購物功能。" 清晰版： "時尚電商網站，給25-35 歲的年輕人用，主要在通勤時用手機瀏覽。他們會快速對比多個商品再下單。 做一個商品頁面，包括：可滑動的圖片、商品名稱、價格、描述、尺寸顏色選擇、加購按鈕。 頂部只要返回鍵和購物車圖示。乾淨高級的感覺。 " 結果：清晰版一次就做對了。模糊版再改1-2 輪。 測試2：產品表面的影響 模糊版："做個使用者資料頁。" 清晰版： "做個使用者資料頁，顯示：頭像、暱稱、使用者名稱、郵箱、簡介、註冊時間、活動統計（貼文數、評論數、粉絲數）、最近活動清單（帶時間戳記）、編輯和設定按鈕。" 測試3：約束條件的影響 基礎版： "做個客服工單儀表板。顯示：待處理工單、回應時間、客服表現、最近活動。" 詳細版： "做個客服工單儀表板。顯示：待處理工單、回應時間、客服表現、最近活動。 行動優先（主管在現場時用手機看）。 淺色主題，高對比。 配色：紅色表示緊急（超過24 小時），黃色中等，綠色正常。 最多3 列佈局。要有載入狀態。 " 關鍵區別：基礎版只是"能在手機上看"（桌面佈局縮小），詳細版是真正的"行動優先"。 後續迭代 生成之後，你有兩種改進方式： 1. 繼續寫提示詞 適合功能性改動，如加功能、改結構 2. 設計模式點選Design Mode，直接選取元素調整。適合快速改顏色、間距、字體這些視覺細節 記住：邏輯和結構用提示詞，視覺調整用設計模式。 最後給你一個完整的例子： 做一個客服儀錶盤，顯示： - 待處理工單數量 - 平均回應時間 - 依優先順序分類的工單（高/中/低） - 客服表現清單（顯示目前工作量） - 最近工單活動流 給客服主管用（管理5-10 個客服），在巡場時用手機看，為了防止客服過載，保證回應時間達標。 每30 分鐘檢查一次，識別負載過重的客服並重新分配工作。 約束： - 行動優先，淺色主題，高對比度 - 依優先配色：紅色緊急，黃色中等，綠色正常 - 顯示客服狀態標識（忙碌/空閒） - 手機上最多2 列 寫在最後 好的提示詞= 更好的結果+ 更快的速度。 下次用v0 時，試著多寫一點。說清楚給誰用的，為什麼需要它，怎麼用。 -- 原文地址見評論區
正在載入線程內容
正在從 X 取得原始推文，整理成清爽的閱讀畫面。
通常只需幾秒鐘，請稍候。