CREATIVE INTELLIGENCE LAB // 克里艾提夫研究所
HONG KONG STEAM ✕ VIBE CODING BENCHMARK
香港中學 AIGC &
VS Code AI Vibe Coding
實戰指南與評測手冊
賦能中學生探索 AIGC Vibe Coding 的多元產出與科技效能，
並作為全港檢驗各類 AI 工具代碼能力極限之旗艦基準手冊。
🎯 多元產出與效能
前端設計、數位產品、企業全端、實體物聯網、印刷與粵語語音。
⚡ 一鍵複製 Prompt
電子版附帶標準黃金提示詞，隨貼即用，高效驗收各類 AI 模型。
🔬 AI 效能基準診斷
全港首份跨工具能力評測，快速看清自己手上 AI 的 Vibe 極限。
📚 任務目錄與應用領域矩陣
| 頁碼 |
章節與任務名稱 |
核心技術與框架 |
明確應用領域與定位 |
| P. 03 |
第 1 章：測試緣起與 AI 效能檢驗 |
AIGC 基準測試 / 運算思維 |
學生多元產出效能 · AI 工具能力極限檢驗 |
| P. 04 |
第 2 章：雙軌使用指引與 PACE 心法 |
PACE 提示工程四步法則 |
電子複製互動 · 實體 A4 騎馬釘手冊 |
| P. 05 |
任務 1：Cyberpunk 互動原型網頁設計 |
HTML5 / Canvas / Web Audio |
前端設計 · 快速 Prototype 展示 · Google Sites |
| P. 06 |
任務 2：Chrome 插件可拖曳桌面伴侶 |
Manifest V3 / DOM Drag / CSS |
數位產品設計 · 互動/體驗設計 · 陪伴設計 |
| P. 07 |
任務 3：Next.js 14 多頁面企業級應用 |
React / App Router / Vercel |
企業級別網頁設計 · 商業系統架構與雲端部署 |
| P. 08 |
任務 4：ESP32 虛實整合圖文音韌體 |
小智 C++ / Arduino / 事件回呼 |
實體科技 · 智慧硬體工程 · 物聯網虛實整合 |
| P. 09 |
任務 5：A4 印刷裁切卡牌排版系統 |
CSS Print / 3×3 九宮格 / mm |
實體平面設計 · 專業印刷出版 · 桌遊規格 |
| P. 10 |
任務 6：MS TTS 廣東話旁白錄音室 |
Edge TTS / Web Speech / .vtt |
多媒體影音製作 · 商業配音 · 粵語無障礙內容 |
| P. 11 |
第 4 章：課堂評估量規表與 FAQ |
4 階梯 Rubrics / 常見問題 |
教師評估依據 · 課堂除錯疑難排解 |
| P. 12 |
封底：香港 Vibe Coding 創客宣言 |
專案開源授權 · 社群連繫 |
新世代創客宣言 · 開源生態交流 |
💡 學習與評測路徑：由 P.05 前端 Prototype 入門，進階至 P.06 數位產品設計 與 P.07 企業級 Next.js 部署，並跨入 P.08 實體科技 與 P.09 專業印刷！
1. 測試緣起與核心雙重目的
本評測體系立足香港創客教育現場，具有兩大不可替代的核心戰略目的：
🎯 目的 1：學生學習 AIGC 的多元產出與科技效能
• 突破語法死背：
擺脫傳統逐行背誦語法的沉重負擔，專注於運算思維。
• 跨領域多元產出：
1 堂課內橫跨前端原型、數位產品、實體硬體等 6 大領域。
• 專題實戰效能：
大幅縮短專題（PBL）研發週期，倍增學生的科技創造力。
🔬 目的 2：全面檢驗手頭 AI 的 Vibe Coding 實力極限
• 標準壓力基準：
作為業界標準基準測試（Benchmark），檢視 AI 代碼品質。
• 跨模型橫向對比：
即時診斷Cursor、Copilot、Claude、DeepSeek之能力。
• 多向度極限壓力測試：
檢驗 AI 在架構完整度、指標安全、幾何排版與在地化的真實水準。
1.2 評測指標：AI 助手 Vibe Coding 能力診斷向度
| 診斷向度 |
AI 表現不佳特徵 (Fail) |
頂級 AI Vibe Coding 表現 (Pass) |
| 複雜架構理解力 |
搞混 Next.js App Router 與舊 Pages 結構，拋出無效 import。 |
精準遵循 Next.js 14 規範，正確處理 `'use client'` 與版型繼承。 |
| 硬體與物理幾何意識 |
ESP32 代碼產生空指標調用；A4 列印溢出產生第 2 頁空白。 |
主動進行指標安全防護 (`if display != nullptr`)，精確控制 `mm` 尺寸。 |
| 香港在地化支援度 |
廣東話模型代碼寫錯為簡體或國語聲線，繁體字串出現缺字亂碼。 |
正確調用 `zh-HK-HiuMaan` 粵語模型，繁體中文字模編碼無誤。 |
2. 電子版 vs. 實體版 雙軌使用指引
📱 電子互動版 (Web Mode)
• 一鍵複製 Golden Prompt：點擊按鈕直接貼入 VS Code AI 聊天窗。
• 多媒體即時試玩：即時試玩賽博解碼小遊戲與廣東話語音合成。
• 快速目錄導航：透過頂部跳轉選單迅速切換 6 大任務。
📖 實體印刷版 (A4 Booklet Mode)
• 黑客松賽事手冊：A4 雙面列印騎馬釘裝訂，作為賽事標準規格書。
• 隨堂工作紙記錄：學生在各任務驗收方格（☑）即時記錄測試成果。
• 客觀評分規準：搭配末頁 Rubrics 量規進行客觀評量與代碼口試。
2.2 香港中學生 Vibe Coding 四步心法（PACE 法則）
🎯 設計用意 (Intent)
• 核心用意：學習前端設計與快速 Prototype 原型展示。
• 雲端無縫整合：結合 Google Sites 容器做即時發布與免配置快速使用。
💡 汎用性與技術價值
• 單檔案全整合：HTML5 + CSS 變數流體佈局，適配任何 Iframe。
• 動效與多媒體：Canvas 矩陣雨動畫、Web Audio 合成音效與 LocalStorage。
🚀 明確可應用領域
前端設計 · 快速 Prototype 展示 · Google Sites 校園專題成果發表 · 網頁解密小遊戲
▲ Google Sites 前端原型快速嵌入與組件互動架構
你是一位頂級的前端工程師與視覺設計師。請幫我寫一個適合嵌入 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. 語言：繁體中文（香港習慣用語），所有程式碼註解必須為繁體中文。
☑ 基礎及格規準 (Level 1-3)
• 呈現霓虹發光暗黑視覺，在手機與電腦端嵌入無水平橫向溢出。
★ 進階卓越規準 (Level 4-5)
• 駭客解碼遊戲具備計分、倒數與音效；留言板於重整後內容保留。
🎯 設計用意 (Intent)
• 數位產品設計範疇：
突破單一網頁侷限，跨入常駐型瀏覽器數位產品 (Digital Product) 開發。
• 互動設計 (Interaction)：
實現滑鼠即時拖曳、位移向量計算、視窗碰撞邊界保護與平滑吸附。
• 體驗設計 (UX Design)：
無縫融入日常瀏覽，提供最小化懸浮球與不遮擋網頁內容之防呆機制。
• 陪伴設計 (Companion)：
動態心情表情切換與對話氣泡，建立情感連結與學習陪伴感。
💡 汎用性與技術價值
• Manifest V3 底層生命週期：
掌握現代 Chrome Extension 標準、腳本權限與宣告規範。
• DOM 樣式與環境隔離：
使用獨立 CSS Class 避免與宿主網頁既有樣式產生衝突污染。
🚀 明確可應用領域
數位產品設計 · 互動與體驗設計 · 桌面陪伴桌寵 · 專注番茄鐘學習輔助工具
▲ 數位產品架構：Content Script 注入與拖曳座標演算法
請設計一個符合 Chrome Extension Manifest V3 標準的「賽博桌面伴侶（Cyber Pet Companion）」擴充功能：
【架構規範】
1. manifest.json 必須使用 Manifest V3，包含 content_scripts 自動注入至所有網頁。
2. 懸浮視窗功能：
- 注入一個可自由拖曳（Drag & Drop）的圓形/卡片桌寵助手到網頁右下角。
- 滑鼠按住頂部即可平滑拖曳，且具備邊界碰撞偵測（不可拖出視窗外）。
- 點擊伴侶可切換表情（開心、思考、驚訝、待機），並彈出懸浮對話氣泡。
- 內建折疊式快捷小工具：蕃茄鐘計時器、快速網頁螢光筆、網頁字數統計。
- 具備最小化縮小為螢幕邊緣懸浮球功能。
3. 樣式獨立：使用獨立 CSS Class 避免與宿主網頁 CSS 衝突。
4. 註解規範：全中文繁體註解。
☑ 基礎及格規準 (Level 1-3)
• 成功於 `chrome://extensions/` 載入擴充套件無報錯。
• 滑鼠能順利拖動伴侶懸浮窗至頁面任意處。
★ 進階卓越規準 (Level 4-5)
• 具備視窗邊界限制（離螢幕邊緣至少 10px 不溢出）。
• 番茄鐘計時器正常倒數並於結束時觸發提醒。
🎯 設計用意 (Intent)
• 企業級標準：掌握企業級別網頁設計與商業級系統架構。
• 邊緣雲端部署：接軌現代軟體工業，透過 Vercel Edge CDN 實現全球極速上線。
💡 汎用性與技術價值
• React 元件模組化：共用 `Navbar`、`Footer` 版型與狀態管理。
• Next.js 14 App Router：檔案路由、受控表單即時驗證與 Serverless 相容。
🚀 明確可應用領域
企業級網頁設計 · 商業系統架構 · 雲端 SaaS 平台原型 · 學校與社團官方入口網站
▲ 企業級架構：Next.js App Router 與 Vercel 邊緣發佈管線
請使用 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。
- 繁體中文在地化內容與中文註解。
☑ 基礎及格規準 (Level 1-3)
• 本地執行 `npm run dev` 正常啟動，首頁、介紹與聯絡頁路由無報錯。
★ 進階卓越規準 (Level 4-5)
• 成功於 Vercel 構建並生成正式 HTTPS 網址，表單具備完整反饋。
🎯 設計用意 (Intent)
• 實體科技深度關聯：打通代碼與智慧硬體工程 (Smart Hardware) 的虛實藩籬。
• 5 分鐘極速閉環：聚焦「動態表情、繁體文字、提示音效」三大最直觀的回饋。
💡 汎用性與技術價值
• 事件驅動架構：掌握小智 ESP32 `NetworkEvent::Connected` 回呼。
• C++ 指標防護：物件指標呼叫（`GetDisplay()` / `Alert()`）防空值崩潰。
🚀 明確可應用領域
實體科技 · 智慧物聯網硬體 · 校園智慧廣播盒子 · 桌面互動語音機器人
▲ 實體科技：ESP32 事件回呼與「圖、文、音」硬體驅動流程
請根據 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 示範代碼。
☑ 基礎及格規準 (Level 1-3)
• C++ 代碼通過編譯，正確獲取 Display 介面指標無崩潰。
• 螢幕能顯示 happy 表情或基本圖形。
★ 進階卓越規準 (Level 4-5)
• 螢幕清晰渲染繁體中文 "Hello Hong Kong! 系統就緒" 無缺字。
• 蜂鳴器或 DAC 喇叭發出清脆提示音。
🎯 設計用意 (Intent)
• 專業印刷出版：直接關聯平面設計 (Graphic Design) 與實體印刷輸出規範。
• 解決跑版痛點：消除網頁轉 PDF 常見的「多出第 2 頁空白」與尺寸失真問題。
💡 汎用性與技術價值
• 物理毫米單位：掌握 CSS `mm`/`pt` 單位與 `@page { size: A4 portrait; }`。
• 工業裁切標記：3×3 九宮格（單卡 63×88mm）、0.5pt 裁切虛線與出血位。
🚀 明確可應用領域
平面設計 · 專業印刷出版 · STEAM 創客桌遊實體卡牌 · 專案成果發表卡
▲ 專業印刷出版：A4 3×3 九宮格排版藍圖與裁切十字標記
請設計一個專門用於輸出為標準 A4 PDF 的「香港學生 STEAM 創客桌遊卡牌排版系統」HTML 網頁：
【印刷與排版要求】
1. A4 精確規格：
- 頁面設定 `@page { size: A4 portrait; margin: 0; }`。
- 單張 A4 紙排版 3 欄 × 3 列共 9 張標準卡牌（每張卡牌尺寸 63mm × 88mm 標準撲克牌比例）。
2. 裁剪輔助線（Cutting Guides）：
- 包含四角裁切十字線與邊框 0.5pt 淺灰虛線，方便學生使用剪刀或切紙刀裁切。
- 安全邊距與 2mm 印刷出血位。
3. 卡牌內容設計：
- 卡牌主題：香港 AI 創客角色卡（如「代碼架構師」、「硬體極客」、「提示詞大師」）。
- 包含屬性數值、技能描述、稀有度徽章與專屬卡牌編號。
4. 網頁互動功能：
- 包含「一鍵預覽 A4 印刷樣式」與「匯出 / 列印為 PDF」按鈕。
☑ 基礎及格規準 (Level 1-3)
• 列印預覽剛好生成 1 頁 A4，絕無第 2 頁空白。
• 9 張卡牌整齊居中排列。
★ 進階卓越規準 (Level 4-5)
• 卡牌邊框具備清晰 0.5pt 裁切虛線，方便剪刀加工。
• 勾選「背景圖形」後色彩漸層與數值欄列印無失真。
🎯 設計用意 (Intent)
• 多媒體在地賦能：聚焦多媒體影音製作 (Multimedia) 與香港粵語數位廣播。
• 無障礙科技實踐：結合音訊合成與時間軸字幕，落實數位無障礙（Accessibility）。
💡 汎用性與技術價值
• 神經網路語音模型：精準匹配 `zh-HK-HiuMaan` (曉曼) / `WanLung` (雲龍)。
• 字幕串流與視覺化：逐句字幕高亮跟讀、動態音波動畫與 Python 批次 `.vtt` 導出。
🚀 明確可應用領域
多媒體影音製作 · YouTube 粵語旁白配音 · 校園數位有聲書 · 多語言導覽教材
▲ 多媒體影音：微軟神經網路語音合成與字幕串流管線
請設計一個基於 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）。
☑ 基礎及格規準 (Level 1-3)
• 成功使用廣東話朗讀繁體中文文稿，語音自然流暢。
• 語速與音調滑桿調節有效。
★ 進階卓越規準 (Level 4-5)
• 朗讀時字幕能逐句即時高亮同步跳動。
• 包含 Python 腳本支援音訊與 `.vtt` 字幕一鍵批次匯出。
CREATIVE INTELLIGENCE LAB // THE FUTURE OF CODING
香港中學 Vibe Coding
新世代創客宣言
💡 典範轉移：從語法死記到架構創新
我們相信，AI 不會取代人類，但善用 AI 的香港中學生將引領未來的科技創新。程式語言只是實現創意的媒介，真正的核心在於洞察真實世界問題的敏銳度、拆解系統架構的運算思維，以及精益求精的工匠精神。
🤝 校際合作與教師研習
歡迎全港中學 STEAM / ICT 學科教師申請克里艾提夫研究所入校工作坊與開源教材套件授權。
🌐 開源專案與代碼儲存庫
本手冊 6 大專案全套代碼由克里艾提夫研究所維護，支援 GitHub 與 Vercel 快速分叉。
克里艾提夫研究所 (Creative Intelligence Lab)
Hong Kong Secondary Education AIGC & Vibe Coding Benchmark Laboratory
VERSION 1.2.0 (2026 EDITION)
12 PAGES A4 COMPLETE EDITION