Pcion's Blog

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

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

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

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

為什麼要客製化地圖樣式

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

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

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

簡介

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

核心特性

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

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

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

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 是由 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 官方文件整理，帶你在 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）不提供完整支援，雖然實務上可能可用。

簡介

NVM（Node Version Manager）是一個基於 POSIX Shell 的 Node.js 版本管理工具，可讓你在同一台機器上快速安裝並切換不同版本的 Node.js。

支援平台： Unix、macOS、Windows WSL

提示
NVM 不支援 Windows 原生環境。Windows 使用者可改用 nvm-windows。

簡介

什麼是 Unity MCP？

MCP for Unity 是由 Coplay 開發並維護的開源專案，透過 Model Context Protocol（MCP） 將 AI 助手（Claude、Claude Code、Cursor、VS Code Copilot、GitHub Copilot CLI 等）與你的 Unity Editor 串接起來。

簡單來說，只要你開著 Unity 編輯器，就可以直接對 AI 說：「幫我建立一個有紅色、藍色和黃色方塊的場景」或「幫我寫一個簡單的玩家控制器」，AI 就能透過 MCP 協定直接操作你的 Unity 專案。

核心特性

• 自然語言控制：用文字描述任務，讓 AI 直接在 Unity 中執行
• 豐富工具集：管理資產、場景、材質、腳本、UI、動畫、著色器等
• 高效能批次執行：batch_execute 指令比逐一呼叫快 10 ～ 100 倍
• 可擴充自訂工具：支援 Roslyn 執行時期腳本驗證與自訂工具擴充
• 多 Unity 實例支援：可同時連接多個 Unity Editor 並指定目標實例
• MIT 授權：完全開源免費

支援的 MCP 客戶端

• Claude Desktop
• Claude Code
• Cursor
• VS Code Copilot
• GitHub Copilot CLI
• Windsurf