用 Claude Code 建立你的第一個 App：新手實戰指南

你有一個想法。你有 Claude Code。讓我們把想法變成真正的 App。

這份指南帶你從零開始建立一個完整、可部署的 App——即使你從來沒寫過程式碼。

我們要建什麼

專案：個人習慣追蹤器

一個簡單、漂亮的 App，可以：

新增你想追蹤的習慣
每天標記習慣完成
查看連續天數和進度
瀏覽每週總覽

需要時間：約 2 小時

需要技能：無（我們會用 vibe coding 一路完成！）

前置準備

開始前，確保你有：

已安裝 Claude Code

# 檢查是否已安裝
claude --version

# 如果沒有，用 npm 安裝
npm install -g @anthropic-ai/claude-code

Anthropic API 金鑰（Claude Max 訂閱或 API 存取權）
已安裝 Node.js（用於執行 App）
```
# 檢查
node --version
```

就這樣。開始建造吧！

第一部分：設置舞台（5 分鐘）

步驟 1：建立你的專案

# 建立新資料夾
mkdir habit-tracker
cd habit-tracker

# 啟動 Claude Code
claude

步驟 2：描述你的願景

你給 Claude 的第一則訊息：

我想建一個個人習慣追蹤器 App。

感覺：乾淨、有激勵感、用起來滿足。
想像像 Streaks 或 Habitify 那樣的 App——
極簡但令人愉悅。

我想要的功能：
- 用名稱和 emoji 新增習慣
- 勾選今天的習慣
- 查看每個習慣的連續天數
- 用簡單的週曆格子顯示完成狀況

用 React 和現代的技術棧。先讓它在本地運作，
之後再部署。

建立專案並給我看我們的起點。

接下來會發生什麼

Claude 會：

建立 React 專案（可能用 Vite）
設置基本結構
安裝必要的依賴
建立初始組件
展示你的起點

就看著它工作吧。 ✨

第二部分：第一版（20 分鐘）

步驟 3：審查建立的內容

Claude 設置好之後，問：

執行 App 並給我看目前有什麼。

你會看到一個基本的介面。它可能看起來很粗糙——沒關係！

步驟 4：開始優化

現在 vibe coding 開始了。自然地給回饋：

我看到基本的版面了。幾件事：

1. 習慣清單感覺太擠了——加更多呼吸空間
2. 我想要「新增習慣」按鈕更顯眼
3. 當我勾選習慣時，我想要有感覺——加一個
   滿足的動畫
4. 顏色感覺太平——讓它更有活力

先不要改功能，只讓它用起來感覺更好。

步驟 5：增加視覺光澤

繼續優化感覺：

更好了！現在：

- 背景太刺眼的白色了。
  用很淡的漸層柔化它。
- 習慣卡片應該有輕柔的陰影
- 習慣出現時加個漂亮的過渡效果
- Emoji 應該更大——它們是每個習慣的視覺識別

讓它感覺高級。

檢查點 1 ✅

到這裡，你應該有：

一個執行中的 App
好看的習慣卡片
流暢的動畫
討喜的配色

截個圖！ 這是你的第一個里程碑。

第三部分：核心功能（30 分鐘）

步驟 6：讓新增習慣能運作

現在讓新增習慣的流程能運作。

當我點擊新增按鈕時：
1. 顯示一個簡單的 modal（不是新頁面）
2. 讓我從簡單的格子裡選 emoji
3. 讓我輸入習慣名稱
4. 按 Enter 或點儲存時儲存

保持互動最小化且快速。

步驟 7：讓勾選習慣有滿足感

當我點習慣標記完成時：

1. 勾選框應該有漂亮的動畫（不只是跳過去）
2. 應該有細微的彈跳或脈動
3. 也許第一次完成時加一點小小的撒花效果？
4. 習慣卡片應該視覺上反映已完成
  （也許淡淡的綠色調或打勾覆蓋）

我想在勾選時感覺有成就感。

步驟 8：加入連續天數

為每個習慣加入連續天數計算。

在每個習慣名稱下顯示連續天數（像「🔥 7 天」）。

連續天數應該：
- 計算連續完成的天數
- 如果我漏掉一天就重置
- 在里程碑時顯示不同
 （也許 7、30、100 天有特別顏色？）

讓連續天數感覺像成就。

步驟 9：加入資料持久化

現在資料重新整理就消失了。
修復這個。

把所有東西儲存到 localStorage 讓它持久化。
我應該能關閉瀏覽器再回來，
發現我的習慣和進度都還在。

檢查點 2 ✅

現在你應該有：

可運作的習慣建立
滿足感的勾選體驗
連續天數追蹤
持久化的資料

測試它！ 加入一些你真正想追蹤的習慣。

第四部分：每週檢視（20 分鐘）

步驟 10：加入每週格子

加一個每週總覽區塊。

顯示一個格子，其中：
- 列是我的習慣
- 欄是這週的 7 天
- 每個格子顯示那天我是否完成該習慣
- 今天應該被突顯

讓人一眼就能看出模式。

步驟 11：打磨每週檢視

每週檢視可以用但需要優化：

1. 用圓點而不是打勾（更乾淨）
2. 完成的日子應該有填滿的圓
3. 未來的日子應該變淡
4. 顯示星期名稱（週一、週二等）
5. 載入時加個細微的動畫

它應該看起來像視覺摘要，不是試算表。

步驟 12：加入導航

我需要一個方式在今日檢視和每週檢視之間切換。

在頂部加簡單的分頁或切換：
- 「今天」——顯示習慣清單供勾選
- 「本週」——顯示每週格子

檢視之間的轉場要流暢。

檢查點 3 ✅

你現在有：

日檢視用於追蹤
週檢視用於總覽
兩者之間流暢的導航
一個完整的習慣追蹤 App！

第五部分：最終打磨（15 分鐘）

步驟 13：加入空狀態

還沒有習慣時會怎樣？

加一個漂亮的空狀態：
- 顯示友善的訊息
- 有明確的呼籲去新增第一個習慣
- 看起來是刻意的，不是壞掉

第一次體驗應該感覺受歡迎。

步驟 14：手機優先檢查

檢查這在手機上（手機尺寸螢幕）看起來怎樣。

確保：
- 觸控目標夠大
- 文字可讀
- 沒有東西溢出
- 用起來感覺原生

這主要是手機 App，
桌面是次要的。

步驟 15：加一個漂亮的標題

加一個簡單的標題，包含：
- App 名稱（像「Habits」或「Daily」）
- 今天的日期，用友善的格式
- 也許一個每天會變的小激勵語

保持低調——習慣才是主角。

步驟 16：最終調整

最後的優化：

1. 勾選習慣時加一個類似觸覺反饋的動畫
2. 整體顏色稍微暖一點
3. 確保所有東西都是無障礙的（好的對比度）
4. 任何轉場加個細微的載入狀態

再測試一次所有東西。

第六部分：部署（20 分鐘）

步驟 17：準備部署

讓我們部署這個，這樣我可以在手機上用。

首先，確保建置可以運作：
- 執行生產版建置
- 在本地測試生產版本
- 確保所有東西仍然運作

然後我們會部署到 Vercel。

步驟 18：部署到 Vercel

把這個部署到 Vercel。

引導我完成：
1. 我需要建立什麼帳號
2. 要執行的確切指令
3. 如何取得我的公開網址

我想從任何裝置都能存取這個。

步驟 19：在真實裝置測試

在你的手機打開網址。測試所有東西：

新增習慣
勾選它們
每週檢視
資料會持久化

恭喜！ 🎉 你建立並部署了你的第一個 App！

常見問題和解法

「App 跑不起來」

App 沒在運作。給我看錯誤，讓我們修好它。

「有東西看起來壞掉了」

[具體東西] 看起來不對。給我看可能是
什麼造成的並修好它。

「我不喜歡這個部分」

我不喜歡 [具體東西] 的運作/外觀。
讓我們試試不同的。[描述你偏好什麼]

「我想加新功能」

我有個新功能的想法：[描述它]。
這可行嗎？如果可以，讓我們加上它。

你學到什麼

透過這個專案，你體驗了：

Vibe Coding - 描述你想要什麼，而不是怎麼建造
迭代開發 - 分層建造，從粗糙到精緻
回饋循環 - 審查、給回饋、改進
真正的部署 - 把 App 上線到網路

下一步

現在你已經建了一個 App，試試：

加強這個 App

加入通知
加入習慣的分類/標籤
加入統計和洞察
加入深色模式

建造新東西

你下一個專案的點子：

個人日誌 - 有提示的每日寫作
支出追蹤器 - 記錄和分類花費
食譜收藏盒 - 儲存和整理食譜
閱讀清單 - 追蹤要讀的書和筆記

更深入

了解 Claude 寫的程式碼
理解 React 基礎
探索資料庫用於更複雜的 App
學習認證來做使用者帳號

下一個專案的提示

從感覺開始

好的：「我想要一個筆記 App，
      感覺像在漂亮的筆記本上寫字」

沒那麼好：「我需要一個有 SQL 資料庫
          的筆記 CRUD App」

具體說明哪裡有問題

好的：「按鈕在手機上感覺太小」

沒那麼好：「它很爛」

休息一下

如果東西不能運作，離開一下。清醒後再回來。

儲存你的進度

你能總結一下我們目前建了什麼和現在的狀態？
我想在繼續之前儲存這個。

問問題

我不理解 [東西] 是做什麼的。
可以簡單解釋一下嗎？

你的第一個 App 清單

在你開始下一個專案之前，確保你：

已完成

建了一個可運作的習慣追蹤器
讓它看起來和感覺起來都很好
部署到網路上
在你真正的手機上用過

已理解

如何描述你想要什麼
如何給建出來的東西回饋
如何迭代到更好的結果
如何部署一個 App

準備好下一步

有下一個 App 的想法
有信心用新專案重新開始
知道卡住時去哪裡求助

最後的話

建 App 以前需要學很多年。有了 AI 輔助，你在一個下午就建並部署了一個真正的 App。

這只是開始。你建的每個 App 都會教你更多。每個專案都會比上一個更快。

你不是「用 AI 來寫程式」——你在創造軟體。AI 是你的加速器，但願景是你的。

現在去建造些什麼吧。🚀