Peter.H's Full-Stack GAME

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 核心架構概覽架構組成架構特性： ✅ 單向資料流：資料流向可預測 ✅ 單一狀態來源：整個應用只有一個 State 樹 ✅ 狀態不可變：不直接修改 State，而是創建新 State ✅ 可測試性高：Reducer 是純函數，易於測試核心概念 1：State（狀態） State 是什麼？ State 是整個應用的單一資料來源（Single Source of Truth）。它通常是一個 struct，描述當前應用的完整狀態。實作範例 // AppState.swift struct AppState { // 購物車 var cartItems: [CartItem] = [] var totalAmount: Decimal = 0.0 // 用戶資訊 var userProfile: UserProfile? var isLoggedIn: Bool = false // UI 狀態 var isLoading: Bool = false var errorMessage: String? // 套餐選擇 var packages: [Package] = [] var selectedPackageId: String? } // 購物車商品 struct CartItem: Identifiable { let id: String let name: String let price: Decimal var quantity: Int } // 用戶資料 struct UserProfile { let id: String let name: String let email: String } // 套餐 struct Package: Identifiable { let id: String let name: String let items: [PackageItem] } struct PackageItem: Identifiable { let id: String let name: String var quantity: Int } 設計原則： ...

解決 CKEditor 圖片水平排版在前端顯示為垂直排列的問題

前言：編輯器與前端的排版不一致之謎在開發多平台醫療健康應用時，我們採用了現代化的技術棧：後端 CMS：Strapi v5.15.1（Headless CMS）前端框架：Vue.js 3 富文本編輯器：CKEditor 5 資料傳輸：GraphQL API 這個組合在大多數情況下運作良好，編輯者可以在 Strapi 後台使用 CKEditor 輕鬆編輯富文本內容，前端 Vue.js 應用透過 GraphQL 獲取並渲染這些內容。然而，我們遇到了一個令人困惑的問題：在 Strapi 後台使用 CKEditor 精心排版的水平並排圖片，到了前端網頁卻變成了垂直排列。這個問題不僅影響了內容的視覺呈現，也破壞了編輯者的排版意圖。更重要的是，這讓非技術背景的內容編輯者感到困惑：「為什麼我在後台看到的排版，到了網站上就變了？」這篇文章將深入探討這個問題的根本原因，並提供系統性的解決方案。問題現象與環境說明內容流程架構我們的內容從編輯到展示的完整流程如下：問題的具體表現預期行為：在 Strapi CKEditor 後台，編輯者將兩張圖片設定為水平並排：  <figure class="image" style="float:left"> <img src="/uploads/image1.webp" alt="圖片1"> <figcaption>圖片1說明</figcaption> </figure> <figure class="image" style="float:left"> <img src="/uploads/image2.webp" alt="圖片2"> <figcaption>圖片2說明</figcaption> </figure> 實際現象：前端 Vue.js 渲染後，圖片變成垂直排列：兩張圖片沒有並排顯示，而是一張接著一張垂直堆疊。技術環境詳情 Strapi CKEditor 配置（config/schema.json）： { "kind": "collectionType", "collectionName": "articles", "info": { "singularName": "article", "pluralName": "articles", "displayName": "文章" }, "attributes": { "title": { "type": "string" }, "content": { "type": "customField", "options": { "preset": "defaultHtml" }, "customField": "plugin::ckeditor5.CKEditor" } } } Vue.js 前端渲染組件（ServiceDetailView.vue）： ...

Vue.js SPA 社交分享完整指南：解決 Facebook/LINE OpenGraph 爬蟲問題

引言：當精美的網站變成分享時的「無名氏」在現代 Web 開發中，社交媒體分享功能是不可或缺的一部分。當用戶在 Facebook、LINE 或其他社交平台分享你的網站連結時，你希望顯示的是精美的預覽卡片，而不是空白或錯誤的資訊。然而，對於使用 Vue.js、React、Angular 等前端框架開發的單頁應用程式（SPA），這個看似簡單的需求卻隱藏著技術挑戰。本文將完整記錄從問題發現、原因分析、到解決方案實作的全過程。問題發現：為什麼分享連結總是顯示預設值？場景描述我的平台 www.abc.com 是一個基於 Vue.js 3 + Strapi CMS 的網站。某天，我發現一個嚴重問題：當用戶分享服務頁面（如 https://www.abc.com/service-us/6）到 Facebook 或 LINE 時，顯示的預覽資訊總是預設值，而非該服務的實際標題和描述。實際情況對比：情境期望結果實際結果分享服務頁面顯示「專業網站開發服務」顯示「ABCDEFG（預設標題）」分享部落格文章顯示文章標題與摘要顯示網站預設描述分享產品頁面顯示產品圖片與名稱顯示網站 Logo 診斷工具測試使用 Facebook Open Graph Debugger 測試後發現：爬蟲抓取到的 HTML： <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>ABCDEFG</title> <meta property="og:title" content="ABCDEFG"> <meta property="og:description" content="預設網站描述">  </head> <body> <div id="app"></div> <script src="/assets/index.js"></script> </body> </html> ⚠️ 關鍵發現：爬蟲只看到靜態的 HTML 模板，完全沒有 JavaScript 執行後動態生成的 meta 標籤。 ...