元件預覽跟隨全域主題（右上角切換暗灰／米白）；StudentMode HTML 沿用相同 tokens。

文字

HighlightText

準備好了嗎？讓我們開始！

標題層級 h1 / h2 / h3 + 內文

h1 主標題（2rem / 700）

h2 副標題（1.6rem / 700）

h3 小節標題（1.3rem / 700）

內文段落 p（1.2rem）。標題層級必須大於內文，否則視覺反比。

按鈕 & 標籤

AnimatedLink

點擊前往 Color Hunt 點擊前往 Google Fonts

InfoBadge

SmallMediumLarge

列表

BulletList (numbered)

1.第一個重點說明

2.第二個重點說明

3.第三個重點說明

BulletList (default)

•內容創作：使用引號技巧精修文案

•AI 協作原則：大膽刪除不需要的內容

卡片 Grid

CardGrid (2 欄)

前端

HTML、CSS、JavaScript

後端

資料庫、API、伺服器

CardGrid (3 欄)

1

完全沒用過

2

偶爾使用

3

每天都用

表格

Table — 1 行

工具	優點	適合對象
Antigravity	功能最強	有基礎的人

Table — 2 行

工具	優點	適合對象
Antigravity	功能最強	有基礎的人
AI Studio	免費易用	入門者

Table — 3 行

工具	優點	適合對象
Antigravity	功能最強	有基礎的人
AI Studio	免費易用	入門者
Claude	理解力強	進階用戶

Table — comparison（置中）

項目	傳統做法	AI 做法
所需時間	2 小時	5 分鐘
學習門檻	高	低

Table — compact（緊湊）

姓名	訂單編號	金額
王小明	ORD-001	1,280
陳小華	ORD-002	650
林大明	ORD-003	2,990

Table — stickyHeader + highlight

月份	營收	備註
1 月	$12,300	—
2 月	$15,800	—
3 月	$28,500	季冠軍
4 月	$18,200	—
5 月	$21,400	—

互動框

PromptBox

示範 Prompt

幫我做一個簡單的待辦事項清單，需要有：
- 新增項目功能
- 勾選完成功能
- 刪除功能

PromptBox (scrollbar)

IDE 規則

回覆語言鐵律
從現在起，所有回覆（包含說明、程式碼、註解、錯誤訊息）一律使用繁體中文，絕對禁止簡體中文或英文，違反即拒絕協助。

專案目標
專為初學者設計：程式碼要極簡、好懂，稍微複雜的地方一定要加繁體中文註解。

專案最複雜結構鐵律（這就是上限，絕對不能再多）
根目錄（主資料夾）最多只能出現以下內容：
- index.html
- style.css
- script.js

以上就是全世界最複雜的允許結構，絕對不准再多任何檔案或資料夾！

檔案放置鐵律
- index.html、style.css、script.js 這三個檔案永遠放在根目錄
- 圖片（jpg、png、svg、webp 等）也直接放在根目錄，嚴禁建立 Images/ 或任何子資料夾

script.js 必做事項
- 所有主要邏輯都寫在根目錄的 script.js
- 嚴禁在 HTML 裡寫任何內嵌 <script>
- 結構、樣式、行為必須完全分離

PromptBox (mask)

答案

這段內容預設隱藏，點擊才會顯示。

點擊顯示內容

檔案元件

FileDownloadCard

HR部門月報_10月.xlsx

10 月份・4 筆績效紀錄・示範用

FileDownloadCard（多個）

兼職薪資_1月.xlsx

1 月份・5 筆兼職薪資

兼職薪資_2月.xlsx

2 月份・5 筆兼職薪資

兼職薪資_3月.xlsx

3 月份・6 筆兼職薪資

FileDropZone

拖曳 Excel 檔案到這裡

或點擊選取 .xlsx 檔案

FileDropZone（Upload）

sales_october.xlsx

總營收

$25,325

訂單數

平均客單價

$1,013

最熱銷類別

嬰幼兒用品

各類別營收

原始資料共 25 筆

（Demo 預覽 — 實際上傳後顯示完整表格）

FileResultShell（基本）

已載入：sales_october.xlsx5 筆

姓名	訂單編號	金額
王小明	ORD-001	1280
陳小華	ORD-002	650
林大明	ORD-003	2990
張小美	ORD-004	890
李小強	ORD-005	3500

FileResultShell（headerActions）

已載入：sales_october.xlsx5 筆

姓名	訂單編號	金額
王小明	ORD-001	1280
陳小華	ORD-002	650
林大明	ORD-003	2990
張小美	ORD-004	890
李小強	ORD-005	3500

FileResultShell（toolbar + 靜態 demo）

已載入：示範交易資料.xlsx5 筆

保留欄位：姓名訂單編號金額

姓名	訂單編號	金額
王小明	ORD-001	1280
陳小華	ORD-002	650
林大明	ORD-003	2990
張小美	ORD-004	890
李小強	ORD-005	3500

大元件

具備完整互動功能的大型複合元件。在 Slide 模式中使用時，需確保元件所在的 section 可接收點擊事件。

FileDropZone

Excel 上傳分析（見上方「檔案元件」實際示範）

TocHeader

課程頁頂部導覽

SlideNavInjector

簡報導航注入

複合元件

ClassIntro

上午場	項目名稱
單元 0	環境設定
單元 1	官網 (上)：內容、設計
單元 2	部署上線：Zeabur
單元 3	官網 (下)：SEO、資安
單元 4	儀表板 Dashboard
單元 5	開發環境設定

下午場	項目名稱
單元 6	串接資料庫 Supabase
單元 7	庫存系統與會員驗證
單元 8	回顧與啟發
單元 9	個人產品開發

GameShowcase

得分測驗

1 / 3

168 斷食的「16」代表什麼？

睡眠測驗

1 / 4

你每天晚上能在固定時間入睡嗎？

導航元件（僅 Slide Mode）

ChapterNavigation

PageShow

0-1