Prototyper
Prototyper (founded by Thijs Verreck) · 程式設計
Prototyper 是 AI 原型設計工具，代理人在共用畫布上製作出可執行的 React 應用、線框稿與簡報，團隊能直接編輯。
關於 Prototyper
About
Prototyper 是什麼
Prototyper 是跑在瀏覽器裡的設計與開發畫布。你描述一個畫面，或隨手畫幾個方框，代理人就寫出真正的 React 與 Tailwind 程式碼，在工作區裡編譯、執行。它沒有另外的匯出階段，因為會動的畫面本身就是成品。
代理人不必用 Prototyper 內建的那一個。Claude Code、Codex、Cursor 與其他 MCP 用戶端都能接上同一塊畫布，讀取專案檔案、撰寫程式、從終端機開出真正的 pull request。你付的是畫布與內建助理的費用，原有的訂閱可以繼續用。
限制很實際。它是網頁應用，重量級的本機工具仍留在外面。內建助理有每週訊息上限，額度用完後依用量計費，免費工作區只能開兩塊畫布。想要乾淨的版本控制，還是得懂分支。
開始使用
- 到 prototyper.co 註冊，開啟第一個工作區。免費方案不用綁卡。
- 把需求簡報丟上畫布，或在輸入框描述畫面，例如「一張方案卡片加一張發票表格的帳務設定頁」。
- 讓代理人開始建置，接著操作預覽。在表單裡輸入真實資料、拉動視窗大小、把各種狀態點過一遍。
- 再要兩個版本，並排比較，留下禁得起討論的那一個。
- 接上 GitHub 儲存庫，或貼上 MCP 安裝指令，之後就能在 Cursor、VS Code 或終端機裡繼續做。
產品資訊
快速了解 Prototyper 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 產品設計師：你畫出流程，代理人把它變成可執行的 React 畫面，當天下午就能拿真人測試。前提是你能自在小應用在瀏覽器裡寫程式的環境。
- 前端工程師：畫布雙向同步，移動圖形會改程式，改程式也會移動圖形。省下之後重做那個本來就要丟掉的假畫面。
- 新創創辦人：給投資人看的展示，直接變成可以交到對方手上的產品。免費方案的兩塊工作區，剛好放一個想法加一份備用。
- 小團隊的設計主管：免費檢視席次讓客戶與關係人能點進執行中的版本，不必付授權費。
任務
- 把文字簡報變成可點的應用：AI 原型產生器讀取畫布上的簡報，產出會編譯的應用，而不是一張靜態圖。
- 從手繪草圖做線框稿：線框稿產生器接住你畫的方框，回傳排好版的畫面，再靠指標點選微調。
- 製作發表簡報：簡報跟應用長在同一塊畫布上，截圖與產品永遠不會走鐘。
- 並排測試不同版本：三個候選版本擺在一起，留下討論中勝出的那一個，而不是在對話框裡吵。
情境
- 一天的驗證衝刺：早上描述畫面，中午過後找五個人測試，晚上就把存活版本推出去。
- 與非設計背景的人開設計評會：大家開同一個連結、直接操作原型，比靜態假畫面更快結束版面爭論。
- 交接給工程團隊：原型直接上線只差一步，通過使用者測試的程式就是上線的那份程式。
主要功能
會回寫的畫布
畫布上每個視窗都是正在執行的應用，不是算圖出來的圖片。移動一個圖形，底下的 React 跟著重寫；在編輯器改程式，畫面上的圖形也跟著動。整件事的重點是整個專案只有一份活著的成品，從第一張草圖到最後上線的版本都一樣。
帶上你自己的代理人
Prototyper 支援 Claude Code、Codex、Cursor 與其他 MCP 用戶端。貼一行安裝指令，你已經付費的代理人就能讀取專案檔案、撰寫元件、開出真正的 pull request，成果同時出現在旁邊。訂閱照用，習慣不用改。
同一塊畫布上跑多個代理人
你可以同時派三個代理人上同一塊畫布。一個做介面、一個寫測試、一個擬文案，三個一起在你眼前工作。不用開進度會議，進度本身就看得見。
用設計規則取代通用輸出
內建代理人依照一套設計規則寫程式，這套規則專門對付 AI 生成介面的慣性毛病。再加上五十多個有型別、符合無障礙規範的基礎元件與你自己的設計變數，成品看起來像被挑過，而不是預設值。品牌色、間距與元件會帶進每一次算圖。
人類游標與機器人同場協作
團隊成員顯示為游標，代理人顯示為機器人，大家在同一間房裡改同一批檔案。你看得到誰動了什麼，也能在空白狀態旁留一張便利貼，讓代理人準確理解你的意思。版本紀錄依方案保留七到九十天。
真實預覽與真實匯出
預覽在工作區裡直接編譯，沒有建置步驟，程式一到位，原型就能互動。付費方案下，代理人可以把同一份程式匯出到你的儲存庫。這裡的 AI 應用開發工具不會把成果鎖在專有格式裡。
優缺點
優點
- 原型真的會跑，使用者測試抓到的是真實問題，不是想像出來的問題。
- 原本付費的 Claude Code、Codex 或 Cursor 訂閱可以繼續用。
- 設計與程式保持同步，上線前少掉重做那一段。
- 免費檢視席次讓小團隊找關係人審查的成本很低。
- 版本紀錄與單檔回溯依方案涵蓋七到九十天。
缺點
- 免費方案每週只有 5 則 AI 訊息與 100 次 MCP 呼叫，認真做一個專案很快就見底。
- 內建 AI 在額度用完後改用計量扣點，用量大時帳單金額不是標價能預測的。
- 工作區在瀏覽器裡，離線不能用，也沒有本機建置流程。
- 沒用 React 的團隊吃不到主要好處，生成的程式就是 React 加 Tailwind。
常見問題
做出可執行的 React 應用、線框稿與簡報，全部放在共用畫布上。成果會在工作區裡編譯執行，所以你能點、能輸入、能測試，不必只看截圖。
相關內容
探索與 Prototyper 相關的工具、技能與文章。
Prototyper 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。