新手教學 · 交易日誌 PWA step-by-step · 最後更新：2026-05-15

我用 AI 幫自己做了一個交易日誌：一個交易者真的會每天打開的工具

我是一個全職交易者，不會寫程式。每天需要記交易、看勝率、檢討情緒、回顧策略。試過 Excel、Notion、Google Sheets，每一個都卡卡的就是不對。後來用 Claude Code 自己做了一個 PWA 交易日誌，做到每天真的會打開的程度。

這篇把整個流程重整成 step-by-step。讀完你會做出：1) 一個用「使用情境」設計的工具需求清單；2) 一個能在手機桌面像 App 一樣打開的 PWA；3) 一個只屬於你、別人偷不走的個人工具。範例是交易日誌，但任何「現成工具總差一點」的個人需求都套得上：閱讀記錄、健身追蹤、運勢日記、創作素材庫。

30-60 分鐘可全跑完。前置條件：Claude Code 已裝好、英文資料夾、Vercel 帳號（免費）、GitHub 帳號（免費）。本範例工具僅供個人使用，不構成投資建議，也不推薦任何金融商品。

什麼時候該自己做工具、什麼時候用現成的？（決策框架）

如果你符合下面任 2 條以上，自己做比現成工具好用：

• 現成工具用了一陣子覺得「就是差那麼一點」、講不出哪裡卡但就是不順
• 你的工作流有一些別人覺得「沒道理」、但你自己很需要的小細節
• 資料想留在自己手上、不想被綁在 SaaS 訂閱
• 市面上做這個領域的工具普遍很雜、欄位太多
• 想要的功能組合很特定，沒有一個現成工具完全符合

我自己 5 條都中。Excel 手機難打、Notion 統計要自己手刻、Google Sheets 沒辦法記情緒這種半結構化資料。市面上「給 1000 個人用的工具」一定有妥協，自己做「只給你 1 個人用的工具」可以剛好對位。這個落差就是用 Claude Code 做工具的甜蜜點。

怎麼用「使用情境」設計工具？（不要直接叫 AI 寫程式）

新手最容易犯的錯：直接叫 AI「幫我做一個交易日誌」。AI 會做出一個，但介面太雜、欄位太多、打開一次就不想打開了。原因不是 AI 寫不好，是你給的需求太抽象。

正解：先寫「使用情境」再叫 AI 寫。每天會怎麼用、什麼時候打開、那一刻最需要看到什麼，把這些寫成具體場景再餵給 AI。下面是我自己用的 4 個情境模板：

1. 情境 1 — 開盤前：要看什麼資訊讓我準備好今天的交易？例如：昨天的勝率、上週的累計盈虧、最近 3 筆交易的情緒紀錄
2. 情境 2 — 進場時：要記什麼讓我之後能檢討？例如：標的、進場價、停損、為什麼進場（一句話）、進場時的情緒
3. 情境 3 — 平倉後：要記什麼讓統計有意義？例如：盈虧、有沒有按原計畫走、出場時的情緒
4. 情境 4 — 週末檢討：要看什麼讓我下週改善？例如：勝率走勢、情緒對盈虧的影響、最賺錢/最賠錢的策略

把這 4 個情境寫清楚再給 AI，做出來的東西會是「給每天用的人」設計的，不是「給資料完整」設計的。一個工具能不能被打開的關鍵，從來不是有多齊全，是有沒有貼近每天的動線。其他領域的需求（健身、閱讀、運勢）也用這 4 個情境模板套，把「交易」換成你的主題就好。

交易日誌 PWA 怎麼從 0 做到 100？（5 步 step-by-step）

下面用「交易日誌」當範例做完整 step-by-step。範例是交易，但任何「個人記錄類工具」都套得上：閱讀記錄、健身追蹤、運勢日記、創作素材庫，把功能名稱換掉就好。

1. Step 1 — 把第 2 節 4 個情境寫成需求文件給 AI。在 Claude Code 輸入：「我想做一個 PWA 個人日誌。使用情境 4 個：[貼上你寫的 4 個情境]。資料用 LocalStorage 存就好不需要資料庫。請建 index.html + app.js + style.css，用 Tailwind CSS。手機優先設計，桌面也要能用。不要規劃，直接建檔。」
2. Step 2 — 在自己電腦看效果。資料夾的 index.html 雙擊用瀏覽器打開，跑一次完整使用流程：開盤前查、進場記、平倉記、週末看統計。任何一步覺得卡，截圖丟回 Claude Code 說「這裡卡住了 應該改成 ___」。改 3-5 輪你會跑出真的順手的版本。
3. Step 3 — 加圖表。叫 AI 用 Chart.js 加 3 個圖：累積盈虧曲線、勝率走勢、情緒對盈虧的散點圖。一句指令：「加 Chart.js 圖表，3 個圖：1) 累積盈虧；2) 勝率走勢；3) 情緒 vs 盈虧。資料來源是 LocalStorage 已存的交易紀錄。」
4. Step 4 — 加風險控制警示。叫 AI 加「日損超標跳警告」「週損超標鎖介面」這種 hard rule。對交易者來說這個比統計圖還重要，可以強迫自己停損停手。一句指令：「加日損 -X% 跳全螢幕紅色警告、週損 -X% 鎖定新增交易功能 7 天，X 自己定義。」
5. Step 5 — 部署到 Vercel + 加到手機桌面。push 到 GitHub → Vercel 連 repo → Deploy（詳細看「第一次用 AI 做網站」第 6 節）。手機 Safari 或 Chrome 打開 .vercel.app 網址 → 分享 → 加到主畫面。下一節教怎麼做成真的像 App。

跑完 5 步，你有一個能在手機桌面像 App 一樣打開的個人日誌。30-60 分鐘可全跑完。資料存在 LocalStorage 等於只在你手機裡，沒有 server、沒有訂閱、別人偷不走。

怎麼把網頁做成像 App 加到手機桌面？（PWA manifest 教學）

PWA（Progressive Web App）= 讓網頁假裝自己是 App。加到手機桌面有自己的 icon、點下去全螢幕打開、不會看到瀏覽器網址列。對個人工具來說，PWA 就夠用了，不需要真的開發 iOS/Android App。

做 PWA 需要 3 個檔案。叫 AI 一句話搞定：「請把這個專案改成 PWA，加 manifest.json 跟 sw.js（service worker），icon 用一個漸層方塊先頂著之後再換。manifest 設成 standalone 模式，theme color 自己挑。」AI 會自動建檔。

完成 PWA 必備 3 件事：

1. manifest.json：定義 App 名稱、icon、開啟方式（standalone = 全螢幕無瀏覽器列）、主題色
2. sw.js（service worker）：讓 App 即使離線也能打開（PWA 必備）
3. 在 index.html 的 加 跟 tags

怎麼驗證 PWA 真的在跑？手機 Safari 打開 .vercel.app 網址 → 分享 → 看到「加入主畫面」選項 = PWA 配置正確。加完之後從桌面點 icon，打開來像 App、沒有網址列、沒有 Safari 工具列，就成功了。

做給自己用 vs 做給市場用 有什麼差別？

用 Claude Code 做工具最大的優勢是「可以做別人覺得沒道理的功能」。因為這個工具是給你自己用的，不是給市場用的。下面是兩者的差別：

• 給市場用：要服務 1000 個人，所以欄位要齊全、UI 要中性、避免冒犯任何族群。妥協很多。
• 給自己用：只服務你 1 個人，所以可以做「拜財神功能」「抽籤頁」「個人偏好的特殊統計」這種別人覺得沒道理的東西。剛好對位。
• 給市場用：要考慮 onboarding、要寫教學、要客服、要顧 conversion rate。整套商業模式。
• 給自己用：你就是用戶，不需要 onboarding，做出來就用。0 摩擦。
• 給市場用：UI 要適合 1000 種人，所以要拉很多設定選項。
• 給自己用：UI 對你順就好，可以 hardcode 你的偏好不留設定。簡單暴力。

我自己的交易日誌有一頁拜財神 + 抽籤的地方，做交易的人會懂這個是儀式感跟定錨。給市場做的工具不會放，但給自己做的就可以。這個差別決定了「會不會每天打開」。

不想自己做、想直接被帶怎麼辦？

上面這套自己跑大概 30-60 分鐘，但前提是有耐心 + 願意改 3-5 輪。如果符合下面任一條，可能不適合自己跑：

• 不想花時間寫「使用情境」這種需求釐清
• 想要連雲端資料庫（Supabase / Firebase）多裝置同步
• 需要更複雜的功能例如多帳戶、API 接券商、自動匯入交易紀錄

可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、4 情境設計、Claude Code 操作、PWA 部署整套跑完。Pro：不用自己 debug、不用看長文、有人帶卡關 5 分鐘解決。Con：要付費。適合：沒時間自己研究、想直接拿到專屬工具、卡關會放棄的人。

看完這篇之前先確認:

← 回新手教學