從一個想法到 Web App：我與 Claude 一起蓋產品的 30 天紀錄

前言：為什麼是 Claude AI 這個主題

今年鐵人賽，我選擇了「Claude AI」這個主題。原因很單純——過去半年多，我幾乎每天都在跟 Claude 一起工作，從發想、寫程式、除錯到規劃內容，它已經不只是工具，更像是一個隨時待命的協作夥伴。

根據 Anthropic 官方統計，台灣在全球 Claude.ai 用量國家中排名第 19，人均使用指數則排名第 16。Claude 作為 Anthropic 旗下的主力語言模型，長期以強大的程式能力深受開發者喜愛。但 2026 年的 Claude 產品線，早已不只是工程師寫程式的好夥伴 Claude Code。像 Claude Cowork、Claude Design 這類產品的推出，讓非工程背景的使用者也能在設計、文書處理、資料分析等日常工作中，感受到 Claude 帶來的效率提升。軟體開發只佔了整體使用場景約 36%，其餘高達 64% 的跨界應用，正在各行各業裡遍地開花。

這也是我想寫這系列文章的原因：與其單純介紹「Claude 能做什麼」，我更想用一個真實的產品開發歷程，展示「Claude 怎麼參與一個 Web App 從 0 到 1 的過程」——包含規劃、架構決策、踩坑、取捨，以及人與 AI 之間怎麼分工。

這 30 天要蓋什麼

我會用這 30 天，實際紀錄一個正在開發中的產品：一個結合 MBTI 互動測驗 與 21 天個人成長計畫 的 Web App。使用者做完測驗後，不只拿到一份結果報告，還能進一步解鎖一份為期 21 天、依人格類型客製化的行動計畫。

選擇這個產品當作系列的主軸，是因為它剛好涵蓋了現代 Web App 開發會遇到的大部分課題：

• 前端架構與狀態管理（React + TypeScript）
• 使用者流程與互動體驗設計
• 資料模型設計（題庫、計分邏輯、成長計畫內容）
• 免費 / 付費內容分層與付款機制
• AI 功能的整合、成本與安全性
• 會員系統與資料安全（RLS）
• SEO、無障礙與響應式設計
• 測試、部署與維運

而貫穿這一切的，是我如何與 Claude 協作完成這些決策與實作——包含哪些工作適合交給 AI、哪些必須自己把關，以及在協作過程中學到的眉角。

系列文章的定位：技術紀錄，不是完整教學

在往下走之前，我想先講清楚這系列文章的性質，避免讀者有錯誤期待。

這不是一套「照著做就能複製同一個產品」的教學文，也不會是逐行程式碼的 code walkthrough。它比較像是一份開發日誌——記錄我在每個階段做了什麼決策、為什麼這樣選、遇到什麼問題、怎麼解決，以及 Claude 在其中扮演了什麼角色。

同樣的技術棧，不同人會做出完全不同的架構決定。我更想分享「為什麼」，而不是單純貼程式碼；比起完整還原每一行實作，我覺得對讀者更有價值的，是那些做決策當下的思考過程，以及事後回頭看會想修正的地方。

與 Claude 協作，我在意的幾件事

在正式進入規劃與架構之前，先分享幾個這半年跟 Claude 協作下來，慢慢養成的習慣，這些心得會貫穿接下來 30 天的內容：

• 把 Claude 當成一個很強的資深工程師，而不是自動產出機。丟一句「幫我做個登入頁」跟先講清楚使用情境、資料流、邊界條件，得到的結果天差地遠。好的輸出往往來自好的提問。
• 架構決策自己下，實作細節交給 AI 加速。像是要不要用某個狀態管理方案、資料模型怎麼設計，這類會影響長期維護性的決策，我會自己想清楚方向，再讓 Claude 幫忙把想法落地、補齊我沒想到的邊界情況。
• AI 寫的程式碼一定要自己看懂再用。特別是牽涉到資料驗證、權限控管這類邏輯，即使 Claude 給的方案看起來合理，我還是會逐行確認，這也是這系列文章中我會特別花時間紀錄的部分。
• 把 Claude 拉進「討論」而不只是「執行」。很多時候我會先跟它辯論一個設計選擇的優缺點，這個來回討論的過程，往往比最終產出的程式碼更有收穫。

給讀者的路線圖

接下來的 30 天，大致會分成幾個階段：

1. Day 1–4：產品定位與規劃——動機、MVP 拆解、使用者與情境、流程設計
2. Day 5–13：前端核心開發——技術選型、架構、資料模型、狀態管理、測試
3. Day 14–18：結果頁與成長計畫——內容分層、資料化、21 天計畫設計
4. Day 19–23：AI 與後端整合——AI 使用範圍、成本安全、會員系統、付款機制
5. Day 24–27：SEO 與體驗優化——單頁式網站 SEO、結構化資料、無障礙設計
6. Day 28–30：收尾——測試、部署維運、完整回顧

每篇文章我都會盡量點出「跟前一天的銜接點」與「為下一篇鋪的梗」，讓整個系列讀起來像一條完整的開發脈絡，而不是 30 篇各自獨立的短文。

結語

如果你也對「怎麼把 AI 真正整合進一個產品的開發流程」感興趣，歡迎跟著這系列一起走完這 30 天。

下一篇（Day 2），我會把今天談到的產品願景，收斂成一個範圍明確、可執行的 MVP——說明哪些功能會先砍掉、哪些是核心中的核心不能妥協，這也是從「想法」正式走向「開發」的第一步。