AI 技術債的真正解法：不是少用 AI，是限制 AI 的責任範圍
TL;DR
我們的 AI 網站生成器 UltraSite 原本讓 Gemini 從零生成完整 HTML（400-700 行）。品質靠運氣。有時候漂亮到不行，有時候版面炸裂。
讀完一篇關於 AI 技術債的文章後，我們不是「少用 AI」，而是重新劃分了責任：
- AI 負責：內容策略（標語、關於頁文案、部落格標題、配色判斷）
- 人類負責：HTML 結構、CSS 動畫、視覺品質
結果：Token 消耗降 5-10 倍，速度快 3-4 倍，品質從隨機變穩定。
觸發點：一篇讓我們停下來反思的文章
Dev.to 上 Harsh 的文章提出了三種 AI 技術債：
- 認知債（Cognitive Debt）— 開發者用 AI 生 code，但不理解為什麼這樣寫
- 驗證債（Verification Debt）— 測試通過 ≠ 真的沒問題，green CI 製造假自信
- 架構債（Architectural Debt）— AI 傾向重複而非抽象，到處是同一邏輯的微差版本
他舉了一個開發者的話：
「我以前是工匠，現在我覺得自己是 IKEA 的工廠經理。」
文中幾個數據讓我很有感：
- AI 寫了 2026 年 41% 的商業新程式碼
- 有經驗的開發者用 AI 反而生產力下降 19%
- Fortune 50 企業半年內安全漏洞增加 10 倍
我讀完後的第一反應不是「我們也有這個問題」，而是「我們三天前剛修完這個問題」。
UltraSite v1：一個 AI 技術債的活教材
UltraSite 是我們的產品之一 — 貼上 Threads 連結，30 秒生成個人網站。
v1 的架構是這樣的：
使用者貼 Threads URL
↓
Jina Reader 抓取 markdown
↓
367 行 mega prompt 送進 Gemini
↓
Gemini 吐出 400-700 行完整 HTML
↓
後處理：注入 GSAP 動畫 JS
↓
顯示在 iframe 裡
那個 367 行的 prompt 指定了所有東西：
- Tailwind CSS CDN 設定
- GSAP + Lenis + ScrollTrigger 動畫系統
- Glassmorphism 卡片效果
- 視差球體（parallax orbs）
- 自訂游標（custom cursor）
- SVG 噪點紋理
- 5 個頁面區塊的完整結構
- 字體排版規則
- 配色邏輯
每次生成，Gemini 要重新發明輪子 — 重新寫一模一樣的 CSS、重新組裝一模一樣的 HTML 結構、重新決定一模一樣的字體設定。
這完美符合 Harsh 說的三種技術債
認知債：生成出來的 HTML 我們自己也不一定看得懂 Gemini 為什麼做了某些決定。為什麼這個 orb 放在右上角而不是左下角？為什麼用了 text-7xl 而不是 text-8xl？答案是：因為 LLM 是隨機的。
驗證債：網站在 iframe 裡看起來不錯？就 ship 了。但 responsive 有測過嗎？動畫有跑嗎？色彩對比度夠嗎？每次都是一場賭博。
架構債：367 行 prompt 本身就是一坨技術債。每次要改 prompt，都要在 300 行文字中找到正確的位置。而且 Gemini 經常無視其中的一半規則。
頓悟：AI 的問題不是「太多」，是「放錯位置」
Harsh 的文章建議「把 AI 當成聰明的初階工程師」。我們更進一步：
AI 應該做它真正擅長的事，其他的別碰。
AI（LLM）真正擅長什麼？
- ✅ 理解語境和語氣
- ✅ 從大量文字中提取核心觀點
- ✅ 決定品牌定位和文案策略
- ✅ 判斷一個人的「感覺」該用什麼配色
AI 不擅長什麼？
- ❌ 產出一致的 HTML 結構
- ❌ 正確使用 Tailwind CSS class name（經常編造不存在的 class）
- ❌ 維持視覺品質的一致性
- ❌ 每次都記住 367 行指令中的每一條規則
所以答案很明確：把 HTML/CSS 從 AI 的責任中拿走。
UltraSite v2：模板 + JSON 架構
新架構：
使用者貼 Threads URL + 選擇模板風格
↓
Jina Reader 抓取 markdown（不變）
↓
80 行 prompt 送進 Gemini
↓
Gemini 吐出 ~50 行 JSON（純內容，不含 HTML）
↓
模板引擎：JSON + 手工模板 → 完整 HTML
↓
後處理：注入動畫 JS（不變）
↓
使用者可即時切換模板（不需重新呼叫 AI）
Gemini 現在只輸出這個：
{
"roleLabel": "創辦人",
"tagline": ["深度", "洞察", "實踐家"],
"subtitle": "從金融到遊戲，從思考到行動",
"aboutHeading": "有些人嘴巴比手腳積極，藉口永遠比答案多。",
"aboutParagraphs": ["...", "..."],
"identityCards": [
{ "emoji": "📈", "title": "87 金融人", "description": "..." }
],
"blogArticles": [
{ "title": "洛聖都夜景與人生", "content": "...", "expanded": "..." }
],
"connectHeading": "公域看觀點，私域聊真的。",
"colorTheme": "violet"
}
不含任何 HTML。 AI 只做內容決策，不碰結構。
模板由人類打造
我們手工做了三套 HTML 模板，每一套都經過：
- 完整 responsive 測試
- GSAP 動畫 class 正確掛載
- 色彩系統與 CSS 變數正確連接
- 所有 edge case 處理（沒有頭像？用漸層圓 + 首字縮寫）
| 模板 | 風格 | 特色 |
|---|---|---|
| 午夜玻璃 | Glassmorphism | 毛玻璃卡片、視差球體、紫色漸層 |
| 霓虹終端 | 駭客風 | 純黑底、掃描線紋理、monospace、硬邊框 |
| 柔性粗獷 | 編輯排版 | 超大字、厚色邊框、offset shadow |
三套模板共用同一個動畫系統（GSAP + Lenis），差別只在視覺風格。
數字說話
| 指標 | v1 (mega prompt) | v2 (模板 + JSON) |
|---|---|---|
| Prompt 長度 | 367 行 | ~80 行 |
| Gemini output | 8,000-15,000 tokens | 800-1,500 tokens |
| 生成時間（Gemini 部分） | 4-8 秒 | 1-2 秒 |
| HTML 品質一致性 | 隨機 | 穩定 |
| Vercel timeout 風險 | 高（10s 限制） | 安全 |
| 可切換模板 | ❌ 重新生成 | ✅ 即時切換 |
| 新增 Vercel function | — | +0（維持 11/12） |
Token 消耗降了 5-10 倍。這不只是省錢 — 是讓整個系統變得可預測。
這個模式可以推廣
我們學到的原則：
1. AI 做決策，系統做執行
讓 AI 回答「這個人的品牌定位是什麼？」而不是「幫我寫一個有品牌定位的網站」。
前者是 AI 的強項。後者是在要求 AI 同時做策略師、設計師、前端工程師 — 然後對三個角色的品質都沒有保證。
2. 結構化輸出 > 自由文本
responseMimeType: 'application/json' 是我們用過最有效的 Gemini 設定之一。
強制 JSON 輸出意味著：
- 不會收到「以下是我為您生成的 HTML：」這種廢話
- 每個欄位都可以驗證和設 fallback
- 輸出格式 100% 可預測
3. 手工打造不可替代的部分
模板是 UltraSite 的「護城河」。任何人都可以叫 Gemini 生網站，但不是任何人都能手工打造有 GSAP 視差動畫、毛玻璃效果、自訂游標的暗色主題模板。
AI 生成的部分（文案）是可替代的。人類打造的部分（模板）是不可替代的。
4. 讓使用者感受到控制權
v1 是一個黑盒子 — 放進 URL，吐出結果，不喜歡就重新生成。
v2 讓使用者選擇模板、看到品牌分析、可以切換風格。同樣的 AI 輸出，使用者覺得自己有參與感。
回應 Harsh 的建議
Harsh 說要「把 AI 當聰明的初階工程師」。我覺得更精確的說法是：
把 AI 當成一個品味極好但手藝不穩定的創意總監。
你讓他決定方向 — 品牌定位、文案語氣、色彩策略。但你不會讓他自己寫 production code。你有專門的系統（模板引擎）來把他的想法變成可靠的產出。
這不是「少用 AI」。我們的 AI 用量沒有減少 — 每次生成都還是呼叫 Gemini。但 AI 的責任範圍被嚴格限制了。
Harsh 文中最精準的一句話：
「在什麼時間點，我們從在 建造 軟體變成只是在 生成 軟體？」
我們的回答：兩者都做。AI 生成內容，人類建造系統。
實作細節（給技術人）
如果你也在做類似的事，這是我們的技術選擇：
- Gemini 2.5 Flash +
responseMimeType: 'application/json'+thinkingBudget: 0 - 模板格式：HTML 字串 +
{{slot}}標記（自己寫的 ~100 行引擎，不用 Mustache/Handlebars） - 動畫：GSAP 3 + ScrollTrigger + Lenis（注入到所有模板的固定 JS）
- CDN：Tailwind CSS CDN + Google Fonts（生成的 HTML 是獨立的單檔，不需要 build step）
- 圖片：Server-side 下載 + base64 嵌入（繞過 Threads CDN 的 referrer 限制）
- Vercel：所有新檔案用
_prefix（不算 serverless function），維持 11/12 上限
結語
AI 技術債是真的。但解法不是回到手寫一切的時代。
解法是畫一條線：這邊是 AI 的責任，那邊是系統的責任。AI 負責的事情要小、要可驗證、要有 fallback。系統負責的事情要穩定、要經過測試、要由人類打造。
生成快。理解一切。但更重要的是 — 建造你能掌控的系統。
想試試 UltraSite v2？→ ultralab.tw/create
想掃描你的 AI 系統有沒有安全漏洞？→ ultralab.tw/probe