怎麼把 AI 輸出改成 HTML

把 AI 生成內容的預設輸出格式改成 HTML，能讓結構更穩定，也更容易清理與渲染。

這篇給開發者、提示工程師和產品團隊看。你照做完，會得到一套 HTML-first 的輸出流程，包含提示詞規格、回傳格式、清理步驟與前端顯示方式。

這套做法受到 Anthropic 文件與 Claude Code 團隊對 HTML 作為預設格式的討論啟發。可先看 Anthropic docs 與 Anthropic GitHub org。

開始之前

• 一個可用的 Anthropic 帳號與 API 存取權
• Claude 或 Claude Code 的 API key
• Node 20+ 或 Python 3.11+
• 本機專案內已有 prompt 檔或 agent 設定檔
• 可用的 HTML sanitizer 或 parser，例如 DOMPurify、Beautiful Soup
• 可安全顯示 HTML 的 renderer 或 UI 層

Step 1: 定義 HTML 輸出合約

目的：先把模型能輸出的標籤範圍固定下來，避免它自由發揮成混亂的文字或混入不需要的格式。你要把允許的元素寫進 system prompt 或 agent 指令，讓模型知道輸出只能是 HTML。

You are a content generator. Output valid HTML only. Use these tags only: h2, p, ul, li, strong, em, code, pre, a. Do not wrap the result in Markdown fences.

驗收：你應該看到模型直接回傳原始 HTML，第一個字元就是標籤，不會先出現 Markdown 項目符號、三個反引號，或任何開場說明。

Step 2: 重寫提示詞結構

目的：把「格式好看」這種模糊要求，改成「文件要有哪些區塊」這種可執行要求。你要明確指定段落順序、標題層級、清單形式，以及連結與程式碼的寫法。

Return HTML with this structure: one intro paragraph, then an h2 for each major section, then paragraphs and lists under each section. Put links in anchor tags with href. Put code in pre/code blocks.

驗收：你應該看到多次執行後的區塊順序一致，段落位置穩定，連結與程式碼也會固定出現在指定位置。

Step 3: 加入 HTML 清理器

目的：在渲染前先擋掉危險或破損的標記，避免模型輸出直接進到瀏覽器。你要先解析內容，再移除不允許的標籤與屬性，最後才交給 UI 層顯示。

// Example in Node.js with a sanitizer pipeline
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(modelHtml, { USE_PROFILES: { html: true } });

驗收：你應該看到最終 HTML 只剩允許的標籤，script、inline event handler、非法屬性都會被清掉。

Step 4: 建立 Markdown 相容備援

目的：保留 HTML 作為來源格式，但讓不支援 HTML 的工具也能使用內容。你要在邊緣層做轉換，而不是回到 prompt 裡要求模型同時產生兩種格式。

// Pseudocode
if (clientSupportsHtml) {
  renderHtml(cleanHtml);
} else {
  renderMarkdown(htmlToMarkdown(cleanHtml));
}

驗收：你應該看到同一份內容能在 HTML 客戶端與 Markdown-only 客戶端中正常顯示，而且標題、清單與連結都還保有原意。

Step 5: 比對多次輸出一致性

目的：確認 HTML 是否真的讓你的用例更穩定。你要用相同輸入跑多次，重點比較標籤結構、區塊順序與連結位置，而不是只看文字有沒有變化。

Run 10 prompts with the same input and compare:
- number of headings
- allowed tag usage
- link placement
- presence of invalid markup

驗收：你應該看到 tag pattern 比 Markdown 更穩定，格式驚喜更少，後處理成本也更低。

常見錯誤

• 讓模型自己發明標籤。修法：先給 allowlist，再把不在清單內的元素全部拒收。
• 未清理就直接渲染原始 HTML。修法：在伺服器或可信任客戶端先做 sanitize，再顯示。
• 在 HTML prompt 裡混入 Markdown 規則。修法：讓模型只輸出一種來源格式，轉換邏輯放到 prompt 外。

接下來可以看什麼

當 HTML-first 流程穩定後，可以再往提示詞模板化、schema 驗證與 agent 工具延伸，讓模型直接產出更複雜但仍可控的文件與 UI-ready 內容。