HTML 是新的 Markdown

資料來源#

• A Field Guide to Fable: Finding Your Unknowns
• How I AI: Thariq Shihipar on Replacing Markdown with HTML for AI-Powered Development

摘要#

Thariq Shihipar 在 Code with Claude（2026 年 5 月）向 Claire Vo 提出的論點是：「HTML 是新的 markdown。」 Markdown 一直是人類與 LLM 互動時的通用語言——簡單、有結構，而且雙方都讀得懂。但隨著模型能力提升、專案日益複雜，數千行的 markdown 計畫會讓人類不堪負荷。我們會快速掃過、停止閱讀、停止參與，協作品質也隨之崩潰。解法是使用更豐富的溝通媒介：具視覺性、可捲動、可互動的 HTML 產物，將人類從被動審查者重新拉回主動協作者的位置。

最關鍵的觀察是：限制因素不是模型，而是人類的注意力。

「不是模型難以處理 Markdown——它們在這方面非常出色——而是 HTML 讓處於迴圈中的我們這些人類，更容易將工作視覺化、與之互動，並持續與正在進行的工作保持連結。」

它修正的失效模式#

Thariq 的親身坦白精確指出了問題：面對一份數千行長的計畫，「他會直接請 Claude 編輯計畫，而不是自己閱讀」。人類不再閱讀的計畫，也就不再由人類引導——規劃原本要產生的對齊因此蒸發。目標變成「建立一份你真的想要閱讀的計畫」。

這是模型 Context Window Smart Zone 的人類注意力類比：正如模型無論宣稱的視窗大小為何，超過約 100K tokens 後都會退化；人類審查者也無論 markdown 有多完整，超過某個未分化 markdown 的量後都會退化。HTML 將 tokens 花在可讀性（mockup、結構、色彩、互動）上，而不是原始文字，因此提高了人類有效的 smart zone。

HTML 帶來什麼#

當被要求「在 HTML 檔案中腦力激盪一些想法」時，Claude 回傳的不是清單，而是一個具視覺性、可捲動的頁面——八個示範想法，每個都有 mockup、描述與風險評估。完整計畫提示詞：

create a HTML file as a plan that helps me visualize what the implementation plan is.
Include excerpts, mockups, code, whatever is needed to give me like maximum context

產生的是一個單檔網站：具腳本的開場、檔案結構圖、程式碼片段，以及視覺情緒板。這是一份你可以閱讀、探索，並且分享給隊友的文件——他們參與其中的可能性遠高於面對一個巨大的 markdown 檔案。這個產物不只連結了人類↔AI，也連結了工程團隊↔公司的其他部門。

提示的關鍵：限制加上空間#

計畫提示詞中的兩個細節是刻意安排的：

• 他把「excerpts」拼錯了，但這並不重要——模型對表層雜訊很有韌性。
• 「whatever is needed to give me like maximum context」 給了模型迴旋空間。這套理念是：提供足夠的限制來取得你想要的結果，但也為模型留下驚喜你的空間。正如 Thariq 所說，「我總是需要像這樣說：『嘿，Claude，我在這裡相信你。』」

這是將 The Bitter Lesson 應用在提示層級的一個小型、可重複實例——不要規定得過度具體，讓擴展後的能力填補空白——同時也與 Compute Allocator 角色相呼應：人類設定方向，並將其餘工作交給模型。

它解決的 harness 張力#

乍看之下，這似乎與 wiki 持續主張的 Harness Shrinkage as Models Improve 論點相矛盾（Cat Wu / Boris Cherny：scaffolding 隨每次發布而縮小），也與 Interaction Models 相矛盾（Thinking Machines Lab：harness 溶入模型之中）。Thariq 說的卻正好相反——只有約 1% 的 tokens 會出貨；99% 都用在 scaffolding 上。

解法是：這是兩種不同的 harness。

• 縮小中的 harness 是面向模型的——為了讓模型正常運作而存在的提示、指示與驗證。隨著模型進步，它會收縮。
• 成長中的 harness 是面向人類的——為了讓人類保持對齊、投入並能夠做決策而存在的產物（HTML 計畫、micro-apps、design systems）。隨著模型進步，它反而會擴大，因為關鍵限制會從「模型能不能做到」轉移為「人類能不能持續參與其中，並妥善分配運算」。

The Bitter Lesson 消解的是面向模型的結構；它不會消解面向人類、且整個目的就是讓人類理解的結構。HTML 產物正位於這條界線的另一側。這個角色意味著什麼，請參閱 Compute Allocator。

這些產物的用途（2026 年 7 月更新）#

原始訪談確立了媒介；兩個月後 Thariq 的 field guide 則說明了這個媒介所承擔的工作。「我之前寫過如何將 HTML 與 Claude 搭配使用——在幾乎所有這些情況下，HTML 產物都是將其視覺化並呈現出來的最佳方式。」這裡的其指的是一個未知：盲點檢查、幾組截然不同且可供回應的設計方向、依照你最可能修改的部分排序的實作計畫、以及底部附有測驗的合併後解說。HTML 是媒介；呈現你從未寫下來的內容 才是目的。

其中一項技術，將下方的「限制加上空間」進一步磨利成一條關於計畫結構的規則：依照變更可能性排序計畫，而不是依照執行順序。「先列出我最可能調整的決策：資料模型變更、新的型別介面，以及任何面向使用者的內容。把機械式重構埋在最下方，那部分我相信你。」人類稀缺的注意力，會落在現在成本低、日後成本高的決策上。

三種工作流程#

1. 在互動式 HTML 中進行腦力激盪與規劃（本頁）——你會想閱讀的視覺化計畫。
2. Disposable Micro-Apps——用來編輯計畫各部分的一次性自訂 UI，回答「HTML 無法編輯」的質疑。
3. Living Design System——將 design_system.html 作為可攜式、可供人類與機器讀取的真實來源。

三者都以人類為中心；沒有一項是在把開發者自動化掉。

相關連結#

• 將思考外包，而不是理解——HTML 產物讓人類持續理解 agent 做了什麼
• Thariq Shihipar——論點的作者
• Claire Vo——訪談者；也在平行進行元件視覺化實務
• Claude Code——這些 HTML 產物工作流程運行其中的產品，並且是在 Claude Code 團隊內部示範
• Compute Allocator——這個媒介服務的角色：人類作為決策者，99% 的 tokens 都花在這類 scaffolding 上
• Disposable Micro-Apps——HTML 計畫的可編輯性答案
• Living Design System——將同樣的 HTML 優先做法應用到設計
• Harness Shrinkage as Models Improve——面向模型的 harness 縮小，而這個面向人類的 harness 擴大；關鍵對比所在
• Interaction Models——「更好的 human–AI collaboration」的姊妹答案：將即時介面消解到模型中；本篇則豐富非同步產物；機制相反，但目標相同，都是讓人類持續參與其中
• The Bitter Lesson——「為模型留下驚喜你的空間」是提示層級的形式；但要注意，面向人類的可讀性不會向內遷移
• Context Window Smart Zone——HTML 提高人類有效 smart zone 的方式，就像清理 context 能恢復模型的 smart zone
• Design Concept Grilling——腦力激盪 → 讓 Claude 訪談你 → 計畫，這就是 grilling 的形狀；HTML 計畫則是更豐富的最終產物
• AI Native Product Cadence——Cat Wu 讓 PRD 變得更輕；Thariq 讓它們更豐富——對於如何讓人類在高速下保持對齊的不同押注
• Software 3.0——HTML 優先的計畫與 Disposable Micro-Apps 都是原生於 Software-3.0 的做法：由提示啟動、以任務為單位的 UI，MenuGen 式的「幾乎不存在的 apps」
• Prototype Over PRD——第三種讓人類在高速下保持對齊的押注：Thariq 讓計畫更豐富，Cat Wu 讓它更輕，Dan Carey 則以 prototype 取代它
• Unknowns as the Agentic Bottleneck——HTML 產物的用途：每次腦力激盪、訪談、計畫與解說，都是在未知變得昂貴前將其呈現出來的工具

開放問題#

• HTML 比 markdown 更難進行 diff 與版本管理——當產物是單檔網站時，計畫歷史與審查會如何變化？（Disposable Micro-Apps 將內容複製回 markdown 是一個修補方式。）
• 這能否超越一位專家實務者而普遍適用，還是必須具備 Thariq 等級的 Claude 熟練度，才值得付出額外成本？

已解決問題#

• 面向人類的 harness 是否會無限成長，還是會撞上自己的膨脹上限（HTML 計畫變得過於複雜而無法閱讀，就像它取代的 markdown 一樣）？答案：Does the Human-Facing Harness (HTML Artifacts) Hit Its Own Bloat Ceiling?——會；HTML 提高並重塑了人類注意力的上限，但無法消除它，而膨脹會從文件長度轉移到產物擴散／橡皮圖章式審查。

推導#

• Does the Human-Facing Harness (HTML Artifacts) Hit Its Own Bloat Ceiling?——這個面向人類的 harness 是否會撞上自己的膨脹上限（會；上限會移動並重塑，但不會消失）

資料來源#

• How I AI: Thariq Shihipar on Replacing Markdown with HTML for AI-Powered Development
• A Field Guide to Fable: Finding Your Unknowns — Thariq Shihipar，2026-07-04（practitioner-opinion）：HTML 作為引出未知的預設媒介；計畫依照變更可能性排序