教學

Build · Memory · Voice · Deploy

用 Claude Code 建置個人作業系統

以 Claude Code、Supabase 與 Telegram 語音控制為技術棧，建置一套可自行維護的個人作業系統。涵蓋 8 步驟建置流程、Prompt 範例、安全性設定與社群使用心得。

這份指南說明如何以 Claude Code 為主要開發工具，從零建置一套整合任務管理、財務追蹤、語音控制與雲端記憶的個人作業系統。無需既有程式背景，只需能清楚描述需求。

閱讀時間
11 分
更新日期
開啟原始報告
設計 /
Tenten
難度
新手友善
預估時間
一個週末
類型
Vibe Coding 實作
本頁章節

01The Concept

系統概覽：架構與適用對象

設計 → 程式 → 記憶 → 部署 → 隨時隨地控制

個人作業系統的核心是一個三欄式儀表板：左欄顯示今日任務、習慣與財務狀態，中欄為寫作與會議工作區，右欄整合 AI 洞察輸入。系統透過 Supabase 雲端資料庫保存所有記錄，並透過 Telegram Bot 接受語音指令操作。這是一套部署在你自己帳號下、可隨時透過自然語言指令修改的個人工具。

過去建置這類系統需要具備前端、後端、資料庫與部署能力。Claude Code 將需求描述轉為可執行程式：你以自然語言說明功能需求，它讀取整個專案脈絡、產出實作計畫、撰寫程式、串接資料庫並協助部署。你在流程中扮演的角色是確認計畫、驗收輸出與設定限制條件。

相較於市售待辦或筆記工具，自建系統的差異在於資料歸屬與邏輯彈性。市售工具的功能由廠商決定，資料通常無法完整匯出或跨平台分析。自建系統的資料存放於自己的 Supabase 帳號，可隨時更換前端介面，也可匯出至任意 AI 模型進行分析，不存在廠商鎖定。

02Before You Start

行前準備：帳號、工具與花費

建置前需完成以下帳號與工具的準備。下列服務多數提供免費方案，實際產生計費的主要為 Anthropic API 與（選用的）Whisper 語音轉錄，均採用量計費。

角色工具用途起步花費
設計Claude Design先定主題、色彩、Logo 與素材，再進入寫程式含於 Claude 訂閱
程式開發Claude Codeagentic 編碼，把需求變成可運作的程式Pro / Max 訂閱或 API 計費
API 金鑰Anthropic（platform.claude.com）驅動程式內的 AI 功能（第二大腦、洞察）用量計費，先設預算上限
雲端資料庫SupabasePostgres 資料庫 + 認證 + 儲存，你的真後端免費方案足以起步
部署平台Vercel把網站與 Webhook 放上線，全球可存取Hobby 免費方案
語音 + 遠端Telegram BotFather + Whisper用語音訊息遠端操作你的系統Telegram 免費；Whisper 依分鐘計
行事曆 / 財務Google Calendar / Sheets API行程同步、財務數據即時拉取免費

完成上述帳號設定後，安裝 Node.js 與 Claude Code。各平台的安裝步驟略有差異，請以官方文件為準（章末資源區有連結）。

038 Core Modules

八大核心功能拆解

系統由八個功能獨立的儀表板模組組成。建議從最迫切的兩三個模組開始建置，驗收正常後再依需求擴充，不必一次完成全部。

Task CRM

任務 CRM

看板視圖依優先級排列任務卡片，每筆任務記錄狀態、進度與下一步行動。

Finance Pulse

財務脈動

透過 Google Sheets API 自動同步財務數據，在單一介面顯示收支明細與淨值狀態。

Habit Tracker

習慣追蹤器

記錄健康、財務、學習等習慣的每日打卡狀態，提供回顧視圖供追蹤長期趨勢。

Nutrition

營養管理

整合各來源的健康數據，集中管理飲食記錄、營養素攝取與個人目標。

Calendar

行事曆

與 Google Calendar 雙向同步，將所有行程集中顯示在主控台，支援月、週、日三種檢視。

AI Second Brain

AI 第二大腦

依主題分類的筆記庫，連接 Anthropic API 後可根據累積的記錄脈絡進行跨主題連結與摘要。

Journal

日誌系統

日誌條目持久儲存於 Supabase，可依日期、心情標籤篩選，並可批次匯出供 AI 分析。

Task Blocker

任務阻擋器

記錄每項任務的阻擋原因與卡關時間，提供阻擋因素的統計視圖，供事後分析改善。

04The 8-Step Build

八步驟完整建置流程

以下為建置整套系統的標準步驟，順序為：先完成設計與資料層，再實作功能模組，最後串接外部服務。建議嚴格按順序執行，跳過資料層設計往往導致後期需要大幅重構。

  1. 用 Claude Design 設計

    DESIGN FIRST · 在任何寫程式之前

    在進入開發前，先以 Claude Design 確定主題色彩、Logo 與基礎視覺素材。這一步確保後續 Claude Code 產出的各頁面介面保持一致的視覺規格。

  2. 匯出到 Claude Code

    SCAFFOLD · 建立新專案

    建立新專案，將設計素材導入，然後向 Claude Code 描述整套系統的架構：需要哪些模組、模組間如何互動、介面配置為何。這段描述即為總建置提示詞（第 08 章提供可直接使用的範例）。

  3. 雲端記憶（Supabase）

    REAL INFRASTRUCTURE · 真正的地基

    將所有資料存入 Supabase 雲端，完成前後端串接。資料層一旦獨立於介面，日後更換前端框架或接入其他 AI 服務時，不需遷移資料。資料層架構正確是後期擴充的先決條件。

  4. 取得 Anthropic API 金鑰

    POWER ON · platform.claude.com

    前往 platform.claude.com 取得 API 金鑰，用於驅動系統內的 AI 功能（第二大腦、洞察分析等）。取得金鑰後立即在後台設定月度預算上限，金鑰只能存放於後端環境變數，不可出現在前端程式碼或公開 repo 中。

  5. 資料結構設計

    SCHEMA · 告訴 Claude 怎麼組織資料

    向 Claude 說明各模組的資料欄位定義：任務的欄位清單、日誌的分類方式、財務的分類規則。資料結構描述越明確，產出的後端越乾淨且易於擴充。

  6. 語音控制（Telegram）

    VOICE · BotFather → Webhook → Vercel

    建立 Telegram Bot、設定 Webhook，串接後端邏輯後部署至 Vercel 並驗證。完成後可透過語音訊息遠端操作系統（完整流程見第 06 章）。

  7. 安全性審計

    AUDIT · 雙重檢查漏洞與弱點

    請 Claude 對整個專案執行安全性審計，列出漏洞清單並逐項修正。系統儲存個人財務與日誌等敏感資料，此步驟不可省略（第 07 章詳述）。

  8. 串接所有功能

    INTEGRATE · 把一切連起來

    將 Google Calendar、日誌、習慣追蹤與各自訂模組全部串接，使所有模組共用同一份 Supabase 雲端資料。至此，系統各模組可正常協同運作。

05The Backend

後端基礎：Supabase 的角色與設定

個人工具常見的失敗原因是資料存放於瀏覽器（localStorage 等），重新整理或跨裝置後即遺失。Supabase 是以 PostgreSQL 為核心的後端即服務（BaaS），整合了資料庫、使用者認證、檔案儲存與即時同步，提供穩定的雲端資料層。

Supabase 在本系統中承擔以下四項核心角色：

雲端資料、不綁前端

資料儲存在雲端，不綁定任何特定應用程式或介面框架。

一份資料、多個前端

同一份資料可供多個前端存取，從網頁應用切換至行動 App 時無需遷移資料。

可匯出給 AI 分析

資料以標準 PostgreSQL 格式儲存，可隨時匯出至 Claude 或 ChatGPT 進行分析。

趨勢提煉的實例

實際用例：匯出三個月的日誌至 Claude，提取決策盲點、情緒週期與行為趨勢。

06Voice Control

Telegram 語音控制全設定

語音控制允許使用者透過 Telegram 傳送語音訊息，遠端操作系統的資料寫入。資料流共經過五個節點，流程如下。

  1. Input

    語音輸入

  2. Telegram

    BotFather

  3. STT

    Whisper

  4. Store

    Supabase

  5. Result

    你的 App

流程說明：使用者在 Telegram 向 Bot 傳送語音訊息 → 系統下載語音檔，交由 Whisper 轉為文字 → 文字進入後端邏輯，寫入對應的 Supabase 資料表 → 前端即時反映更新結果。此流程支援從任何裝置透過語音指令操作系統。

設定步驟

① 在 Telegram 搜尋 @BotFather，送出 /newbot，輸入名稱後取得 Bot Token。

② 選擇連線方式：Webhook（生產環境） 或 Polling（本機開發），兩者不可同時啟用。

③ 在 Vercel 建立 Webhook 路由（例如 /api/webhooks/telegram），部署上線。

④ 執行一行指令將 Webhook 指向 Vercel 網址，再以 getWebhookInfo 驗證設定是否生效。

⑤ 收到語音訊息時，先下載 .ogg 檔，交由 Whisper 轉錄，再將文字傳入後端邏輯。

set-webhook.sh

bash
# 把 Telegram Webhook 指向你的 Vercel 部署
curl -X POST https://api.telegram.org/bot${TOKEN}/setWebhook \
  -H "Content-Type: application/json" \
  -d '{ "url": "https://your-app.vercel.app/api/webhooks/telegram" }'

# 驗證 webhook 是否設定成功
curl https://api.telegram.org/bot${TOKEN}/getWebhookInfo

07Security Audit

安全性審計：別讓金鑰燒光你的錢

將 AI 能力整合進個人應用時，同時引入了金鑰管理與資料存取的安全責任。設定不當可能導致資料外洩或 API 費用失控。本章說明最常見的四類風險及對應的防範措施。

**核心規則：API 金鑰不可放入前端程式碼。**網頁與 App 的程式碼可被任意使用者反編譯或檢視，金鑰一旦暴露於前端套件，即可被提取並盜用，所有 API 費用均記在金鑰擁有者帳號下。正確做法是在獨立後端執行所有 AI 呼叫：前端將請求轉發至後端，後端完成身分驗證後，以伺服器端的環境變數中保存的金鑰呼叫 Anthropic。

風險會發生什麼怎麼防
金鑰外洩金鑰寫進前端／公開 repo，被盜刷金鑰只放後端環境變數；用 .gitignore 排除 .env
帳單失控迴圈呼叫或被濫用，用量暴衝在 Anthropic 後台設月度上限與用量警示
資料庫全開任何人都能讀寫你的 Supabase 資料啟用 Row Level Security（RLS），逐表設權限
Webhook 被偽造有人假冒 Telegram 打你的端點設定 webhook secret / 驗證來源簽章

08Prompt Design

Prompt 設計範例（可直接複製）

以下三段提示詞分別對應建置流程的三個關鍵節點，可直接複製使用，將方括號內容替換為實際需求。有效提示詞的三個要素：提供足夠上下文、明確說明需求、要求先輸出計畫再執行。

Prompt A · 總建置提示詞

貼進 Claude Code 的第一句

text
我想打造一套專屬個人作業系統，技術棧為 Next.js + TypeScript，後端用 Supabase（資料庫、認證、儲存），AI 能力走獨立後端呼叫 Anthropic API，部署到 Vercel。

在寫任何程式之前，請先進入 plan mode，產出一份完整的實作計畫讓我確認，內容包含：
1. 八個模組：任務 CRM、財務脈動、習慣追蹤、營養管理、行事曆、AI 第二大腦、日誌、任務阻擋器。
2. 主控台採三欄式：左欄=系統總覽/任務/習慣/財務；中欄=每日任務/寫作/提案/會議；右欄=AI 管理與資料輸入。
3. 視覺沿用我在 Claude Design 定義的主題與色彩。
4. 資料層全部放 Supabase，前端不得直接持有任何 API 金鑰。

先別寫程式，把計畫給我看，我核可後再開始第一個模組。

Prompt B · 資料結構設計

第 05 步用

text
請為這套系統設計 Supabase 的資料表結構。我希望這樣組織資料：

· tasks：標題、狀態（待辦/進行中/完成）、優先級、阻擋原因、關聯專案、到期日。
· habits 與 habit_logs：習慣定義 + 每日打卡，支援回顧統計。
· journal：日期、內容、心情標籤，永久保存。
· finance：日期、類別、金額、來源（手動/試算表同步）。

請給我建立這些表的 SQL、合理的關聯與索引，並為每張表啟用 Row Level Security，讓每位使用者只能讀寫自己的資料。完成後解釋每個欄位的用途。

Prompt C · 語音控制串接

第 06 步用

text
幫我加上 Telegram 語音控制。流程是：使用者傳語音 → 下載 .ogg → 用 Whisper 轉文字 → 解析意圖 → 寫入對應的 Supabase 表。

請：
1. 在 /api/webhooks/telegram 建立 Webhook 路由（生產環境用 webhook，不要用 polling）。
2. 收到語音時先回覆「轉錄中…」改善體感。
3. Bot Token、API 金鑰、webhook secret 全部走環境變數，不可寫死。
4. 加上來源驗證，避免有人偽造請求。

完成後，告訴我要在 Vercel 設哪些環境變數，以及如何用 curl 設定並驗證 webhook。

09From the Community

Reddit 社群實戰：技巧・偏方・踩雷

以下整理自 Reddit、Hacker News 及重度使用者的公開分享，涵蓋操作技巧、常見用例與已知陷阱，以摘要形式重述，並標明各條目的類型。

偏方 · 上下文就是一切

不同任務之間執行 /clear

Claude Code 的上下文視窗有容量限制，視窗塞滿後輸出品質會明顯下降。不相關任務之間務必執行 /clear。同一個 bug 修正兩次仍出錯時，應清空對話、重新撰寫更精確的初始提示，而非繼續在現有對話中累積修正。

偏方 · 精簡 CLAUDE.md

CLAUDE.md 應精簡，避免冗長

將專案慣例寫入 CLAUDE.md 讓 Claude 每次自動讀取，是有效傳遞專案規範的做法。但內容過長時，重要規則反而被雜訊淹沒。建議定期精簡：若 Claude 在沒有某條規則的情況下仍能做出正確行為，即可移除該條。

用例 · 不只是寫程式

連接 Obsidian 筆記庫建立持久記憶

部分使用者將 Claude Code 連接至 Obsidian 或 Markdown 筆記庫，並在 CLAUDE.md 中定義規則：每次對話開始時讀取記憶檔，結束時將更新寫回。此「寫回」規則是系統累積知識的機制，缺少它筆記庫只是靜態檔案；加上它後，記憶庫隨每次使用持續擴充。

用例 · 用實體類型組織

以實體類型（People / Projects / Services）組織知識庫

有使用者發現：供 AI 使用的知識庫，以 People、Projects、Services 等實體類型分類，比傳統資料夾階層結構更實用。原因在於 AI 是以組裝上下文的方式運作，扁平且可連結的結構有助於跨位置拼接分散資訊。

陷阱 · 廚房水槽式對話

每個對話僅處理單一任務

常見問題模式：在進行中的任務對話中插入不相關的問題，再回到原任務，導致上下文被無關資訊填充，輸出品質下降。此模式在社群中被稱為「kitchen sink session」。解決方法：不同任務之間執行 /clear 清空上下文。

陷阱 · 信任但沒驗證

AI 產出需自行驗收，不可直接信任

AI 產出的實作外觀合理，但可能遺漏邊界情況的處理。建議將 AI 輸出視為資淺工程師的初稿，必須自行閱讀程式碼並測試，涉及金錢與個人資料的模組尤其需要仔細驗收。

偏方 · 模型別選太省

重要任務選用最高性能模型

社群與官方團隊的共識：高性能模型單次回應較慢，但需要使用者來回修正的次數更少，整體耗時反而較短。重要任務建議啟用「思考模式」並選用最高性能模型，以減少 debug 往返的成本。

偏方 · 錯誤就回填規則

將錯誤轉為 CLAUDE.md 規則

每次 Claude 產生錯誤，就將對應的修正規則寫入 CLAUDE.md，避免相同錯誤重複出現。將 CLAUDE.md 以 Git 版本控管，使其成為一份隨使用經驗持續完善的專案規範文件。

10Advanced Use

進階用例與三大監控面板

系統基礎建置完成後，可透過三欄式主控台配置與以下進階功能提升日常使用效率。

Left Panel

左側面板

顯示系統總覽、任務清單、習慣打卡狀態與財務摘要，提供每日狀態一覽。

Center Panel

中間面板

集中顯示當日任務、寫作草稿、提案進度與會議安排，作為主要產出工作區。

Right Panel

右側面板

整合 Claude 與 ChatGPT 的呼叫監控、模型參數調整與手動資料輸入功能。

三個進階功能配置：

① 排程洞察：透過 Claude Code 的排程功能（cloud routines），每週日自動將本週日誌與財務資料送至 AI，產出週摘要報告。

② 跨模組連結：設定任務阻擋器與日誌的連動，當任務進入卡關狀態時提示記錄原因，長期累積後可分析阻擋原因的分佈。

③ 語音快捷指令：為高頻操作定義語音指令模板，例如「記一筆 X 元的 Y 開銷」，直接觸發財務資料寫入。

11FAQ

常見問題

我完全不會寫程式，真的做得出來嗎？

可以開始，但要有合理期待。Claude Code 會幫你寫絕大部分程式，你的工作是清楚描述需求、看懂它的計畫、做測試與把關。把它想成一位很強的工程師夥伴，而你是產品負責人。建議從一兩個小模組做起，跑順了再擴充。

這樣一個月大概要花多少錢？

Supabase、Vercel、Telegram、Google API 都有免費方案足以起步；實際計費的項目為 Anthropic API 與選用的 Whisper 語音轉錄，兩者均按用量計費。實際金額依使用頻率而定。務必到各官方網站確認最新費率，並在 Anthropic 後台設定預算上限。

為什麼一定要 Supabase？用瀏覽器存資料不行嗎？

瀏覽器儲存（localStorage 等）一清快取就沒了，也無法跨裝置、無法被 AI 分析。Supabase 給你一個真正的雲端資料庫，資料獨立於介面，將來換前端、接別的 AI 都不用搬家。對「要長期用」的個人系統，這是值得的地基投資。

語音控制一定要 Telegram 嗎？

不一定，Telegram 只是最方便的入口之一（免費、有現成的 Bot 機制與語音訊息）。你也可以接其他通訊平台或自建介面，核心流程一樣是「語音 → 轉文字 → 進後端 → 寫資料庫」。

我會不會做到一半就把帳單搞爆？

遵守第 07 章的規則即可大幅降低風險：金鑰只放後端、設定用量上限與警示、避免迴圈呼叫。最常見的帳單失控情況是金鑰暴露於前端被盜用。守住金鑰不入前端這條規則，其餘風險相對可控。

資料安全嗎？這可是我的人生紀錄。

安全與否取決於你的設定。務必啟用 Supabase 的 Row Level Security、讓每位使用者只能存取自己的資料，並請 Claude 幫你做一次安全性審計。資料在你自己的帳號下，你擁有完整控制權與匯出權。

12Resources

結語與資源

個人作業系統的價值在於它可持續擴充：生活需求改變時，透過自然語言指令即可新增或調整模組。讀書進度追蹤、睡眠數據串接等功能，均可在現有架構上逐步加入，不需重新建置。

建議從第 08 章的 Prompt A 開始：以 Claude Design 確定視覺規格，再將 Prompt A 貼入 Claude Code 並要求先輸出實作計畫。按此流程，一個週末可完成第一個可運作的模組。

Studio

Tenten

本指南設計與企劃

就像擁有一款專為你量身打造，並且可以隨時編輯的專屬 App。

設計與企劃 / Tenten

tenten.co

設計 · 程式 · 記憶 · 部署 · 隨時隨地控制

本文為教學與資訊整理用途，工具定價、免費額度、模型費率與各平台功能可能隨時間變動，實際操作前請以各官方網站最新資訊為準。涉及 API 金鑰與個人資料的設定請審慎處理。

參考資料