香港中學 AIGC &
VS Code AI Vibe Coding
實戰指南與評測手冊

你是一位頂級的前端工程師與視覺設計師。請幫我寫一個適合嵌入 Google Sites 的單檔案 HTML5 Cyberpunk 風格個人作品集與互動小遊戲網頁。

【設計規範】
1. 視覺風格：Cyberpunk 賽博朋克霓虹暗黑主題（背景 #0a0b10、霓虹粉 #ff0055、賽博藍 #00f0ff、駭客綠 #00ff66），具備微發光與 CRT 掃描線效果。
2. 響應式適配：支援 Google Sites 嵌入 iframe（100% 寬度自適應，無多餘水平滾動條）。
3. 核心功能區塊：
   - 頂部導航與動態賽博時間（香港時間 UTC+8）。
   - 個人簡介與 3 個具備 Hover 霓虹流光特效的 STEAM 專案卡片。
   - 內建「賽博駭客解碼」Canvas/JS 迷你互動小遊戲（包含計分、倒數計時與合成器音效開關）。
   - 終端機風格的訪客留言板（支援 LocalStorage 儲存）。
4. 語言：繁體中文（台灣/香港用語），所有代碼註解必須為繁體中文。

請設計一個符合 Chrome Extension Manifest V3 標準的「賽博桌面伴侶（Cyber Pet Companion）」擴充功能：

【架構規範】
1. manifest.json 必須使用 Manifest V3，包含 content_scripts 自動注入至所有網頁。
2. 懸浮視窗功能：
   - 注入一個可自由拖曳（Drag & Drop）的圓形/卡片桌寵助手到網頁右下角。
   - 滑鼠按住頂部即可平滑拖曳，且具備邊界碰撞偵測（不可拖出視窗外）。
   - 點擊伴侶可切換表情（開心、思考、驚訝、待機），並彈出懸浮對話氣泡。
   - 內建折疊式快捷小工具：蕃茄鐘計時器、快速網頁螢光筆、網頁字數統計。
   - 具備最小化縮小為螢幕邊緣懸浮球功能。
3. 樣式獨立：使用獨立 CSS Class 避免與宿主網頁 CSS 衝突。
4. 註解規範：全中文繁體註解。

請使用 Next.js 14 (App Router) 架構設計一個現代化的香港中學 STEAM 研創中心多頁面網站，並適配 Vercel 一鍵雲端部署：

【頁面路由與結構】
1. 首頁 (app/page.jsx)：Hero 主視覺、動態累加統計數字 (React Hook)、三大優勢卡片。
2. 介紹頁 (app/about/page.jsx)：創立願景、項目里程碑時間軸 (Timeline)、導師團隊卡片。
3. 聯絡頁 (app/contact/page.jsx)：受控表單 (Controlled Form)、防呆驗證、非同步提交成功彈窗提示。
4. 共用版型 (app/layout.jsx, components/Navbar.jsx, components/Footer.jsx)：玻璃擬態導航與頁尾。

【技術要求】
- 模組化設計：使用 React Components 與 CSS 變數設計系統。
- 部署相容性：符合 Vercel Zero-Config 部署標準，包含 package.json 與 next.config.js。
- 繁體中文在地化內容與中文註解。

請根據 xiaozhi-esp32-main 的架構，在 main/application.cc 中加入一段簡單的「圖、文、音」自我檢測程式碼：
1. 目標：當 Wi-Fi 連線成功（即觸發 NetworkEvent::Connected 時）：
   - 【圖案】：將螢幕表情設定為開心 ("happy")。
   - 【文字】：在螢幕上顯示彈窗文字 "Hello Hong Kong! 系統就緒"。
   - 【聲音】：呼叫 Application::GetInstance().Alert() 或 AudioService 播放啟動提示音。
2. 請維持 Google C++ 代碼風格，並確保正確透過 Board::GetInstance().GetDisplay() 進行 UI 呼叫。
3. 同時請提供一個可在標準 Arduino IDE + ESP32 運行的純淨版 .ino 示範代碼（支援 I2C OLED/TFT 顯示文字、表情與蜂鳴器音階）。

請設計一個專門用於輸出為標準 A4 PDF 的「香港學生 STEAM 創客桌遊卡牌排版系統」HTML 網頁：

【印刷與排版要求】
1. A4 精確規格：
   - 頁面設定 @page { size: A4 portrait; margin: 0; }。
   - 單張 A4 紙排版 3 欄 × 3 列共 9 張標準卡牌（每張卡牌尺寸 63mm × 88mm 標準撲克牌比例）。
2. 裁剪輔助線（Cutting Guides）：
   - 包含四角裁切十字線 (Crop Marks) 與邊框 0.5pt 淺灰虛線，方便學生使用剪刀或切紙刀裁切。
   - 安全邊距 (Margin) 與 2mm 印刷出血位 (Bleed)。
3. 卡牌內容設計：
   - 卡牌主題：香港 AI 創客角色卡（如「代碼架構師」、「硬體極客」、「提示詞大師」）。
   - 包含屬性數值、技能描述、稀有度徽章與專屬卡牌編號。
4. 網頁互動功能：
   - 包含「一鍵預覽 A4 印刷樣式」、「匯出 / 列印為 PDF」按鈕以及即時卡牌內容自定義編輯器。

請設計一個基於 Web 及 Edge TTS API 的「香港中學多媒體廣東話 AI 旁白工作室」：

【核心功能】
1. 語音模型支援：
   - 預設提供香港粵語聲線：曉曼 (zh-HK-HiuMaanNeural)、雲龍 (zh-HK-WanLungNeural)。
   - 同時支援國語 (zh-CN-XiaoxiaoNeural) 與英語 (en-US-JennyNeural)。
2. 語音參數微調：支援語速 (Speed)、音調 (Pitch)、音量 (Volume) 滑桿即時調整。
3. 文本與字幕：
   - 輸入長段旁白文稿，支援點擊「逐句試聽」與「全文生成」。
   - 生成音訊時同步輸出時間軸字幕 (.vtt / .srt) 與即時歌詞式高亮播放。
4. 下載與匯出：支援將合成的音訊檔案下載為 .mp3/.wav，方便學生匯入影片剪輯軟體。
5. 介面美化：現代錄音室深色調 UI，包含動態音波視覺化效果（Audio Visualizer）。