[go: up one dir, main page]

跳至主要內容

是 Ray,
不是 Array

把未知變已知,把已知變文章,把文章變痕跡 —— Ray.

1069 篇文章 · 從 2019 開始 · 已過 7 年

ray@blog — zsh — 80×24

$

ray@blog:~$ ls posts/ --sort=date

posts[000] — 最新文章

雜談閱讀時間約 8 分鐘

Zeabur 結束營運:台灣新創的跌倒與成長

Zeabur 宣布 2026 年底結束營運。身為早期就認識創辦人、幫忙推廣過,又在八月資安事件被盜刷 500 多美金 API 額度的使用者,聊聊我眼中的 Zeabur,以及台灣新創在資源有限的情況下,怎麼在 MVP 跟資安之間取捨。

閱讀時間約 2 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 30:完賽回顧與全系列目錄

老闆不會教你的 Vibe Coding 實戰 30 天最終回!這篇是完賽心得加全系列目錄:先聊這 30 天用 Claude Code 從一份 SPEC.md 做到記帳 App 上線的感想,再把 30 篇依四週排開(Week 1 基本操作、Week 2 從規格到 MVP、Week 3 Skills/Subagents/MCP 與畫面設計、Week 4 Hooks/測試/重構/部署/上線後改版/PR 流程,最後是流程 SOP),之後要回來查直接從這篇找。最後給一個不做承諾的下一步:開一個自己的專案把六步 SOP 跑一遍。

閱讀時間約 7 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 29:我的 Vibe Coding 流程 SOP

倒數第二天!這 30 天做記帳 App 其實一直在重複同一套流程,這篇把它整理成六步驟 SOP:想清楚(訪談寫 SPEC.md)、打地基(git、CLAUDE.md、DESIGN.md)、先計畫(Plan Mode、docs/plans)、小步做(一次一個功能,親手驗收再 commit)、設關卡(code-reviewer、Hooks、測試,加上 PR 上的 GitHub Actions 跟 CodeRabbit)、上線(合併進 main 自動部署到 GitHub Pages)。每一步都會回頭看當初是踩了什麼坑才有這一步,再聊步驟怎麼跟著功能大小瘦身、一份帶得走的 SOP 檢查清單、用 skill-creator 把 push 之前的檢查收成 SKILL,也老實交代 Day 1 提過的收入跟分類管理,文末附一份 Claude Code 官方文件(繁體中文版)與社群資源清單。

閱讀時間約 3 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 28:Week 4 收尾之 Token 怎麼省

Week 4 收尾來聊額度:Claude Code 的用量上限怎麼算(Pro、Max 跟 claude.ai 聊天共用,分成五小時跟每週兩種上限)、Token 為什麼主要跟 Context 的大小有關,以及對話紀錄、讀進來的檔案跟指令輸出、CLAUDE.md、SKILL、MCP、Subagent 各自怎麼吃掉額度。最後整理三個省額度的原則:做完就 /clear、用不到的 MCP 跟 SKILL 不要亂掛、大改動先跑 Plan Mode 避免重工,文末附 Week 4 動手檢查清單。

閱讀時間約 6 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 27:PR 流程與 CodeRabbit 自動審查

App 上線之後 main 分支就等於正式環境,直接 push 改壞了就是線上壞掉。這篇把正式環境 main 跟開發環境 develop 分開,改動先從 develop 開分支、開 PR(Pull Request)合併回 develop,確認沒問題再合併到 main 上線,並搭配 GitHub Actions 自動跑測試,再導入 CodeRabbit 這個 AI Code Review 服務,PR 一開就自動審查並用中文留言,公開儲存庫還可以免費使用。最後也聊聊怎麼在 PR 加上 Copilot 審查、CodeRabbit 的建議該怎麼取捨,以及怎麼請 AI 幫你修正。

閱讀時間約 3 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 26:上線後的第一次改版

App 上線之後想加新功能該怎麼做?這篇拿 Day 10 被 SPEC 不做清單擋下來的「預算提醒」當上線後的第一次改版:先改規格走正門(把它從不做清單移出來、補驗收條件跟決策紀錄),再用 Plan Mode 規劃、實作,照邊界劇本驗收之後,最後 push 讓 GitHub Actions 自動部署上線。同一個功能 Day 10 拒絕、今天接受,差別只在順序,也順便感受一下前面 25 天鋪好的地基,讓一個新功能從想法到上線可以快到什麼程度。

閱讀時間約 5 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 25:部署上線 GitHub Pages

30 天裡最有成就感的一天:把記帳 App 部署到 GitHub Pages,拿到真正的公開網址。這篇先處理文件翻案(TECH_CHOICE 原本決定不走 GitHub Pages,照規矩補進 SPEC 的決策紀錄),推上公開 repo 之前先檢查 commit 歷史裡有沒有不該公開的東西,把專案推上 GitHub,讓 AI 寫 GitHub Actions 的 deploy workflow(npm ci、test、build、upload、deploy),再補上新手最常踩到的 Vite base 設定避開白畫面,最後把 Pages Source 切到 GitHub Actions,push 到 main 就自動部署。

閱讀時間約 6 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 24:Refactor 還技術債

AI 寫的程式碼也會欠技術債,而且 Vibe Coding 欠得更快。這篇先聊什麼是技術債、AI 最常欠的四種債(重複的邏輯、過大的元件、不一致的寫法、文件跟程式碼講的不一樣),再示範完整的重構流程:用 Plan Mode 請 Claude Code 盤點出技術債清單、把清單存成 docs/TODO.md、先挑影響最大的還,小事(Day 22 的排版 Hook 沒有 Prettier 設定檔)直接請 AI 做,要動到好幾個檔案的就走 Plan Mode 一次只還一條(附一段重構專用的 Prompt),最後用 Day 23 的測試、build 加上自己走一遍畫面驗收什麼都沒變,沒過就直接退回上一個 commit。

閱讀時間約 6 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 23:測試安全網

Vibe Coding 時代你沒有逐行寫 code,那誰來保證它一直是對的?答案是測試。這篇把手動驗收變成自動化:用 Vitest 替記帳 App 算錢的邏輯寫單元測試,Prompt 只講情境不點函式名、拿 SPEC.md 第 7 節的驗收條件當測試清單,接著看懂 describe、it、expect、toBe 在寫什麼,再故意把 formatAmount 改壞見證測試失敗、還原,最後附一張開發流程圖與 Stop Hook 自動跑測試的延伸玩法。

閱讀時間約 6 分鐘

老闆不會教你的 Vibe Coding 實戰 30 天|Day 22:Hooks 生命週期觸發器

CLAUDE.md 寫的規則是拜託 AI 記得,Hooks 是事件發生就強制執行。這篇先講清楚 Hook 掛在哪些生命週期事件上(PreToolUse、PostToolUse、Stop、Notification)跟 settings.json 的兩層設定,接著實作兩個 Hook:共享的 PostToolUse 排版 hook,用 Node 腳本接 JSON 再跑 Prettier,不依賴 jq;以及 macOS 的 Stop 桌面通知。順便解釋 matcher 只盯 Edit 跟 Write,AI 用 Bash 寫檔為什麼不會觸發。