HTML 是新的 Markdown

資料來源#

• 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 份量之後也會退化，無論它有多完整。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

會產出一個單一檔案的網站：有腳本化的引言、檔案結構圖、程式碼片段、一塊視覺化的 mood board。一份你可以閱讀、探索，而且能分享給同事的文件——對方遠比面對一個龐大的 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：鷹架每次發布都在縮小）以及 Interaction Models（Thinking Machines Lab：harness 溶解進模型之中）相矛盾。Thariq 說的恰恰相反——他真正出貨的 tokens 只佔大約 1%；99% 都用在鷹架上。

化解之道是：這其實是兩個不同的 harness。

• 縮小中的 harness 是面向模型的——為了讓模型表現得當而存在的提示詞、指令、驗證。隨著模型變強，這部分會收縮。
• 擴張中的 harness 是面向人類的——為了讓人類保持對齊、投入、並有能力做決定而存在的產物（HTML 計畫、micro-apps、design systems）。隨著模型變強，這部分擴張，因為束縛性的限制從「模型做不做得到」轉移到「人類能不能持續留在迴圈裡、並把算力分配得當」。

The Bitter Lesson 溶解的是面向模型的結構；它並不會溶解那種整個存在目的就是為了讓人類理解的面向人類的結構。那正是 HTML 產物所站的那一側。這個角色的延伸，見 Compute Allocator。

三種工作流程#

1. 用可互動的 HTML 進行腦力激盪與規劃（就是這個頁面）——讓你想讀的視覺化計畫。
2. Disposable Micro-Apps——用完即丟的客製化 UI，用來編輯計畫的某些部分，回應了「HTML 不可編輯」的質疑。
3. Living Design System——把 design_system.html 當作一個可攜、人類與機器都讀得懂的 source of truth。

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

相關連結#

• Outsource Your Thinking, Not Your Understanding —— HTML 產物讓人類持續理解 agent 做了什麼
• Thariq Shihipar —— 這套論點的提出者
• Claire Vo —— 訪談者；她也經營一套平行的元件視覺化實作
• Claude Code —— 這些 HTML 產物工作流程所運行的產品，由 Claude Code 團隊從內部親自示範
• Compute Allocator —— 這個媒介所服務的角色：人類作為決策者，99% 的 tokens 都花在像這樣的鷹架上
• Disposable Micro-Apps —— 對 HTML 計畫在可編輯性上的解答
• Living Design System —— 把同一套 HTML 優先的手法套用到設計上
• Harness Shrinkage as Models Improve —— 面向模型的 harness 縮小，而這個面向人類的 harness 擴張；關鍵的對照
• Interaction Models —— 對「更好的人類與 AI 協作」的另一種解答：把即時介面溶解進模型，而這裡則是豐富化那個非同步的產物；機制相反，目標同為讓人類留在迴圈裡
• The Bitter Lesson —— 「留下空間讓模型給你驚喜」是提示詞層級的形態；但要注意的是，面向人類的易讀性並不會往內遷移
• Context Window Smart Zone —— HTML 抬高了人類的有效 smart zone，正如清空脈絡能恢復模型的 smart zone
• Design Concept Grilling —— 腦力激盪 → 讓 Claude 對你進行訪談 → 形成計畫，就是那套盤問的形態；而 HTML 計畫是更豐富的終點產物
• AI Native Product Cadence —— Cat Wu 讓 PRD 變得更輕；Thariq 讓它變得更豐富——對「在高速下讓人類保持對齊」這件事，下了不同的賭注
• Software 3.0 —— HTML 優先的計畫與 Disposable Micro-Apps 是 Software 3.0 原生的：依任務隨需從提示詞生出的 UI，像 MenuGen 那樣「幾乎不需要存在的 app」
• Prototype Over PRD —— 對「在高速下讓人類保持對齊」的第三種賭注：Thariq 讓計畫更豐富，Cat Wu 讓它更輕，Dan Carey 則用原型取代它

開放問題#

• 面向人類的 harness 會不會無止盡地成長，還是它也會撞上自己的臃腫上限（一份精細到讀不下去的 HTML 計畫，就像它所取代的那份 markdown 一樣）？已解答：Does the Human-Facing Harness (HTML Artifacts) Hit Its Own Bloat Ceiling? —— 是的；HTML 抬高並重塑了人類注意力的上限，卻無法移除它，而臃腫只是從文件長度轉移到了產物泛濫／橡皮圖章式的核可。
• HTML 比 markdown 更難 diff 與版本控管——當產物是單一檔案的網站時，計畫的歷史與審查會變成怎樣？（Disposable Micro-Apps 那套複製回 markdown 的做法是一種補丁。）
• 這套做法能不能推廣到單一專家實踐者之外，還是它得要有 Thariq 級別、對 Claude 駕輕就熟的功力，才值得這份額外開銷？

衍生內容#

• 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