Subagent-Driven 與 Parallel Session：AI 協作開發的兩種典範
前言：AI 協作開發的範式演進 在 AI 輔助開發工具快速演進的今天，我們已經從「程式碼自動補全」進化到「AI 主動協作」的階段。Claude Code 作為 Anthropic 推出的革命性開發工具，引入了兩種截然不同但互補的協作模式：Subagent-Driven Development 和 Parallel Session。 ...
Posts
Google Antigravity：AI 開發的典範轉移，從輔助編碼到自主開發
圖片來源：Google Antigravity 官方部落格 前言：當 AI 從助手變成隊友 2025 年 11 月，Google 悄悄推出了一款顛覆性的開發工具 —— Antigravity。這不是又一個「AI 程式碼補全工具」，而是一個徹底改變我們思考軟體開發方式的平台。如果說 GitHub Copilot 和 Cursor 是你的智慧助手，那麼 Antigravity 就是一支能夠自主規劃、執行和驗證的 AI 團隊。 在深入研究了官方文件、實際案例和社群回饋後，我想分享這個「代理優先」（Agent-First）開發平台的核心理念、創新功能，以及它目前仍面臨的挑戰。 核心概念：什麼是「代理優先」開發？ 傳統 AI 輔助 vs. 代理優先開發 在傳統的 AI 輔助編碼中，開發者仍然是主角：你逐行寫程式碼，AI 只是在旁邊提供自動完成建議。但 Antigravity 提出了一個全新的工作模式： 你不再是程式碼的執行者，而是任務的指揮官。 這個轉變體現在： 傳統模式：「我要在第 42 行加一個函數…」（微觀管理） Antigravity 模式：「建立一個包含搜尋功能的活動網站」（任務導向） AI 代理會： 分析需求並制定計劃 自主執行所有編碼工作 測試應用程式並驗證功能 產生可審查的成果文件（Artifacts） 三個核心介面：Mission Control 架構 Antigravity 設計了三個相互配合的工作介面： Editor 與 Agent Manager 的雙介面架構 1. Agent Manager（非同步任務中心） 這是你的「任務控制中心」，可以： ...
Vue SPA 預渲染與 OpenGraph 完整指南：從問題到解決方案
前言 在現代 Web 開發中，Vue 單頁應用程式（SPA）帶來了優秀的使用者體驗，但同時也面臨著 SEO 和社交媒體分享的挑戰。當用戶在 Facebook、LINE 或其他社交平台分享你的網站連結時，你希望顯示的是精美的預覽卡片，而不是空白或錯誤的資訊。然而，搜尋引擎爬蟲和社交媒體爬蟲無法執行 JavaScript，導致只能抓到空白的 HTML 骨架，Open Graph 標籤也無法正確顯示。 本文將深入探討兩種預渲染策略：Run-time Prerender（動態預渲染） 和 Build-time Prerender（靜態預渲染），並分享實際的實作經驗與部署過程中遇到的挑戰。 問題發現與場景 典型的問題場景 當開發一個基於 Vue.js 3 + Strapi 的網頁平台時，可能會發現一個重要問題： 當用戶分享服務頁面（如 https://www.abc.com/service-us/6）到 Facebook 或 LINE 時，顯示的預覽資訊總是預設值，而非該服務的實際標題和描述。 使用 Facebook 的 Open Graph Debugger 測試後發現，爬蟲抓取到的 HTML 只包含基本的模板，動態生成的 meta 標籤完全沒有被識別。 SPA 的 SEO 困境 典型的 Vue SPA 在未預渲染前，HTML 長這樣： <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>範例網站</title> <meta name="description" content="預設描述"> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> 問題： Facebook 爬蟲抓不到動態產生的 Open Graph 標籤 Google 爬蟲雖然能執行 JS，但會降低 SEO 排名 分享連結到社群媒體時無法顯示預覽圖 我們需要什麼？ 針對不同的路由，回傳不同的 meta 標籤： ...
一次錯誤部署引發的 PostgreSQL Sequence 災難：為什麼使用者突然無法解鎖動畫？
「老闆，用戶的解鎖記錄全不見了！」「快把舊資料拉出來灌回去！」在緊急狀況下，我沒想太多就照做了。然後，我不小心埋下了一顆定時炸彈… 🔥 第一幕：災難降臨 2025 年 11 月某日，上午 10:30 Slack 突然炸開： 💬 同事：「完蛋了…我剛剛不小心部署到舊的 commit…」 💬 QA：「欸！為什麼使用者的動畫解鎖記錄都不見了？」 💬 使用者：「我昨天才花金幣解鎖的動畫怎麼不見了？」 💬 老闆：「@所有人 立刻確認影響範圍！」 我打開資料庫一看： SELECT COUNT(*) FROM user_unlocked_animations; -- 結果: 0 😱 所有用戶的解鎖記錄全部消失！ 原因：同事不小心部署了一個舊的 Strapi commit，那個版本的 database migration 把 user_unlocked_animations 相關的表全部清空了。 ⚡ 第二幕：老闆的緊急命令 💬 老闆：「快！把之前的用戶解鎖記錄拉出來，灌回現在的資料庫！」 我心裡想：「舊資料插回去，新資料又同時在進來…會不會有問題？」 但老闆在等，使用者在抱怨，沒時間多想，先恢復資料再說。 緊急恢復資料 // 從備份拉出資料，直接插入（包含原始的 ID） blablablabla } // ⚠️ 直接指定了 id，但沒想到要更新 sequence... 執行完畢： ✅ 資料恢復完成！ QA 測試：「使用者的解鎖記錄都回來了！」 眾人鬆了一口氣。 💣 第三幕：24 小時後，炸彈引爆 隔天下午 💬 客服：「有使用者回報說無法解鎖動畫!!!」 💬 使用者：「我有 3 個金幣，想解鎖動畫，但一直顯示錯誤！金幣被扣了但動畫沒解鎖！」 ...
Skills 實用技巧：最佳實踐、疑難排解與 30 個靈感清單
系列文章第 4 篇（完結篇）：整理所有實用技巧、最佳實踐和疑難排解方法，並提供 30 個立即可用的 Skill 靈感。 前言 歡迎來到「Claude Code Skills 完全指南」系列的最終篇！ 在前三篇文章中，我們從概念到實戰，從基礎到進階，全面探索了 Skills 系統。今天，讓我們將這些知識轉化為實用的指引和建議。 你將獲得： ✅ 完整的最佳實踐清單 ✅ 常見問題與解決方案 ✅ 除錯和優化技巧 ✅ 30 個實用 Skill 靈感 ✅ 可直接使用的完整模板 預計閱讀時間：15 分鐘 讓我們開始吧！ 最佳實踐指南 1. 命名規範 Skill 名稱 ✅ 好的命名： name: pdf-editor name: api-tester name: blog-writer name: code-reviewer ❌ 避免的命名： name: PDF Editor # 不要用空格和大寫 name: apiTester # 不要用駝峰式命名 name: Blog_Writer # 不要用底線 name: skill-1 # 不要用無意義的名稱 規則： ...
進階應用：企業級 Skills 與官方範例深度解析
系列文章第 3 篇：探索企業級 Skills 的設計模式，深度解析官方範例，學習 Skills 組合使用。 前言 在前兩篇文章中，我們了解了 Skills 的概念並動手建立了第一個 Skill。今天，讓我們更進一步，探索企業級應用和進階技巧。 你將學到： ✅ 企業級 Skills 的設計模式 ✅ 官方 Document Skills 深度解析 ✅ Webapp Testing Skill 的偵查後行動模式 ✅ Skills 組合使用策略 ✅ 在不同平台使用 Skills 預計閱讀時間：12 分鐘 企業級 Skill 範例：API 整合測試器 讓我們看一個更複雜的企業級範例，展示 Skills 在實際業務場景的應用。 使用場景 問題： 團隊有 10 個微服務，每次部署前都要手動測試 API 整合，耗時且容易出錯。 解決方案： 建立一個 API 整合測試 Skill 目錄結構 api-integration-tester/ ├── SKILL.md ├── scripts/ │ ├── run_tests.py # 主要測試執行器 │ ├── generate_report.py # 產生測試報告 │ └── notify_slack.py # Slack 通知 ├── references/ │ ├── api-endpoints.md # API 端點文件 │ ├── test-scenarios.md # 測試情境說明 │ └── auth-guide.md # 認證方式指南 └── assets/ ├── test-data/ # 測試資料 │ ├── valid-requests.json │ └── invalid-requests.json └── report-template.html # 報告模板 SKILL.md 設計重點 --- name: api-integration-tester description: 自動化 API 整合測試工具。此 Skill 用於執行微服務間的整合測試、驗證 API 回應、產生測試報告，並在發現問題時通知團隊。適用於 CI/CD 流程或手動測試需求。 --- # API 整合測試器 ## 快速開始 \`\`\`bash # 執行所有測試 python scripts/run_tests.py --env production # 執行特定服務測試 python scripts/run_tests.py --service user-service --env staging # 產生報告 python scripts/generate_report.py --output ./reports/ \`\`\` ## 測試流程 1. **載入測試情境** - 從 `references/test-scenarios.md` 讀取 2. **準備測試資料** - 使用 `assets/test-data/` 中的資料 3. **執行測試** - 呼叫各 API 端點並驗證回應 4. **產生報告** - 使用 `assets/report-template.html` 5. **通知團隊** - 若有失敗，透過 Slack 通知 ## 重要檔案說明 ### references/api-endpoints.md 包含所有微服務的端點資訊。由於檔案較大，可用 grep 搜尋： \`\`\`bash grep -A 10 "user-service" references/api-endpoints.md \`\`\` ### scripts/run_tests.py 主要測試執行器，支援參數： - `--env`: 環境（development/staging/production） - `--service`: 特定服務名稱 - `--verbose`: 詳細輸出 - `--fail-fast`: 遇到錯誤立即停止 關鍵設計模式 1. 黑盒腳本模式 **Always run scripts with `--help` first** DO NOT read the source until absolutely necessary. 這些腳本很大，會污染上下文視窗。 它們被設計為「黑盒」直接調用，而不是讀取理解。 為什麼這樣設計？ ...
手把手實戰：打造你的第一個 Claude Skill（微服務健康監控儀表板）
系列文章第 2 篇：從零開始建立一個企業級實用的 Skill，完整的程式碼和詳細步驟教學。 前言 在上一篇文章中，我們了解了 Skills 的核心概念。今天，讓我們捲起袖子，動手打造一個真正實用的企業級 Skill！ 你將學到： ✅ Skills 的完整目錄結構 ✅ 如何規劃和設計企業級 Skill ✅ 撰寫 SKILL.md 的技巧 ✅ 建立 scripts、references 和 assets ✅ 產生視覺化儀表板 ✅ 整合監控和告警系統 專案目標： 建立一個「微服務健康監控儀表板」Skill 這個 Skill 能夠： 🔍 自動檢查所有微服務健康狀態 📊 產生視覺化即時儀表板 📈 追蹤服務回應時間趨勢 ⚠️ 偵測異常並自動告警 📄 產生專業監控報告 🔄 支援定期自動執行 預計閱讀時間：15 分鐘 實作時間：40-50 分鐘 讓我們開始吧！ 為什麼選擇這個範例？ 與 Postman 的本質差異 很多人會問：「這不就是 Postman 嗎？」 完全不同！讓我們看看差異： 比較項目 Postman 我們的監控 Skill 使用場景 開發時測試單一 API 營運時監控所有服務 執行方式 手動點擊測試 自動化定期執行 目標 驗證功能正確性 確保服務健康運作 使用者 開發者個人 整個團隊 + 管理層 視覺化 簡單的回應顯示 完整的儀表板 + 趨勢圖 告警 無 自動 Discord/Email 通知 歷史記錄 無 完整趨勢追蹤 CI/CD 整合 需要 Newman + 複雜設定 一行指令 簡單來說： ...
Claude Code Skills 入門：讓 AI 成為你的專業團隊成員
系列文章第 1 篇：探索 Claude Code Skills 的核心概念，了解它如何改變你與 AI 的協作方式。 前言 想像一下這個場景： 你是一家新創公司的開發者，每次需要寫技術文件時，都要花 30 分鐘向 AI 解釋公司的文件格式、品牌規範、SEO 要求⋯⋯重複這些指令讓人疲憊不堪。 或者，你的團隊有一套複雜的 API 測試流程，每次都要重新告訴 AI 測試步驟、端點位置、驗證規則⋯⋯ 如果有一種方法，能讓 AI 「記住」這些專業知識，就像真正的團隊成員一樣？ 這就是 Claude Code Skills 要解決的問題。 在這個系列文章中，我將帶你深入了解 Skills 系統，從基礎概念到實戰應用。今天的第一篇，讓我們先理解什麼是 Skills，以及為什麼它值得你投資時間學習。 什麼是 Claude Code Skills？ 核心定義 Skills 是一種模組化、自包含的套件，用於擴展 Claude 的能力。 更具體來說，Skills 就像是： 📚 員工手冊 - 告訴 Claude 你的工作流程和規範 🧰 工具箱 - 提供可重複使用的腳本和模板 🎓 專業訓練 - 傳授特定領域的知識和最佳實踐 一個簡單的比喻 想像你在咖啡廳雇用了一位新員工： 沒有 Skills（傳統方式）： 你：請幫我做一杯拿鐵 新員工：好的！怎麼做？ 你：先用這個咖啡豆，磨成這個粗細，萃取 25 秒... （每次都要重複解釋） 隔天... 你：請做一杯拿鐵 新員工：好的！怎麼做？ 你：（又要重複一次）😩 使用 Skills： ...
Swift Redux 架構完整指南：從 Reducer 到 Middleware 的狀態管理實踐
引言：為什麼需要 Redux？ 在 iOS 開發中，隨著應用規模擴大，狀態管理逐漸成為最具挑戰性的課題。當多個 View 需要共享狀態、狀態變化難以追蹤時，應用很容易陷入混亂。 Redux 作為一種可預測的狀態容器，最早在 JavaScript 生態系中流行，如今也廣泛應用於 Swift/iOS 專案。本文將深入介紹 Redux 架構的核心觀念，包含： Reducer（減少器）：狀態更新的核心邏輯 Store（儲存區）：應用的單一狀態來源 Action（動作）：描述「發生什麼事」的指令 Middleware（中介層）：處理非同步與副作用 Redux 核心架構概覽 架構組成 flowchart TB View[View / SwiftUI] Store[Store<br/>單一狀態來源] Reducer[Reducer<br/>純函數] State[State<br/>應用狀態] Action[Action<br/>動作描述] Middleware[Middleware<br/>非同步處理] View -->|1. dispatch| Action Action -->|2. 觸發| Middleware Middleware -->|3. 可能派發新 Action| Action Action -->|4. 傳遞| Reducer Reducer -->|5. 計算| State State -->|6. 更新| Store Store -->|7. 觀察 @Published| View style Store fill:#4ade80 style Reducer fill:#60a5fa style Middleware fill:#f97316 架構特性： ...
解決 CKEditor 圖片水平排版在前端顯示為垂直排列的問題
前言：編輯器與前端的排版不一致之謎 在開發多平台醫療健康應用時，我們採用了現代化的技術棧： 後端 CMS：Strapi v5.15.1（Headless CMS） 前端框架：Vue.js 3 富文本編輯器：CKEditor 5 資料傳輸：GraphQL API 這個組合在大多數情況下運作良好，編輯者可以在 Strapi 後台使用 CKEditor 輕鬆編輯富文本內容，前端 Vue.js 應用透過 GraphQL 獲取並渲染這些內容。 然而，我們遇到了一個令人困惑的問題： 在 Strapi 後台使用 CKEditor 精心排版的水平並排圖片，到了前端網頁卻變成了垂直排列。 這個問題不僅影響了內容的視覺呈現，也破壞了編輯者的排版意圖。更重要的是，這讓非技術背景的內容編輯者感到困惑：「為什麼我在後台看到的排版，到了網站上就變了？」 這篇文章將深入探討這個問題的根本原因，並提供系統性的解決方案。 問題現象與環境說明 內容流程架構 我們的內容從編輯到展示的完整流程如下： sequenceDiagram participant Editor as 內容編輯者 participant Strapi as Strapi 後台 participant CKEditor as CKEditor 5 participant DB as 資料庫 participant GraphQL as GraphQL API participant Vue as Vue.js 前端 participant Browser as 使用者瀏覽器 Editor->>Strapi: 登入後台編輯內容 Strapi->>CKEditor: 載入富文本編輯器 Editor->>CKEditor: 編輯內容，設定圖片水平排列 CKEditor->>CKEditor: 生成 HTML（含 float 樣式） CKEditor->>Strapi: 儲存富文本內容 Strapi->>DB: 儲存到資料庫 Note over Editor,DB: 編輯階段完成 Vue->>GraphQL: 請求內容資料 GraphQL->>DB: 查詢內容 DB-->>GraphQL: 回傳富文本 HTML GraphQL-->>Vue: 回傳 JSON（含 HTML 字串） Vue->>Vue: 使用 v-html 渲染 HTML Vue->>Browser: 顯示最終頁面 Note over Browser: ❌ 問題：圖片垂直排列<br/>（預期：水平排列） 問題的具體表現 預期行為： ...