Agentic Research
首頁/模板/週末做出一個能用的原型網站:從想法到可分享連結

週末做出一個能用的原型網站:從想法到可分享連結

2026/09/3010 分鐘君澤智庫最後更新 2026/09/30
這篇屬於模板主題應用場景AI Agent

你有一個產品想法,最想知道的只有一件事:到底有沒有人要。這個問題用嘴巴問幾乎得不到答案——你得到的會是客氣的形容詞。只有一個能點、能輸入、能存資料的東西擺在目標使用者面前,你才可能看到接近真實的行為。過去「做個能看的東西」這件事本身的成本高到足以擋住驗證,現在有一類 AI 生成工具,讓不寫程式的人也能在一個週末做出可操作的原型。這篇是操作配方:照著做,從一個模糊的想法,走到一條可分享的連結加一批真實使用者回饋。

這個場景解決什麼

先定義清楚這個週末要產出什麼,不然會做成四不像。

痛點是三段式的:想法停在「說不清楚」的階段,別人聽完只能禮貌點頭;直接開發正式版,成本與時間高到驗錯方向也來不及回頭;而沒有可操作的東西,所有討論都發生在形容詞層面(「我覺得使用者會喜歡」),無法被反駁也無法被證實。

「能用的原型」的定義,四條全滿足才算數:

  1. 有一條核心流程跑得通(使用者從進來到完成一件事)
  2. 別人在自己的裝置上打得開、用得了
  3. 輸入的資料會被存下來,重新整理不會消失
  4. 全程不需要你在旁邊解說

同時明確原型不是什麼:不是正式產品。它沒有備份、沒有監控、安全性未經加固,它的任務是驗證,不是營運。把這句話記著,後面好幾個踩坑都從忘記它開始。

時間預算:總預算一個週末(兩天的可投入時間)。每個步驟都有該停的節點,時間到就砍範圍,不砍品質關卡——寧可少做一個功能,不可跳過一次驗收。

工具組合與前置準備

這類工具的能力邊界迭代很快,以下描述的是角色分工而非功能清單;實際能力、定價與免費額度一律以各家官網與文件為準。

工具常見角色什麼時候優先選它
v0偏介面與前端頁面生成,快速產出可看的畫面你要驗證的是「畫面與流程說不說得通」,從頁面切入
Lovable偏完整應用生成,通常能直接接資料庫與登入原型需要存資料、需要區分使用者
Bolt在瀏覽器裡跑完整專案,邊改邊預覽、可取得程式碼你想拿到程式碼,之後自己或找工程師接手

三者能力高度重疊,彼此之間的差異,遠小於「你有沒有把規格寫清楚」造成的差異。選擇建議只有一條:你手上哪個已經有帳號、跑得起來,就用哪個。不要花週末的一半時間橫向評比三個工具——那是拖延,不是選型。系統性的選型方法見選 AI 工具的判斷框架。

前置準備清單(開工前全部完成):

  • 帳號:選定的生成工具、常用 email;打算匯出程式碼的話,準備好程式碼託管帳號
  • 素材:想法的一句話描述;一兩個你喜歡的參考網站(可選,但能省很多輪對話)
  • 資料規則:原型全程用假資料,不放任何真實個資與公司機密。涉及公司資料時,先確認資料分級允許你做什麼,見企業資料安全基本盤

一、把想法收斂成一頁規格

生成工具對輸入品質極度敏感。「幫我做一個電商網站」和一頁規格,產出的東西差的不是一點,是方向。一頁規格照這個模板填:

產品一句話:給(什麼人),解決(什麼問題)。
核心流程:使用者從進來 →(步驟)→(步驟)→ 完成(什麼事)。
          把涉及的畫面依序列出,最多五個。
第一版必須有:最多三項。
第一版明確不做:寫出來(之後用來擋住自己)。
資料:原型需要存什麼;每筆資料有哪些欄位。
成功的樣子:使用者完成(什麼動作),原型就算達成任務。

填完做兩個自我判斷:

  • 寫不出「成功的樣子」:想法還沒收斂,先別開生成工具。回去跟對話式 AI 聊:把你的想法丟給它,請它扮演一個挑剔的目標使用者連續追問你(「我為什麼不用現有的做法」「這件事現在怎麼解決」),通常問到第三、四輪,你就知道自己真正要驗證的是什麼。
  • 「必須有」超過三項:砍到三項為止。一個週末只裝得下一條核心流程,多塞的每一項都在稀釋它。

二、第一輪產出——先要骨架,不要細節

第一則指令把一頁規格整段貼給工具,外加一句話:「請先做出核心流程跑得通的版本,清單內容用假資料,先不要做登入與付款。」

拿到第一版之後,按順序做三件事:

  1. 把核心流程自己點一遍,先不要看美醜——流程通不通是唯一重要的事
  2. 列出最重要的三個修改點,寫下來,這一輪只改這三個
  3. 方向整個錯了就重來:回滾到上一個版本或重開專案,不要在錯的結構上硬改

之後每一輪迭代都遵守兩條紀律:

  • 指令要指向具體位置與期望行為。「訂單頁按儲存沒有反應,我期望儲存後出現在下方清單」是可以執行的;「感覺不太行,再優化一下」會得到一次抽獎。
  • 一輪只改一類事情:這一輪修流程,下一輪調資料,再下一輪才碰外觀。混在一起改,壞掉時你不會知道是哪句指令造成的。

三、接資料庫與登入

順序是先資料、後登入。

資料表:把規格裡「資料」那段直接給工具,讓它建立資料表(哪幾張表、每張表哪些欄位、表與表怎麼關聯)。建好後手動新增兩筆假資料,重新整理頁面,確認資料真的被讀出來顯示。

登入:優先用生成平台內建或整合的登入機制(email 驗證或第三方登入)。不要讓工具手寫帳號密碼系統——密碼儲存、工作階段管理、權限檢查,每一環都是安全黑洞,原型不該自己扛這些。

這一步的驗收只有兩條:重新整理不掉資料;兩個不同帳號登入,互相看不到對方的資料。

如果平台的資料庫功能需要付費或有限制而你想先跳過:可以退而用「單一使用者、資料存本機」的模式先跑,但要在一頁規格上記一筆「多使用者未驗證」——不要讓這個缺口隱形。

四、部署成可分享連結

用平台內建的發佈機制取得公開連結;若要匯出程式碼自行部署,選能完整匯出原始碼的平台,照其文件接上託管服務。

發佈前檢查三件事:

  1. 資料庫裡只有假資料——沒有你自己的真實姓名、電話、任何客戶資訊
  2. 金鑰沒有寫死在前端——直接問工具:「列出前端程式碼裡出現的所有金鑰與 API 端點」,逐一確認哪些不該公開
  3. 頁面上有原型標注——加一行「這是驗證用原型,請勿輸入真實個人資料」

把連結給別人時,附上一句話說明(這是做什麼的、請你試什麼),不要只丟一條裸連結——對方打開不知道要幹嘛,你收到的回饋就會是「看不懂」。

五、找真實使用者試用

這是整個週末最值錢的一步,也是最常被跳過的一步。做出連結就覺得完成了,等於做了考卷不對答案。

找誰:符合目標使用者輪廓的人。朋友與同事會對你客氣,他們的稱讚沒有資訊量。找幾位就好,一直約到新使用者的回饋開始重複前面的人,就夠了。

怎麼測(比找誰更重要):

  • 給任務,不給導覽:「請用它完成某某事」,然後閉嘴。他卡在哪裡,哪裡就是你的設計問題;你一開口解釋,這次觀察就作廢了。
  • 請他邊用邊說出想法:他在找什麼、他以為點了之後會發生什麼。
  • 記錄他的原話,不是你的轉譯。「使用者覺得不好用」沒有價值;「我以為按這裡會存檔」才是修改依據。
  • 最後問一題:「用一句話說說你覺得這是做什麼的?」答案跟你的「產品一句話」對不上,問題在表達層,不在功能層。

回饋怎麼分類:分成「核心假設問題」(使用者根本不懂、不想要、流程方向錯了)與「體驗細節問題」(文案、顏色、速度)。只有前者值得回去改原型;後者記下來,留給正式版。

六、知道什麼時候該停——哪些需求這類工具做不好

生成工具的能力邊界是這個配方裡最需要誠實面對的部分。下表是「停損訊號」:當你要驗證的核心假設正好落在表裡,原型這條路本身就是錯的,應該改用人工模擬(先用人肉把服務流程跑一遍驗證需求)或直接找專業的人。

需求類型為什麼這類工具做不好該怎麼辦
複雜權限與審批(多角色可見性、多級簽核)畫面生得出來,權限模型很容易錯,而且錯得看不出來核心需求就找工程師評估;原型只示範單一角色
金流與真實付款涉及資金安全與法規遵循,原型級實作不可信絕不接真實付款;用假流程表達意圖即可
與既有內部系統整合需要憑證、網路權限與介面規格,超出生成工具範圍見把既有 SaaS 用 n8n 串成一條流程
高度客製化互動與品牌視覺做得出來,但反覆迭代的時間成本高於找人做視覺本身是核心假設時,找設計師做高傳真稿
真實個資與受監管場景(醫療、理財建議等)合規問題不是原型工具能解決的直接停,見什麼時候不該用 AI
高併發與效能原型架構根本不為負載設計「撐不撐得住」是核心假設時,需要專業壓測

判斷原則一句話:原型回答「有沒有人的問題」,不回答「系統行不行的問題」。你要驗證的問題屬於後者時,別為難原型,也別為難自己。

成果與驗收標準

檢查點通過標準沒通過怎麼辦
一頁規格別人讀完能說出產品給誰、做什麼、明確不做什麼回到第一節;先不要開生成工具
核心流程陌生人無人引導能完成一次核心動作砍掉次要畫面,只修主流程
資料與登入重新整理不掉資料;兩個帳號互看不到對方資料請工具檢查資料表關聯與登入設定
可分享連結別人的裝置與瀏覽器打得開;頁面有原型標注、無真實資料檢查發佈設定,清掉敏感內容再發
使用者試用有任務觀察紀錄,含使用者原話與卡點位置約不到目標使用者時,先驗證「使用者是誰」這個更根本的假設
停損判斷你說得出原型驗證了什麼、沒驗證什麼、下一步是什麼把這三句話寫下來——它們才是週末真正的產出

常見踩坑

  • 第一輪就想塞進全部願景:工具會產出一個樣樣都有的四不像,之後改一處壞三處。規格裡「必須有最多三項」就是為了擋這件事。
  • 無盡調整視覺:原型驗證的是價值,不是美感。每次想調顏色時,把衝動寫進「明確不做」清單,週末結束前不準碰。
  • 捨不得重來:結構錯掉時,重開一個專案通常比修補快。沉沒成本是原型週末最大的敵人。
  • 拿原型當正式產品營運:讓真實使用者存真實資料、不做備份與安全加固,出事只是時間問題。驗證結束就讓它功成身退。
  • 只聽好話:客氣的稱讚沒有資訊量,有價值的是卡點與原話。聽到「還不錯」要追問「你剛剛卡在哪裡」。
  • 規格沒寫就直接生成:等於把產品決策外包給模型的訓練資料,產出的是「平均同類產品」,不是你的想法。

下一步