資料來源#
摘要#
Thariq Shihipar 的第三套 HTML 優先工作流程：維護一個 design_system.html 檔案——一份人類與機器都讀得懂的產物——作為你應用程式視覺語言的可攜 source of truth。不同於靜態的風格指南文件，它會實際渲染：色彩調色盤、字級階層、間距規則，以及核心元件（按鈕、輸入框、卡片）的可互動範例，全都在頁面上即時呈現。每當你展開新工作，就把這一個檔案交給 Claude 當作脈絡，於是它打造出來的一切都貼合品牌。
這是把 HTML as the New Markdown 的手法，套用到「遵循設計系統」這個長年難題上：人類可以一眼掃過的那份產物，正是模型用來保持一致的那份產物。
它是怎麼打造的#
- **萃取設計 DNA。**把 Claude 指向一個專案資料夾——或一次指向多個 GitHub repository（例如行銷網站以及應用程式）——請它萃取出設計系統。它會分析 CSS、元件與樣式，藉此推斷出視覺語言。
- **生成
design_system.html產物。**Claude 會把萃取出的系統渲染成單一一個 HTML 檔案，在視覺上呈現調色盤、字級、間距，以及可互動的元件範例——不是對元件的描述，而是元件本身。 - **探索變體並分享。**搭配像 Claude Design 這樣的工具，打造帶有可互動旋鈕與滑桿的 component playgrounds（「這顆按鈕如果 padding 多一點會長怎樣？換個邊框呢？」），即時探索各種變體。
為什麼它是「活的」#
傳統的風格指南會漂移：文件說的是一回事，程式碼做的卻是另一回事。而一份從程式碼中萃取、並渲染成真實元件的 design_system.html，更難造假——你看到的，就是元件實際的行為。又因為它是單一一個可攜檔案，所以它能四處移動：把它交給一個新專案、一項新功能，或一位同事，它就成了讓產出保持一致的參照。它是一種持久的算力配置——生成一次，便能無限期地當作脈絡重複使用——這與用完即丟的 micro-apps 形成對比。
銜接工程與公司的其他部門#
這份產物最大的回報是組織層面的。一個渲染出來的元件頁面，讓非技術的利害關係人——行銷人員、PMM、任何要做簡報或影片的人——只要去一個頁面，就能看到每個元件在各種狀態下的樣子，並抓取高擬真的 mockup，「不必去煩工程師」。Claire Vo 表示她就用自己的元件視覺化頁面做了完全一樣的事。於是這套設計系統銜接的不只是人類↔AI，更是工程↔公司的其他部門——正是 HTML as the New Markdown 對計畫所主張的那種「面向人類的易讀性」回報。
相關連結#
- Agent-Native Infrastructure —— design_system.html 是設計層的 agent 原生基礎設施
- Thariq Shihipar ——
design_system.html工作流程的原創者 - Claude Code —— 從 repo 中萃取設計 DNA 並渲染出
design_system.html；Claude Design 則驅動 component playgrounds - HTML as the New Markdown —— 母論點；設計系統就是把 HTML 優先的手法套用到設計上
- Compute Allocator —— 一種持久的算力配置（生成一次，當作脈絡重複使用）
- Disposable Micro-Apps —— 用完即丟的對照組；設計系統則是留著用的那一邊
- Claire Vo —— 為非技術利害關係人經營一套平行的元件視覺化實作
- Engineer PM Convergence —— 一份讓非工程師也能自助取用高擬真素材的產物，正是組織中各種角色界線模糊化的工具面向
開放問題#
- 隨著程式碼庫演進，
design_system.html要如何保持同步——定期重新萃取，還是把它接進 CI？ - 相較於一份單純的 CSS／token 檔案，一套渲染出來、模型可讀的設計系統，是否能在「貼合品牌的產出」上帶來可量測的提升，還是說好處主要還是人類的易讀性？
- 在多大的專案規模下，維護這份產物的成本會超過它換來的一致性？
資料來源#
Cited by 12
- Agent-Native Infrastructure
The world is still built for humans and must be rewritten for agents; "what do I copy-paste to my agent?"; sensors/actu…
- Claire Vo
Host of the "How I AI" interview series (ChatPRD); interviewed Thariq Shihipar; runs a parallel component-visualization…
- Claude Code
Anthropic's agentic coding product; created by Boris Cherny late 2024; TypeScript/React; CLI/desktop/web/mobile/IDE sur…
- Claude Design
Anthropic Labs product (research preview, ~April 2026) for collaborating with Claude on polished visual artifacts — des…
- Compute Allocator
The human's evolving role: deciding what's worth spending compute on; ~1% of generated tokens ship, 99% is scaffolding…
- Disposable Micro-Apps
Throwaway custom UIs built per-task to edit a plan ("micro-software on top of micro-software"); copy-back-to-markdown;…
- Engineer PM Convergence
Generalists across disciplines; product taste as bottleneck skill; Anthropic Claude Code team as case study; "just do t…
- HTML as the New Markdown
Thariq Shihipar's thesis: as models improve, thousand-line markdown plans overwhelm the *human*; HTML artifacts (visual…
- Does the Human-Facing Harness (HTML Artifacts) Hit Its Own Bloat Ceiling?
Yes — HTML raises and reshapes the human-attention ceiling but can't remove it; bloat relocates from document-length to…
- AI Engineering & Agent Tooling
Map of Content for the ai-engineering domain — 36 concepts. Curated entry point; see Home for all domains.
- Open Questions Backlog
_96 pages with open questions, as of 2026-06-14._
- Thariq Shihipar
Engineer on the Claude Code team at Anthropic; "HTML is the new markdown" and "compute allocator" framings; three HTML-…
Related articles
- Compute Allocator
The human's evolving role: deciding what's worth spending compute on; ~1% of generated tokens ship, 99% is scaffolding…
- Harness Shrinkage as Models Improve
Prompt scaffolding shrinks each model release; Cat Wu's pruning discipline; Boris Cherny "100 lines of code a year from…
- Claude Code
Anthropic's agentic coding product; created by Boris Cherny late 2024; TypeScript/React; CLI/desktop/web/mobile/IDE sur…
- HTML as the New Markdown
Thariq Shihipar's thesis: as models improve, thousand-line markdown plans overwhelm the *human*; HTML artifacts (visual…
- Thariq Shihipar
Engineer on the Claude Code team at Anthropic; "HTML is the new markdown" and "compute allocator" framings; three HTML-…