H
Howardism
Plate IIAI Coding Practice機器翻譯 · machine-translated過時翻譯 · stale translationENHOWARDISM

活的設計系統

PublishedMay 21, 2026FiledConceptDomainAI Coding PracticeTagsAgent EngineeringDesign SystemsHuman AI CollaborationReading4 minSourceAI-synthesised

從 repositories 擷取的 `design_system.html`，作為可攜且人類與機器皆可讀的真實來源；元件遊樂場； 串起工程 ↔ 非技術利害關係人

活的設計系統插圖

資料來源#

摘要#

Thariq Shihipar 的第三種 HTML 優先工作流程：維護一個 design_system.html 檔案——這是一項同時可供人類與機器讀取的工件，作為應用程式視覺語言的可攜真實來源。不同於靜態的樣式指南文件，它會渲染：色彩調色盤、字體比例、間距規則，以及核心元件（按鈕、輸入框、卡片）的互動範例，全部即時顯示在頁面上。每當你開始新的工作時，就把這個檔案交給 Claude 作為上下文，而它建立的一切都會符合品牌風格。

這是將 HTML as the New Markdown 應用於設計系統遵循這項長期問題的做法：人類可以目測的同一項工件，也是模型讀取以維持一致性的工件。

建置方式#

  1. 擷取設計 DNA。 將 Claude 指向一個專案資料夾——或一次指向多個 GitHub repository（例如行銷網站和應用程式）——要求它擷取設計系統。它會分析 CSS、元件與樣式設定，推斷視覺語言。
  2. 產生 design_system.html 工件。 Claude 將擷取出的系統渲染成單一 HTML 檔案，視覺化呈現調色盤、字體比例、間距，以及互動式元件範例——不是描述元件，而是元件本身。
  3. 探索變化並分享。 使用 Claude Design 等工具，建立帶有互動旋鈕與滑桿的元件遊樂場（「如果這個按鈕增加內距會怎樣？換一種邊框呢？」），即時探索各種變化。

為什麼它是「活的」#

傳統樣式指南會逐漸偏離：文件寫的是一回事，程式碼做的又是另一回事。從程式碼中擷取、並以真實元件形式渲染的 design_system.html 更難被造假——你看到的，就是元件實際呈現的行為。而且因為它是單一的可攜檔案，所以可以隨處移動：交給新專案、新功能或隊友，它就會成為維持輸出一致性的參照。相較於一次性的 micro-apps，它是 compute 的持久配置——產生一次，作為上下文無限期重複使用。

串起工程與公司其他部門#

這項工件最大的回報在組織層面。渲染後的元件頁面讓非技術利害關係人——行銷人員、PMM，以及任何製作簡報或影片的人——只需前往一個頁面，就能看到每個元件的各種狀態，並取得高保真模型圖，「不用麻煩工程師」。Claire Vo 表示，她自己就透過元件視覺化頁面這樣做。如此一來，設計系統串起的不只是人類↔AI，也串起了工程↔公司其他部門——這正是 HTML as the New Markdown 所宣稱、適用於計畫的人類可讀性回報。

相關連結#

  • Why AI Lags at Design — 理由 4（設計↔程式碼的抽象層）就是設計系統問題：元件之間的語意，而不是它們的像素
  • Agent-Native Infrastructure — design_system.html 是設計層的 agent-native 基礎設施
  • Thariq Shihipar — design_system.html 工作流程的創始者
  • Claude Code — 從 repositories 擷取設計 DNA，並渲染 design_system.html；Claude Design 為元件遊樂場提供支援
  • HTML as the New Markdown — 上位論點；設計系統是將 HTML 優先做法應用於設計
  • Compute Allocator — 持久的 compute 配置（產生一次，作為上下文重複使用）
  • Disposable Micro-Apps — 一次性的對應物；設計系統則是保留下來使用的對應物
  • Claire Vo — 為非技術利害關係人執行平行的元件視覺化實務
  • Engineer PM Convergence — 讓非工程人員自行取得高保真資產的工件，是組織內角色逐漸模糊的工具面向

開放問題#

  • 隨著程式碼庫演進，design_system.html 如何保持同步——按固定週期重新擷取，還是將它接入 CI？
  • 渲染後、模型可讀的設計系統，是否能相較於單純的 CSS/token 檔案，量化改善符合品牌風格的輸出，還是優勢主要來自人類可讀性？
  • 專案規模達到多大時，維護這項工件的成本會超過它帶來的一致性收益？

資料來源#

§ end
About this piece

Articles in this journal are synthesised by AI agents from a curated wiki and are refreshed automatically as new concepts arrive. Topics, framing, and editorial direction are curated by Howardism.

Cited by 19
Related articles
  • HTML as the New Markdown

    Thariq Shihipar's thesis: as models improve, thousand-line markdown plans overwhelm the *human*; HTML artifacts (visual…

  • Disposable Micro-Apps

    Throwaway custom UIs built per-task to edit a plan ("micro-software on top of micro-software"); copy-back-to-markdown;…

  • 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…

  • Thariq Shihipar

    Engineer on the Claude Code team at Anthropic; "HTML is the new markdown", "compute allocator", and "the map is not the…

  • Claude Code

    Anthropic's agentic coding product; created by Boris Cherny late 2024; TypeScript/React on Bun (itself Claude-rewritten…