昨天介紹了 Claudable 這個 AI 開發神器，今天我們就來實際操作！手把手帶你從零開始，用 Claudable 建立一個「習慣追蹤器」，讓你親身體驗什麼叫做「30 分鐘從想法到產出」。

為什麼選擇習慣追蹤器？

在選擇示範專案時，我考慮了幾個因素：

• 實用性高：每個人都有想培養的習慣
• 功能適中：不會太簡單，也不會太複雜
• 展示完整：涵蓋 CRUD、資料視覺化、用戶系統
• 易於擴展：完成後還能繼續加功能

最重要的是，這個專案夠簡單，讓我們專注在 Claudable 的使用流程，而不是糾結在複雜的業務邏輯。

開始前的準備工作

可以根據上一篇進行簡單的環境設定，或是跟著這篇一步一步建立。

環境檢查清單

# 1. 檢查 Node.js 版本（需要 18+）
node --version
# 如果版本太舊，請到 https://nodejs.org 下載最新版 or 使用 nvm

# 2. 檢查 Python 版本（需要 3.10+）
python3 --version
# macOS 用戶可用 brew install python3 or 使用 mini conda

# 3. 檢查 Git
git --version

AI 代理選擇與安裝

Claudable 支援兩種 AI 代理，今天我們使用 Claude Code：

# 安裝 Claude Code
npm install -g @anthropic-ai/claude-code

# 登入（需要有 Claude Pro 訂閱，筆者是直衝 200USD/mo）
claude
# 然後在瀏覽器中完成 /login

如果你沒有 Claude Pro，也可以使用 Cursor CLI，操作流程類似

Step 1：安裝 Claudable（3 分鐘）

Clone 專案

# 建立工作目錄
mkdir ~/my-projects
cd ~/my-projects

# Clone Claudable
git clone https://github.com/opactorai/Claudable.git
cd Claudable

安裝相依套件

# 安裝所有套件（這會需要 1-2 分鐘）
npm install

啟動開發伺服器

# 啟動 Claudable
npm run dev

成功啟動後，你會看到：

連線資訊（預設）

○ Frontend: http://localhost:3000
○ API Server: http://localhost:8080
○ API Docs: http://localhost:8080/docs

打開瀏覽器訪問 http://localhost:3000，你會看到 Claudable 的歡迎畫面

Step 2：建立習慣追蹤器（10 分鐘）

描述你的專案

我想要一個習慣追蹤器 Web App，功能包括：

1. 習慣管理

   • 新增習慣（名稱、描述、目標頻率）
   • 編輯和刪除習慣
   • 設定每日、每週或每月目標

2. 打卡記錄

   • 今日習慣清單，可以勾選完成
   • 補打卡功能（可以補前幾天的）
   • 打卡時可以加備註

3. 進度視覺化

   • 月曆視圖顯示打卡記錄
   • 連續打卡天數統計
   • 完成率圓形圖表

4. 使用者功能

   • 註冊和登入
   • 個人資料設定
   • 深色模式切換

請使用現代化的 UI 設計，要有良好的響應式體驗。

觀察 AI 生成過程

按下 Enter 後，你會看到 Claudable 開始工作：

1. 需求分析：AI 會先確認理解你的需求
2. 架構規劃：設計資料庫結構和 API
3. 程式碼生成：逐步生成各個元件
4. 即時預覽：右側會顯示生成的介面

整個過程大約需要 5-10 分鐘。你會看到類似這樣的對話：

生成的專案結構

Claudable 會自動生成以下結構：

主要的專案會在 repo 資料夾中。

這時候可以先喝個茶去做其他事情讓他好好工作～

Step 3：檢查成果

等待完成後，可以進到對應的專案裡面進行啟動（Claudable 的頁面上也會有一個 preview 可以看）。

cd data/projects/project-1757257469410-almyyztw4  # 產生的 project name 會是 project-xxx
cd repo 
npm install
npm run dev

看起來很棒對吧～功能基本上都沒有問題，還幫你做了 Dark Mode～ＸＤ

立馬來試試看功能有沒有問題：

看起來很棒，而且也做了 RWD：

整個專案不到二十分鐘就完成了，還不動手試試看～

實戰心得與技巧

成功的關鍵

描述要具體：越詳細的描述，生成的結果越符合預期
逐步調整：先讓基本功能運作，再慢慢優化
相信 AI：Claudable 的程式碼品質很高，不用擔心

常見問題處理

Q：生成的程式碼有錯誤怎麼辦？
A：直接告訴 Claudable 錯誤訊息，它會自動修復
Q：想要客製化某個功能？
A：用自然語言描述你要的效果即可
Q：資料庫連接失敗？
A：檢查環境變數是否正確設定

小缺點

• Claudable 會幫你處理你的指令，但是一但下了指令，即便打錯字也不能停止，要等他工作完成（是個認真的孩紙）
• 彈性比較低，比較適合 MVP 的建立，複雜的系統直接使用 Claude Code 會比較快
• 複雜的系統會等到失智，因為他是一條龍整個做完才會停下來

進階技巧

保存好的設計：看到喜歡的元件設計，可以要求 Claudable 在其他專案重用
建立模板：常用功能可以整理成模板描述
版本管理：每個大改動都 commit，方便回溯

下一步：擴展你的應用

現在你已經有了一個基本的習慣追蹤器，可以繼續加入：

• 社群功能：和朋友分享進度
• 成就系統：達成目標獲得徽章
• 數據匯出：下載你的習慣數據
• 提醒通知：整合推播提醒

每個功能都只需要和 Claudable 說一聲就能實現！

總結：AI 開發的新時代

今天我們用 30 分鐘完成了：

• 環境設定
• 功能開發
• 產品建立

這在傳統開發模式下，至少需要 2-3 天。更重要的是，生成的程式碼品質很高，包含了錯誤處理、響應式設計、使用者體驗優化等細節。

三個重要體悟

門檻大幅降低：不需要精通每個技術細節也能做出產品
專注在價值：把時間花在思考用戶需要什麼，而不是怎麼實作
快速驗證：想法到產品的距離，真的只有 30 分鐘