VS Code Custom Agent 使用指南

簡介

什麼是 Custom Agent？

Custom Agent 是 VS Code 中 GitHub Copilot Chat 的自訂代理設定。它可以讓你針對不同開發任務，預先定義 AI 應該扮演的角色、可使用的工具、模型偏好與工作流程，讓 Copilot 在切換到該 agent 後，以更貼近任務需求的方式回應。

內建 agent 通常適合一般用途，但實際開發時，不同任務會需要不同的行為模式。例如規劃階段可能只需要讀取與搜尋工具，避免 AI 直接修改檔案；實作階段則需要編輯工具；Code Review 階段又會更重視安全性、可維護性與測試覆蓋。Custom Agent 的價值就在於把這些設定整理成可重複使用的工作角色。

Custom Agent 會定義在 .agent.md Markdown 檔案中，可以放在工作區內與團隊共享，也可以放在使用者層級，讓你在不同專案中重複使用。

適合使用情境

• 規劃任務：建立只具備讀取與搜尋能力的 planning agent，用來整理需求、分析程式碼與產出實作計畫。
• 功能開發：建立 implementation agent，讓 AI 依照專案規範進行程式碼修改與測試。
• 程式碼審查：建立 review agent，專注檢查安全性、可讀性、錯誤處理與測試缺口。
• 專案特定流程：針對團隊內固定流程，例如產生測試、撰寫文件、維護 API 規格，建立可重複使用的 agent。
• 多階段工作流：透過 handoffs 在不同 agent 之間交接，例如從規劃 agent 交給實作 agent，再交給審查 agent。

使用 geojson.io 在 Google Maps 上建立地理柵欄

在開發需要「位置範圍判斷」的功能時，地理柵欄（Geofencing）是很常見的需求。例如：判斷玩家是否進入指定活動區域、確認使用者是否位於服務範圍內，或是根據所在位置觸發不同的互動內容。

如果直接在程式碼裡手動輸入經緯度，不但不直覺，也很容易因為座標順序或邊界不精準而出錯。這時候可以使用 geojson.io 先在地圖上畫出範圍，再把結果匯出成 GeoJSON，最後放到 Google Maps 裡顯示與判斷。

這篇文章會介紹如何使用 geojson.io 建立地理柵欄，並示範如何將 GeoJSON 套用到 Google Maps JavaScript API 中。

使用 VS Code 與 AI 協作開發遊戲的一個月心得

想更新一下最近使用 VS Code 開發遊戲的想法。

從零開始開發這個專案到現在，已經經過了一個月。這段時間我一直在摸索一套能和 AI 穩定協作的開發循環：如何把想法交給 AI、如何讓 AI 參與實作，以及如何避免它在錯誤的方向上越走越遠。

客製化 Google Map 樣式完整教學

Google Maps 是目前最廣泛使用的地圖服務之一,但預設樣式對於追求設計感或特殊主題的網站(例如遊戲、品牌官網、資料視覺化儀表板)來說,往往略顯單調。所幸 Google 提供了完整的樣式自訂機制,讓開發者可以透過 JSON 設定檔調整地圖上每一項元素的色彩、可見度與標籤呈現方式。

本文將介紹兩個最常被使用的工具:官方推出的 Google Maps Styling Wizard,以及社群維護的 Snazzy Maps,並說明如何將樣式套用到實際的網頁中。

為什麼要客製化地圖樣式

預設的 Google Maps 配色雖然中性,但在某些情境下會帶來干擾:

• 遊戲或互動體驗:需要突出地圖上的角色、任務點或路線,過多的 POI(興趣點)反而會分散注意力
• 品牌一致性:希望地圖配色與網站主視覺(Logo、主色調)融合
• 深色模式:夜間瀏覽情境下,亮色地圖會造成眩光
• 資料視覺化:在地圖上疊加大量標記或熱力圖時,需要降低底圖的視覺權重

透過樣式設定,你可以隱藏不需要的元素、調整配色,甚至打造復古、科幻、極簡等各種風格主題。

從零開始導入 Google Maps API

簡介

什麼是 Google Maps API？

Google Maps API 是 Google 提供的網頁地圖服務，讓開發者能在自己的網站或 Web App 中嵌入互動式地圖。除了基本的地圖顯示外，還支援標記（Marker）、路線規劃、街景、自訂樣式等豐富功能,是製作 LBS（Location-Based Service）應用、店家定位、地圖小遊戲等常見專案時的首選方案。

本文以最精簡的範例,示範如何取得 API Key、建立第一張可運作的地圖,並透過 importLibrary() 動態載入新版地圖函式庫。

適合使用情境

• 需要在網站中嵌入互動式地圖的應用
• 開發以地理位置為基礎的小型專案或 Game Jam 作品
• 想體驗 Google Maps 新版動態載入 API（importLibrary）的開發者
• 需要使用 Cloud-based Map Styling（雲端地圖樣式）的專案

uv 安裝指南

簡介

什麼是 uv？

uv 是由 Astral 開發的新世代 Python 套件與專案管理工具，以 Rust 撰寫，目標是提供極速、可靠且統一的 Python 工作流程，能夠取代 pip、pip-tools、pipx、poetry、pyenv、virtualenv 等工具。

核心特性

• 極速安裝：效能遠超 pip 與 poetry，具備全域快取機制
• 一體化工具鏈：整合 Python 版本管理、虛擬環境、套件安裝與專案管理
• 相容 pip 介面：平滑銜接現有 pip 使用習慣
• 跨平台支援：Windows、macOS、Linux 皆可使用
• 無需預先安裝 Python：uv 本身可直接下載並管理 Python 版本

用 /create-skill 打造專屬 Copilot 技能

GitHub Copilot 的 Agent Skills 讓你能把常用工作流程封裝成可重複呼叫的技能（Skill），省去每次對話都要重新解釋背景的麻煩。而現在，你甚至不需要手動撰寫 SKILL.md—只要在 Chat 裡輸入 /create-skill，Copilot 就會根據你的描述或現有工具，自動幫你把整份技能定義檔生出來。

本文會以「移除 Google Gemini 浮水印」為範例，完整演示從建立 Skill 到實際使用的全流程。

VS Code Agent Skills 使用指南

GitHub Copilot 的 Agent Skills 功能讓你能夠建立可重複使用的工作流程，並在需要時自動載入對應的指令、腳本與資源。本文將介紹 Agent Skills 的核心概念、建立方式，以及與其他自訂功能的差異。

Agent Skills 是什麼？

Agent Skills 是由一個資料夾組成的技能包，內含 SKILL.md 指令檔、腳本與相關資源。當 GitHub Copilot 判斷某個技能與當前任務相關時，會自動載入對應的內容。

Agent Skills 的設計遵循開放標準（agentskills.io），因此建立好的技能不僅適用於 VS Code，也能在 GitHub Copilot CLI 與 GitHub Copilot Coding Agent 等環境中使用。

使用 Agent Skills 的主要優點：

• 專業化：為特定領域的任務量身打造能力，不需每次重複說明背景
• 減少重工：建立一次，自動套用於所有相關對話
• 組合運用：多個技能可以組合搭配，建構複雜的工作流程
• 高效載入：僅在相關時才將內容載入 context，避免浪費 token

Chrome DevTools MCP 安裝指南與使用

簡介

什麼是 Chrome DevTools MCP？

chrome-devtools-mcp 是由 Google ChromeDevTools 官方團隊開發的 MCP（Model Context Protocol）伺服器。它讓 AI 程式輔助工具（如 GitHub Copilot、Claude、Cursor 等）能夠直接控制並檢查一個真實的 Chrome 瀏覽器，賦予 AI 完整的 Chrome DevTools 能力，從效能分析、網路監控到自動化操作，一應俱全。

核心特性

• 效能分析：錄製 Performance Trace 並透過 Chrome DevTools 提取可執行的效能洞察
• 進階除錯：分析網路請求、擷取截圖、查看 Console 訊息（含 Source Map 錯誤堆疊）
• 可靠的自動化：基於 Puppeteer 進行 Chrome 自動化操作，並自動等待操作結果完成
• Lighthouse 稽核：對網頁執行 Lighthouse 品質稽核，涵蓋效能、無障礙、SEO 等指標
• 記憶體快照：擷取頁面記憶體快照，協助追蹤記憶體洩漏問題
• 自動連線（autoConnect）：自動附加至已開啟的 Chrome 實例，保留原有的登入狀態與分頁

支援的 MCP 用戶端

• GitHub Copilot / VS Code
• Claude Desktop / Claude Code
• Cursor
• Gemini CLI / Gemini Code Assist
• JetBrains AI Assistant
• 以及更多支援 MCP 協議的工具

Docker 安裝指南

文章目標

本篇依據 Docker 官方文件整理，帶你在 Ubuntu 上安裝 Docker Engine（含 Docker CLI、Buildx、Compose Plugin），並完成基本驗證。

本教學情境以 Windows 的 WSL2（Ubuntu 發行版）作為安裝載體。

適用環境

• Windows 11（建議）或 Windows 10 + WSL2
• Ubuntu 24.04 LTS、22.04 LTS（64-bit）
• 已可使用 sudo
• 網路可連到 download.docker.com

註解
官方對 Ubuntu 衍生發行版（例如 Linux Mint）不提供完整支援，雖然實務上可能可用。