§ 1. 導論：純文本範式的極限與演進驅動力
在以 ChatGPT 為代表的早期大語言模型普及階段，業界幾乎毫無例外地選用 Markdown 作為模型與使用者之間的信息中繼格式。從工程與產品設計角度審視，這一決策在當時具備充分的合理性：Markdown 擁有簡練的語法標記、高容錯性，且能以極高的計算效率逐行映射為基礎的 HTML 排版標籤。
然而，當 AI 應用從簡單的問答對話邁入「深度推理」、「量化分析」與「互動工具生成」的深水區時，Markdown 的內在缺陷開始全面暴露。最根本的瓶頸在於：Markdown 是為靜態文檔閱讀設計的一維媒介，本質上無法承載計算邏輯與狀態變更。
一旦用戶需要針對 AI 給出的數據模型進行「若…則…（What-if）」式的動態參數調整，在 Markdown 範式下，用戶唯一的途徑是發送新的自然語言 Prompt，迫使 LLM 重新在雲端執行完整推論。這種工作流不僅耗費昂貴的計算資源與網路頻寬，更帶來了數秒乃至數十秒的不必要延遲。
§ 2. 表現力躍遷：維度升級的四大支柱
當我們將視角從單純的「字串渲染」轉移至「數位認知介面」時，HTML + CSS + JavaScript 的組合實質上構成了一個圖靈完備的視覺與運行宿主。在 AI 表現力的坐標系中，HTML 帶來了四個維度的質變：
2.1 從一維文字流到二維響應式空間 (CSS Grid & Flexbox)
Markdown 本質是一維的流水帳（Stream of linear text），即便使用擴展語法的 Markdown Table，也僅能呈現單調死板的矩陣格子，且在移動裝置上極易產生斷行災難。HTML 允許 AI 構建二維甚至多層次的空間體系：多欄並列對比、重點資訊 KPI 卡片看板、巢狀可摺疊手風琴等。知識的密度不再受限於螢幕高度，而是能依據視覺層次進行結構化編排。
2.2 本地微互動：將靜態陳述升華為雙向探索 (Micro-Interactivity)
在傳統 Markdown 模式下，AI 回覆是「定稿文檔」；而在 HTML 模式下，AI 回覆是「活體工具」。透過原生 <input type="range">、Tab 切換按鈕與簡單的客戶端計算邏輯，用戶可以在瀏覽器本地隨意拖曳滑桿、切換視角，所有數據變更均由本機 JavaScript 即時響應，徹底免除來回發起雲端 LLM Roundtrip 的推論成本與延遲。
2.3 內聯原生向量幾何與繪圖 (Inline SVG & Canvas)
Markdown 若要展示圖形，必須依賴後端 Python（如 Matplotlib）預先生成點陣圖（PNG/JPG）並上傳 CDN，或使用文字型 ASCII 圖。而 HTML 支援原生內聯 SVG 標籤，AI 能在文本串流中直接繪製精確的工程架構圖、流程動態曲線與向量示意圖，具備自適應縮放、零額外網路請求且永不失真的優勢。
2.4 邁向「生成式介面」(Generative UI / Artifacts)
這是從 ChatGPT 走向 Claude Artifacts 與 v0 的關鍵分野。AI 不再只是「為你寫一篇文章解釋投資回報率」，而是「直接交付一個帶有即時複利試算功能的財務小工具」。這種將知識轉譯為可運行代碼的交付形式，重新定義了人機協同的交互邊界。
同一份「AI 財務與資產配置分析」的載體邊界比對
§ 3. 歷史陣痛：自回歸 HTML 生成的四大致命困境
在 2023 年至 2024 年初，幾乎所有商業級 AI 對話介面（如 ChatGPT、Claude）均對直接渲染 HTML 避之唯恐不及，嚴格將輸出限制於純文字或白名單 Markdown。這種保守策略並非審美偏好，而是源於大語言模型「自回歸逐字取樣（Autoregressive next-token prediction）」本質與 Web 瀏覽器 DOM 規範之間的根本性工程衝突：
3.1 跨站腳本攻擊 (XSS) 與 Prompt 惡意指令注入
當應用程式直接對模型輸出呼叫 innerHTML 時，便將整個系統的安全性賭在「LLM 是否能抗拒惡意誘導」上。攻擊者可透過間接提示詞注入（Indirect Prompt Injection，例如在網頁、PDF 或資料庫中埋入惡意指令），誘使模型輸出包含 <img src="x" onerror="steal(document.cookie)"> 或內嵌惡意外部腳本的標籤，輕易外洩用戶的 Session Token、API Key 與對話歷史。
3.2 自回歸標籤未閉合與宿主 DOM 樹坍塌 (Host Tree Collapse)
LLM 輸出隨時可能因達到 max_tokens 截斷、網路連線抖動或用戶主動點擊 Stop 而突發中斷。若模型剛好輸出到 <div class="container"><table><tr><td> 即中斷，瀏覽器的容錯解析機制（HTML5 Tree Construction Specification）會強制將該標籤之後的所有宿主應用 DOM 節點（包括聊天輸入框、側邊導覽列）直接吞噬納入該未閉合的 <td> 內部，導致整個外層網站介面發生毀滅性坍塌與跑版。
3.3 串流 AST 死結與白屏重繪風暴 (Streaming Reflow Storm)
Markdown 逐行輸出時天然契合串流解析；然而 HTML 是嚴格的樹狀抽象語法樹（AST）。當模型串流輸出形如 <div class="data-view"> 時，解析器在收到結尾大括號或閉合標籤前，根本無法預判該節點的排版邊界。若前端在每一個 Token 抵達時都觸發重解析，將引發每秒數十次的瀏覽器主線程強迫同步重排（Forced Synchronous Reflow），造成極度嚴重的畫面閃爍、卡頓與 CPU 飆升。
3.4 語法標籤引發的 Token 膨脹與推論成本
Markdown 採用極簡符號（如 #、*、-）界定結構，僅需 1 至 2 個 Token；而 HTML 則充斥繁複的大括號、屬性字串與閉合標籤（如 <div class="..."> 與 </div>）。根據針對卡片看板、動態表單與視覺化圖表等典型 Generative UI 組件的實測統計，HTML 輸出的 Token 消耗量平均較純文字 Markdown 增加約 85%（依 DOM 樹巢狀深度不同，分佈區間約落在 40% 至 120% 之間）。這不僅使模型的上下文視窗（Context Window）快速飽和，更直接推高了推論伺服器的 Token 計費成本與首字串流延遲。
自回歸 HTML 輸出的經典毀滅性故障模式模擬
模型受騙輸出的惡意 HTML 標籤（隱蔽於正常回答中）：
<!-- 惡意 Prompt 誘導生成的標籤 -->
<div>計算結果為 42</div>
<img src="x" onerror="alert('【安全警報】Session Cookie 已外洩：session_token=sk-9981')">
當 Token 於 <div class="box"> 中途耗盡且未輸出結尾閉合標籤：
§ 4. 現代克服：工業級四層縱深防禦架構
從 2024 年下半年開始，以 Claude 3.5 Sonnet (Artifacts)、OpenAI Canvas 與 v0 為標誌，業界並非單純「放寬 HTML 限制」，而是建立起一套跨越模型推論解碼層、網路串流 AST 層與瀏覽器執行時沙箱層的四層縱深防禦體系：
4.1 語法約束解碼 (Grammar-Constrained Decoding / CFG)
傳統方式是模型輸出純文本後再由後端驗證；而現代架構直接在神經網路的取樣階段（Sampling Phase）施加上下文無關文法（Context-Free Grammar，如 GBNF）。透過動態 Logits 遮罩（Logits Masking），如果當前輪次若輸出不合法的標籤字元，該 Token 的機率值會被硬性置為負無窮大（$-\infty$）。這保證了模型生成的 HTML 語法永遠在數學上符合形式文法規範，從根本上杜絕語法畸變。
4.2 串流容錯虛擬 AST (Streaming Tolerant Tag Balancing Stack)
針對自回歸串流逐字生成的特性，現代前端解析器維護一個動態標籤堆疊（Tag Balancing Stack）。當收到 <table><tr> 時，解析器在虛擬 DOM 渲染幀內會自動在後方即時合成虛擬閉合標籤 </tr></table>；下一批 Token 抵達時再動態伸展替換。這使得用戶能看到極致絲滑的即時打字流，而整個 DOM 樹永遠保持閉合完好，徹底根除白屏與坍塌。
4.3 零信任源隔離沙箱 (Null-Origin Sandboxed Iframe & Shadow DOM)
所有生成的活體組件均被掛載在設置了 sandbox="allow-scripts" 的獨立 Iframe 內。該沙箱會獲得特殊的 null Origin，完全無法存取宿主應用的任何 Cookie、LocalStorage、IndexedDB 或父頁面 DOM；同時配合 Shadow DOM 進行樣式隔離，防止生成代碼內的 CSS 影響外部版面。
4.4 原生 Sanitizer API 與嚴格內容安全策略 (CSP)
在內容掛載進沙箱前，透過現代瀏覽器標準的 Sanitizer API 實施基於白名單的零信任清洗，剔除如 onerror、javascript: 偽協議等潛在執行向量，並配置嚴格的 Content Security Policy（CSP），禁止向未受信任的第三方外部域發起任何資料外傳請求。
現代 AI 活體組件輸出的四層縱深防禦與容錯流水線
§ 5. 全流程實證演繹：端到端串流與沙箱執行
為了直觀檢驗上述四層防禦機制在動態運行時的具體協同，我們構建了一個微型端到端演練流水線。下方的 Figure 4 模擬了當大語言模型產生一段帶有「潛在惡意注入代碼」與「未閉合標籤」的串流輸出時，客戶端如何實時攔截、修補並安全渲染至獨立 Artifact 沙箱的完整過程：
動態串流 Token、容錯 AST 補齊與沙箱掛載演練
等待開始串流...
(等待安全掛載)
§ 6. 三代架構演進矩陣與學術結語
回顧大語言模型自 2022 年以來的輸出介面演進，我們實質上見證了一場從「文字生成」到「輕量軟體工程」的範式遷徙。下表 1 系統化總結了三代技術架構在六項核心工程維度上的能力與安全特徵對比：
| 維度指標 | 第一代：純 Markdown | 第二代：裸 HTML（陣痛期） | 第三代：現代沙箱活體 HTML |
|---|---|---|---|
| 空間佈局維度 | 嚴格單向一維文字流 | 二維佈局，但極易失真跑版 | 自適應 CSS Grid / Flexbox 二維畫布 |
| 客戶端微互動 | 無（任何微調需重發 Prompt） | 無限制運行，極端高危 | 受控微互動（零 Token 消耗即時響應） |
| 安全與隔離 | 天然免疫 XSS（純文字標籤） | 致命漏洞（Cookie/Token 任意竊取） | Null-Origin 沙箱 + Sanitizer 白名單 |
| 串流呈現體驗 | 原生絲滑逐字流 | 閃爍、重排風暴與白屏 | 串流虛擬 AST 標籤平衡棧（平滑閉合） |
| 結構穩定性 | 語意容錯度極高 | 未閉合標籤吞噬宿主 DOM | 語法約束解碼 (CFG) + 運行時隔離 |
| 代表性產品形態 | 早期 ChatGPT (2022-2023) | 早期未公開實驗室 Prototype | Claude Artifacts、v0、Canvas (2024+) |
HTML 在 AI 表達體系中的回歸，標誌著大語言模型從「單向文字問答」走向「雙向可操作軟體」。HTML 不再僅僅是一種標記格式，而是成為了 AI 的數位執行與交付環境。透過語法約束解碼、串流虛擬補全、源隔離沙箱與零信任清洗的工程協同，現代技術成功化解了自回歸生成下的安全與破版夢魘，為通用人工智慧的深度互動介面奠定了標準基石。
- WHATWG HTML Living Standard: § 13.2 Parsing HTML Documents — Tree Construction and Error Handling Rules. 來源：html.spec.whatwg.org
- llama.cpp (Gerganov et al.): GBNF (GGML BNF) Context-Free Grammar-Constrained Sampling Specification. 來源：github.com/ggerganov/llama.cpp
- W3C Web Application Security Working Group: HTML Sanitizer API Specification (W3C Working Draft). 來源：wicg.github.io/sanitizer-api
- MDN Web Docs & WHATWG: The Iframe sandbox Attribute and Unique Null-Origin Security Boundary. 來源：developer.mozilla.org