誰說做 App 要讀資工系？現在只要會「聊天」就好！
你是不是也曾經有過這種想法：「如果我能有個簡單的 App 來記錄小孩的零用錢就好了」，但一看教學要學什麼 HTML、CSS、JavaScript，直接被嚇跑？
現在有個新玩法叫 Vibe Coding。簡單來說，就是你不需要懂程式碼（Code），你只需要負責提供「感覺（Vibe）」和「需求」，剩下的髒活全部交給 AI。這次我們用 Claude Code 這個強大的工具，在 10 分鐘內做出一個可以實際在手機上運行的「小孩零用錢紀錄 App」。
什麼是 Claude Code？你可以把它想成「超級工程師」
如果你用過 ChatGPT 或 Claude 的網頁版，你可能習慣把程式碼複製貼上。但 Claude Code 不同，它直接住在你的電腦終端機（Terminal）裡，它可以直接幫你建立檔案、修改 Bug，甚至幫你把 App 部署到網路上。
你可以把它想像成一個隨叫隨到的資深工程師，你只要對他說：「這裡的按鈕改成紅色」、「幫我加一個計算總額的功能」，他就會直接在你的電腦裡把事情做完，你完全不用碰任何一行程式碼。
實作步驟：從 0 到 1 做出你的第一個 App
不需要安裝複雜的開發環境，只要跟著這三個步驟走：
第一步：用 Claude Code 建立原型
打開你的終端機，啟動 Claude Code 後，直接用最直覺的語言下指令。記得，Prompt 就像點餐，你說得越清楚，AI 做得越準。
你可以這樣對它說：
「我想做一個給小孩用的零用錢紀錄 App。功能要包含：輸入金額、選擇類別（如：買零食、買文具）、紀錄日期。介面要非常簡單，顏色要活潑，按鈕要大大的，讓小孩也能輕鬆操作。」
這時候 Claude Code 會開始瘋狂運作，幫你寫好所有的前端頁面和邏輯。如果你覺得顏色太醜，直接跟它說：「太像公司報表了，請改成像糖果店一樣的配色」，它會立刻幫你修改。
第二步：測試與微調（就像在對劇本）
App 出現後，你會發現有些小地方不順手。這時候不要氣餒，這就是 Vibe Coding 的精髓：不斷地對話直到感覺對了為止。
- 想加功能？ $\rightarrow$ 「幫我加一個『存錢目標』進度條，存到 500 元時會跳出慶祝煙火。」
- 想改排版？ $\rightarrow$ 「把紀錄清單改成卡片式設計，看起來更現代一點。」
- 發現 Bug？ $\rightarrow$ 「我輸入負數時 App 崩潰了，請幫我修好。」
第三步：用 Netlify 把 App 變成手機連結
程式寫好了，但它還在你的電腦裡，別人看不到。我們要把它「部署」到網路上。這裡推薦用 Netlify，這是一個讓開發者快速上線網站的工具，對我們這種非技術人員來說，簡直是救星。
- 註冊一個免費的 Netlify 帳號。
- 將 Claude Code 幫你產出的資料夾直接「拖曳」進 Netlify 的上傳區。
- 等待 10 秒鐘，Netlify 會給你一個網址（例如
my-kids-money.netlify.app）。
現在，你只要用手機瀏覽器打開這個網址，然後在 iPhone 或 Android 的設定中選擇「將此網頁加入主畫面」，它看起來就跟從 App Store 下載的 App 一模一樣了！
為什麼這件事很重要？
以前我們要做出這個小工具，可能需要：
- 學習 HTML/CSS $\rightarrow$ 2 週
- 學習 JavaScript 邏輯 $\rightarrow$ 1 個月
- 研究如何部署伺服器 $\rightarrow$ 1 週
- 總計：約 1.5 個月，且過程中可能會因為一個分號寫錯而崩潰 3 天。
現在用 Claude Code 的流程是：
- 描述需求 $\rightarrow$ 2 分鐘
- 微調介面 $\rightarrow$ 5 分鐘
- 上傳 Netlify $\rightarrow$ 3 分鐘
- 總計：10 分鐘，且過程中你只需要負責「決定要什麼」。
給完全不懂技術者的建議
如果你擔心自己「不會寫指令」，請記住：AI 現在已經能理解人類的自然語言了。你不需要學習什麼特殊的語法，就把它當成一個很聽話但需要明確指示的實習生。
如果你想嘗試，可以從生活中最簡單的小需求開始，例如：
- 一個簡單的「每日喝水提醒」計數器
- 一個專門記錄「台灣學測準備進度」的清單
- 一個幫公司同事計算「今天午餐誰出錢」的分帳工具
現在就打開 Claude Code 開始嘗試你的第一個 App 吧！
