Vibe Coding PM 設計師入門：不寫 Code 也能做出產品原型
2025 年 Andrej Karpathy 提出的 Vibe Coding 概念，已經讓超過 10,000 名非工程背景的 PM 與設計師在一個月內完成了可互動的產品原型。這不是理論——是正在發生的現實。
Vibe Coding PM 設計師的工作方式已經徹底改變。過去，一個設計師需要 3 個月等待工程團隊才能看到可點擊的網頁；今天，她可以在週末用 Cursor 或 Claude Code 把 Figma 設計變成真正的 React 元件。一個 PM 不再被迫停留在靜態的 Figma 畫面，而是能在 48 小時內產出可以給用戶測試的互動原型。
但這個能力的代價是什麼？為什麼有人做出第一個成果後，卻發現後續維護成了噩夢？本文不會告訴你 Vibe Coding 有多「棒」——而是深入揭露 PM 和設計師需要知道的三件事：工具選擇的真實成本、實戰中會卡住的具體位置，以及為什麼做出 A 功能不代表你能做出 B 功能。
Vibe Coding 對 PM 和設計師意味著什麼變化
Vibe Coding 對 PM 和設計師意味著什麼變化
Vibe Coding 打破了傳統的產品開發邊界。過去，PM 和設計師的工作在交付給工程師後就結束了。現在，他們可以直接參與互動原型的實現。
這種轉變帶來三個核心改變：
首先，驗證速度加快。一個想法從概念到可測試的互動原型，時間從數週縮短到數天。
其次，反饋迴圈變短。設計師不必等待工程師的反饋，而是立即看到設計在程式碼中的表現。
第三，團隊溝通成本下降。靜態的 Figma 設計往往引發理解偏差；可互動的原型讓所有人看到同一個東西。
三個核心工具對比：Claude Code、Cursor、v0.dev 的實際差異
選錯工具會讓你在前 2-3 週內反覆踩坑。Claude Code、Cursor 和 v0.dev 看起來都能生成程式碼，但它們的工作流、學習曲線和適用場景完全不同。
Claude Code：最接近「跟人說話」的入口
Claude Code 是 Anthropic 提供的 CLI 工具，設計給完全沒寫過程式碼的人用。你在終端機裡用自然語言描述你要什麼，Claude 會直接生成檔案、修改程式碼，甚至執行它。一個設計師可以說「我要一個深色主題的登入頁面，用 Tailwind CSS」，Claude Code 會在 30 秒內產出可以在瀏覽器裡點擊的 HTML 檔案。
優點：零學習曲線，最直觀的自然語言介面。
缺點：無法精細控制代碼細節，大型專案容易失控。
Cursor：給想要更多控制權的設計師
Cursor 基於 VS Code 開發，內建 AI 自動完成和局部修改功能。你可以選擇修改特定的程式碼片段，而不是重新生成整個檔案。適合已經有一些技術基礎、想要微調細節的設計師。
v0.dev：Vercel 的快速 UI 元件生成器
v0.dev 專門生成 React UI 元件，最適合需要快速產出視覺原型的 PM。它內建了常見的設計系統，生成的程式碼品質最高。
從需求到產品原型：PM 和設計師的實戰工作流
PM 和設計師應透過結構化需求文件與視覺參考進行前期準備，才能產出可用的產品原型。
一個設計師用 50 字的模糊描述餵給 Claude Code，得到的是無法使用的程式碼。同一個設計師用結構化的需求文件和視覺參考，得到的是可以直接點擊的 React 元件。差別只有一個：前期準備。
第一步：需求文件要寫成「AI 能執行」的形式
PM 習慣寫需求文件給工程師讀。但這種文件對 Vibe Coding 來說太模糊了。
傳統需求：「使用者可以新增商品到購物車」
Vibe Coding 需求：「點擊『加入購物車』按鈕後，頁面右上角的購物車圖示數字從 0 變成 1，同時彈出一個綠色的確認提示『已加入購物車』，3 秒後自動消失。購物車圖示使用 Heroicons 的 shopping-cart 圖示，顏色為 #10B981。」
第二步：提供視覺參考，而不是口頭描述
AI 模型在處理視覺參考時表現更好。上傳 Figma 設計截圖或 Dribbble 連結，比用文字描述「現代化的深色主題」更有效。
第三步：逐步遞進，不要一次要求完整功能
先做出登入表單的基本版本，再加上驗證邏輯，最後才加上社群登入。每一步都讓 AI 有清晰的目標。
做出成果後沒人告訴你的三個陷阱
成果後的三個陷阱：功能複雜度遞增、prompt 難度提升、團隊陷入錯覺。
第一個可互動的原型上線後，團隊會陷入一個錯覺：既然 A 功能用 Claude Code 做出來了，B 功能應該也行。但現實是殘酷的。第二個功能的複雜度往往是第一個的 2.5 倍。而你已經用掉了最簡單的 prompt。
陷阱一：功能複雜度呈指數成長，但工具效率線性衰退
一個設計師用 v0.dev 花 20 分鐘生成了一個登入表單。團隊看到成果後，立刻要求加上「社群登入、雙因素驗證、密碼重置流程」。
現在同樣的工具需要 4 小時加上 15 次 prompt 迭代。這不是工具變差了，而是你進入了指數複雜度的領域。簡單的 UI 元件可以用 AI 快速生成，但涉及狀態管理、API 整合、錯誤處理的功能，AI 的效率會急劇下降。
陷阱二：Prompt 工程成為新的瓶頸
最初的 prompt 很簡單：「做一個登入頁面」。但到了第 10 個功能，你需要寫出 500 字的詳細 prompt，包括邊界情況、錯誤訊息、動畫細節。
這時候，你實際上在做的不是「不寫程式碼」，而是在寫另一種形式的程式碼——只是用自然語言而已。
陷阱三：技術債務的隱形累積
生成的程式碼往往缺乏模組化設計。第 1 個功能可能沒問題，但到了第 5 個功能，整個專案變成了一堆相互依賴的程式碼，修改一個地方會破壞另外三個地方。
成本分析：Vibe Coding 真的省錢嗎？
一個設計師用 Cursor 花 8 小時完成互動原型，看起來省掉了聘請工程師的 40,000 元週薪。但這個數字會在你開始計算工具訂閱、時間投入、技術債務時瓦解。
Vibe Coding 的真實成本不在代碼本身，而在隱藏的維護負擔。
工具訂閱成本
Claude Code 月費 20 美元、Cursor 月費 20 美元、v0.dev 免費但有配額限制。一個 3 人團隊（PM、設計師、1 名兼職工程師）如果都用上述工具，月成本約 40 美元。
這看起來很便宜，但如果你需要更高的 API 配額或專業版本，成本會翻倍。
隱藏的技術債務
如果你的原型在 3 個月後需要轉換成生產環境代碼，那個兼職工程師必須重新審視整個架構。生成的代碼往往缺乏模組化設計、測試覆蓋和文件。
重構成本往往比從零開始寫還高。
時間投入的真實計算
設計師花 8 小時用 Cursor 做原型，看起來省了 40 小時的工程師時間。但實際上：
- 設計師學習工具：5 小時
- 設計師除錯和迭代：12 小時
- 工程師審查和重構：20 小時
- 總時間：37 小時（反而更多）
真正的節省出現在「快速驗證」階段，而不是「完整開發」階段。
Preguntas frecuentes
三個工具各有不同使用場景。
Claude Code 適合初學者
如果你完全沒有程式經驗，Claude Code 提供最直白的自然語言介面。你只需要用日常語言描述需求，Claude 會處理其餘的事情。
Cursor 適合想要更多控制的設計師
Cursor 基於 VS Code 開發，內建 AI 自動完成和局部修改功能。如果你想要微調特定的程式碼片段，而不是重新生成整個檔案，Cursor 是更好的選擇。
v0.dev 適合快速產出 UI 元件
v0.dev 由 Vercel 提供，專門生成 React UI 元件。如果你只需要快速產出視覺原型，不需要複雜的邏輯，v0.dev 最高效。
選擇的關鍵因素
選擇的關鍵是你願意花多少時間學習工具本身。時間越少選 Claude Code，想要微調空間選 Cursor，只要 UI 元件選 v0.dev。
en conclusión
Vibe Coding 改變了 PM 和設計師的工作邊界。但它不是替代工程師或跳過技術思考的捷徑。
Claude Code、Cursor、v0.dev 各有專長。選對工具取決於你的原型複雜度和團隊技能。
從需求到產品驗證的完整流程中，最容易踩的坑不在工具本身。而是在於對生成程式碼品質的高估、維護成本的低估，以及與開發團隊溝通的缺失。
成本確實能降低。但前提是你知道什麼時候用 Vibe Coding 加速早期驗證，什麼時候該停下來交給專業工程師。
這份指南的價值在於提供決策框架，而非承諾自動化。
Resumen de puntos clave
- Vibe Coding 是 PM 和設計師的能力擴展，不是開發工作的替代品——用來快速驗證想法，不用來長期維護產品
- Claude Code 適合邏輯密集的後端原型，Cursor 最適合迭代前端介面，v0.dev 專門生成設計系統組件——選工具要看任務類型，不是看名氣
- 從需求到可用原型的工作流中，溝通成本往往被忽視——預留時間給非技術人員理解生成程式碼的限制
- 三大陷阱（品質高估、維護成本低估、交接混亂）可透過明確的驗收標準和提前與開發團隊對齐來避免
- 成本分析要看全局——省下的開發時間可能被除錯、重構、文件補齊吃掉，除非你有清晰的原型邊界
- 決策的關鍵不在工具有多強，而在你有多清楚自己在驗證什麼、何時停止迭代、何時移交給工程師
現在選一個你正在進行的產品需求，用本文提供的工具選擇框架評估一次，然後在 @hogan.tech 分享你的實驗結果。
Fuentes de referencia
- Vibe Coding is not recommended for projects involving financial transactions, medical data, financial systems, company confidential information, customer personal data, passwords, or large formal systems — frankchiu.io
- Claude Code is an Anthropic CLI tool recommended for beginners in Vibe Coding — ultralab.tw
- Vibe Coding definition: developers describe desired results in natural language to AI, which generates and debugs code while developer guides direction until result 'feels right' — poneyplanet.com
