ray@blog:~$ ls posts/ --sort=date
posts[000] — 最新文章
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 23：測試安全網
Vibe Coding 時代你沒有逐行寫 code，那誰來保證它一直是對的？答案是測試。這篇把手動驗收變成自動化：用 Vitest 替記帳 App 算錢的邏輯寫單元測試，Prompt 只講情境不點函式名、拿 SPEC.md 第 7 節的驗收條件當測試清單，接著看懂 describe、it、expect、toBe 在寫什麼，再故意把 formatAmount 改壞見證測試失敗、還原，最後附一張開發流程圖與 Stop Hook 自動跑測試的延伸玩法。
老闆不會教你的 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 寫檔為什麼不會觸發。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 21：Week 3 收尾之所以 Skills、Subagents、MCP 怎麼選
Week 3 收尾！一週認識了 Skills、Subagents、MCP 三種擴充方式，這篇把三兄弟排開講清楚：一句話定位（教方法、請專人、當轉接頭）、載入時機與 context 成本的比較表、用三個問句反推該用哪個的決策心法，最後附 Week 3 動手檢查清單。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 20：MCP 入門之請 AI 查完最新文件再回答
AI 對套件版本跟設定方式的記憶是有截止日的，像 Tailwind 第 4 版這種大改版，它很容易憑舊印象亂答。這篇先白話講懂 MCP（Model Context Protocol）是什麼、跟 SKILL 與 Subagent 差在哪，接著用 npx ctx7 setup 接上 Context7 這個 MCP server，讓 Claude 回答之前先查最新版官方文件，順便看懂它為什麼不用點名就會自己去查（setup 順手裝的 rules 跟 SKILL）、MCP 工具在畫面上的命名方式、用 /context 看 MCP 佔了多少桌面，最後講需要才接、用完就移除的成本觀念。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 19：Subagents 之來請一個 Code Review 副手
Skill 是教同一個 Claude 做事方法，Subagent 則是幫你請一個獨立的專人。這篇講清楚 Subagent 是什麼（獨立 context 的分身、做完總結回傳）、跟 Skill 的分工，然後實作 .claude/agents/code-reviewer.md：一個只能讀不能改的 Code Review 副手，拆解 frontmatter 的 name、description、tools 欄位，最後讓它實際審查記帳 App。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 18：第一個 Skill，從 SKILL.md 從零開始
用了兩天現成的 plugin，今天自己寫一個 Skill：把 commit 訊息格式做成專案的 commit-message skill，一勞永逸。這篇拆解 SKILL.md 的結構（frontmatter 的 name 跟 description 怎麼寫才會被自動叫用）、內容怎麼安排（格式、規則、範例三段）、放專案還是放個人目錄的選擇，最後實測自動觸發跟手動觸發兩種叫用方式。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 17：畫面好看（下）之用設計文件鎖住風格
昨天改造完的漂亮畫面，明天加新功能時會不會跑掉？會，因為設計決定只存在那個對話的 context 裡。這篇示範用 Google Labs 開源的 DESIGN.md 規範，請 Claude 把設計決定整理成 DESIGN.md 設計文件（YAML 設計 token 加 Markdown 設計理由），跑 lint 做 WCAG 對比度健檢，再用 @ import 語法掛進 CLAUDE.md 讓每次對話自帶風格記憶，實測新對話加元件風格不再跑掉。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 16：讓畫面變好看（上）之 Frontend Design
AI 做的畫面總是一股 AI 味？這篇實戰 Anthropic 官方的 Frontend Design plugin：先聊為什麼 AI 預設審美很平庸（置中卡片加圓角陰影全家桶），接著安裝 plugin、用「講感覺不講 CSS」的 prompt 改造記帳 App 的 UI，做出前後對比，最後提醒畫面大改後的功能回歸驗收，好看不能用假的。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 15：Skills 是什麼，就是學會你做事方法
Week 3 開場！這篇講清楚 Claude Code 的 Skills 是什麼：一個裝著知識與流程的資料夾，Claude 需要時自己翻出來用。內容包含 Skills 跟內建斜線指令、自訂斜線指令的三角關係（merge 不是改名）、跟 CLAUDE.md 的分工（憲法 vs 技能包）、以及 /plugin 官方 marketplace 初體驗（Skills 可以用裝的）。
老闆不會教你的 Vibe Coding 實戰 30 天｜Day 14：Week 2 收尾之 AI 寫的 code 到底要不要看
Week 2 收尾！記帳 App 的 MVP 完工，這篇拿著 SPEC.md 的驗收標準做總驗收、用 git log 回顧一週的開發軌跡，然後回答一個大哉問：AI 寫的 code 到底要不要看？答案是分層：管資料跟算錢的 code 要看懂、管長相的可以先信，文末附讓 Claude 當導遊帶你看懂自己專案的 prompt，跟 Week 2 動手檢查清單。
