在 WSL 中使用 Antigravity / VSCode 進行 AI 前端開發的準備

在 WSL 環境中，搭配 Antigravity / VSCode 這類支援 AI 的 IDE 進行前端開發前的基本準備流程。目標是建立一個穩定、可執行瀏覽器自動化測試與 AI 協作開發的環境。

一、環境前提

1. Windows 已安裝 WSL（建議使用 Ubuntu）

2. 已安裝 Node.js（建議使用 LTS 版本）

3. 使用 VSCode Remote - WSL 或 Antigravity 連線至 WSL 環境

4. 專案內已初始化 package.json

確認 Node 版本：
node -v

二、安裝 Playwright（前端測試與瀏覽器控制）

在 AI 協助開發前端頁面時，常會搭配 Playwright 做自動化測試與 DOM 驗證。在 WSL 中需要額外安裝 Linux 依賴套件。

步驟 1：更新套件清單
這次通常可以正常更新：

sudo apt-get update

步驟 2：安裝 Playwright 必要的系統依賴
這會補齊 Linux 缺少的瀏覽器運行庫（例如 libgbm、libasound 等）：

npx playwright install-deps

步驟 3：安裝 Chrome
讓 Playwright 可以實際控制瀏覽器：

npx playwright install chrome

三、為什麼這些步驟很重要？

WSL 本質是 Linux 環境，預設並沒有完整的桌面瀏覽器依賴庫。如果直接執行 Playwright 測試，很可能會出現 shared library 錯誤。透過 install-deps 可以一次補齊。

在 AI 協助開發流程中，例如：

• 讓 AI 產生前端頁面

• 自動執行測試

• 驗證 UI 元素

• 模擬使用者操作

Playwright 是非常重要的基礎工具。

四、完成後建議測試

可以建立一個簡單測試檔，確認瀏覽器是否能正常啟動，避免後續 AI 生成測試時發生環境錯誤。

以上就是在 WSL 中使用 Antigravity / VSCode 進行 AI 前端開發前的基本準備流程紀錄。

---

如果需要，我也可以幫你改寫成比較偏教學風格或偏工程團隊內部筆記風格版本。