建構 AI Agent 能精準遵循的五層設計系統與技能規範

SOURCE | 資訊源評估

• 準確性: 高 - 作者具備前端架構與 AI 協作經驗，五層約束框架直擊代碼代理痛點。
• 易理解性: 高 - 條理清晰，搭配 CSS Token、組件清單與規則範例，具極高落地性。
• 閱讀策略建議: 建議精讀「語意 Token 的意圖抽象」與「Rules 與 Skills 架構分工」，掌握因果規則抑制幻覺的技巧。

NAPKIN | 餐巾紙

• 一句話：設計系統已從人類共享庫演進為 Agent 的可執行規格書；透過五層漸進約束與驗證技能，能將模糊品味轉化為零猜測的工程代碼。
• 餐巾紙公式： $$ ext{Fidelity}{ ext{agent_UI}} = \left( \prod{l=1}^{4} ext{Constraint}(L_l) ight) imes \left( ext{Rules}{ ext{global}} + ext{Skills}{ ext{verify}} ight) - ext{Ambiguity}_{ ext{tokens}}$$

公式白話解析：Agent 生成 UI 的精確度取決於基元、語意、組件、區塊四層架構的鏈式約束力，乘上全域規則與任務技能加成，並扣除 Token 規範的未決歧義。

• 行動觸發：在專案根目錄建立 AGENTS.md，寫入單句規則並附帶「背後原因」，觀察 Agent 在介面佈局上的一致性。

餐巾紙草圖

┌─────────────────────────────────────────
│ [人類隱性設計品味]
│   |
│   v  (形式化轉譯)
│ [L1: 設計基元] ---> 純數值封閉集 (禁止自創新數值)
│   |
│   v
│ [L2: 語意基礎] ---> 意圖驅動 Token (依職責選用色彩與尺寸)
│   |
│   v
│ [L3: 組件映射] ---> shadcn/ui 契約 (Good/Bad 範例與 6 大狀態)
│   |
│   v
│ [L4: 區塊組裝] ---> 畫面解構為 Block Stack (降低空間推理成本)
│   |
│   v
│ [L5: 規則與技能] -> 全域原因規則 (Rules) + 專屬任務審查 (Skills)
│   |
│   v
│ [零猜測高保真 UI 代碼產出]
└─────────────────────────────────────────

ROUND 1: SKELETON | 骨架掃描

“這篇文章在解決什麼根本問題”

• 核心問題: 為何 AI Agent 能飛速生成程式碼，卻總在字級、間距、色彩語意與狀態反饋等細節上頻繁出錯？
• 核心答案: 傳統設計系統為人類打造，未將優質標準編碼；重構為五層機器規格與技能，方能消除猜測。
• 論證結構: 痛點揭露（Agent 產出看似完美實則全錯）–> 典範轉移（設計系統即 Agent 規格書）–> 五層架構剖析（基元、語意、組件、區塊、規則技能）–> 人機邊界審視。

章節骨架

1. 設計基元與語意基礎 (L1-L2): 鎖定純數值封閉集，透過意圖導向的語意 Token 規範色彩與間距，杜絕裝飾性濫用。
2. 組件契約與區塊堆疊 (L3-L4): 以標準庫為基底約定邊界與 6 大狀態，並將複雜頁面降維為標準區塊的堆疊。
3. 規則驅動與技能審查 (L5): 藉由「帶原因的單句全域規則」賦予推斷力，配合特定任務的「審查技能」建構閉環流水線。

ROUND 2: DISSECTION | 血肉解剖

“憑什麼這麼說：論證與硬核證據”

論證鏈

┌─────────────────────────────────────────
│ 前提一：AI Agent 缺乏實體審美直覺，缺少邊界時會以機率隨機猜測
│   |
│   v
│ 前提二：隱藏於腦中的設計品味若未顯式化，代碼生成必出現細節漂移
│   |
│   v
│ 推論一：自底向上的強型別分層約束能完全阻斷 Agent 幻覺數值
│   |
│   v
│ 推論二：附帶原因說明的規則能啟發情境推理，彌補未窮舉規則的盲區
│   |
│   v
│ 結論：五層規格加技能審查，是讓 Agent 精準交付商業級 UI 的唯一路徑
└─────────────────────────────────────────

關鍵證據與量化數據

1. 孤兒數值的完全絕跡: 基元文件頂部標註禁止自創數值後，13.5px 字體與 10px 間距發生率直接歸零。
2. 審查技能的實戰捕獲率: 部署 review-screen 後，系統自動攔截「已審批卡片仍標註待審批」的狀態漂移。
3. 規格虛構引發的調用失控: 實驗證實若描述未實現的變體，Agent 誤調用率趨近百分之百，規範須鏡像真實代碼庫。

隱形假設與邊界條件

• 隱形假設: 開發者具備標準前端架構思維，願意前期梳理 Token，且 Agent 具備足夠上下文視窗解析多層規範。
• 邊界條件: 在探索性極強的早期原型開發中，嚴苛的五層約束可能降低探索吞吐量；此時應適度放寬區塊定義。

ROUND 3: SOUL | 靈魂提取

“如何落地與架構反思”

• 作者盲點: 未深入討論多端響應式佈局與深淺主題切換時，語意 Token 在 Agent 上下文中的複雜度膨脹。
• 知識連接:
  • 編譯期類型系統 (Type System)：基元與語意 Token 相當於樣式的靜態型別約束，生成期即阻斷語意錯誤。
  • 靜態代碼分析 (AST Linter)：審查技能相當於在 Agent 內部運行的語意 Linter，確保狀態機一致性。
• 行動觸發: 設立 skills/review-screen.md，納入「檢查非 Token 生硬數值、檢查三態覆蓋、比對運行狀態」檢驗流水線。

留白提問 (Guided Reflection)

• 提問 1：當設計系統越精準，是否變相限制了 Agent 探索新穎互動設計的可能性？
  • 架構師視角 (引導思路)：架構約束旨在消除隨機雜訊；固定邊界後，Agent 才能將推理算力集中於高階互動邏輯。
• 提問 2：在 Agentic 流程中，設計師角色是否將從介面像素繪製者轉變為機器規格編寫者？
  • 架構師視角 (引導思路)：未來的核心資產不再是 Figma 畫布，而是包含語意邊界與狀態約束的機器可讀規格。

跨域映射

• 在 編譯器設計，這叫 靜態語法樹與型別約束 (AST & Static Typing)
• 在 微服務架構，這叫 接口契約驅動開發 (Contract-Driven Design)

DEEP READ | 精讀指引 (Must-Read Segments)

[!IMPORTANT] 學習的本質需要「認知阻力」。請親自回到原文閱讀以下核心段落，感受原始論述的阻力，不要只依賴 AI 的總結。

1. 設計系統典範轉移
   • 「I think this is what a design system is becoming. It used to be mostly a shared library for a team. Now it is also the place where you write down what good looks like, so an agent can follow along without having to guess.」
   • 推薦理由: 清晰點出 AI 時代設計系統的本質演變——從協同庫轉化為機器可執行的真理集合。
2. 原因導向的規則設計
   • 「A rule is one short sentence with its reason right after it. …The reason is what helps the agent handle cases you never wrote down.」
   • 推薦理由: 揭示上下文工程精髓：附帶因果解釋的規範能賦予大型語言模型跨場景推理能力。

STRUCTURE MAP | 全書結構圖

┌─────────────────────────────────────────────────────────
│ 建構 AI Agent 能遵循的設計系統
│ 1. 核心困境
│    +--> 痛點：Agent 生成快速乾淨，但細節全錯
│    +--> 根因：設計品味存在於人腦，缺乏可執行規範
│ 2. 五層架構約束 (Five-Layer Architecture)
│    +--> L1 設計基元 (Primitives)：封閉數值池，杜絕孤兒數值
│    +--> L2 語意基礎 (Semantic Tokens)：意圖驅動，抑制色彩裝飾性濫用
│    +--> L3 組件映射 (Components)：明確邊界、Good/Bad 範例與 6 大狀態
│    +--> L4 區塊組裝 (Blocks)：將畫面降維為可複用的 Block Stack
│    +--> L5 規則與技能 (Rules & Skills)：全域原因規則 + 專屬驗證技能
│ 3. 人機分工邊界
│    +--> 規格沉澱：前期規範編寫的慢，換取後期代碼生成的快
│    +--> 品味鎖定：人類定義優質標準，Agent 負責精準執行
└─────────────────────────────────────────────────────────

</建構 AI Agent 能精準遵循的五層設計系統與技能規範> <建構 AI Agent 能精準遵循的五層設計系統與技能規範 (Architectural Deep Dive)>

前言/背景

開發者使用 Agent 生成 UI 時常遇挫折：結構整潔但細節全錯。因設計決策封裝於大腦中，新設計系統的使命是將隱性品味轉譯為機器可無歧義遵循的分層契約。

章節詳細總結

1. 設計基元與語意基礎：建構意圖導向的樣式抽象層

設計系統底層由原始基元（Primitives）與語意基礎（Semantic Foundations）兩層 Token 構成。基元定義字體、調色盤、間距、圓角與動態純數值；樣式表頂部指令強制 Agent 僅能從中選取，解決自創數值混亂。

語意 Token 將外觀轉為意圖，如 --text-muted 取代 --gray-500，杜絕色彩濫用。未定數值要求 Agent 向人類確認，防範猜測固化為技術債。

架構權衡 (Trade-offs)

• 優勢 (Pros)：
  • 建立單一真相來源，靜態阻斷 Agent 生成非法樣式數值。
  • 語意抽象使介面在全局重構或主題切換時具備極高彈性。
• 劣勢與成本 (Cons & Overheads)：
  • 前期命名體系梳理耗時，需建立嚴密的 Token 抽象心智模型。
  • 增加樣式調用深度，在極小型原型專案中可能顯得過度工程化。
• 選型建議：
  • 長期演進的商業專案應全面導入兩層 Token；快速原型階段可適度合併兩層以提速。

2. 組件契約與區塊堆疊：將介面降維為標準功能單元

組件層以 shadcn/ui 為基底，劃分八大類別。文檔嚴格約定情境、預設變體、代碼正反範例與六大狀態（hover, pressed, loading, empty, disabled, error），不記錄未實現變體以防幻覺。

組件之上為區塊（Blocks），將介面拆解為區塊堆疊（Block Stack），複雜二維佈局降維為一維組裝，降低 Agent 空間推理開銷。無對應區塊時即為擴展新抽象信號。

架構權衡 (Trade-offs)

• 優勢 (Pros)：
  • 六大狀態契約消除邊界遺漏，顯著提升生成代碼的強韌性。
  • 區塊化堆疊降低上下文負荷，便於模組化生成與抽換。
• 劣勢與成本 (Cons & Overheads)：
  • 組件與區塊契約需隨產品迭代持續同步，維護成本增加。
  • 固化的區塊定義可能降低特殊自訂介面的靈活度。
• 選型建議：
  • 區塊抽象應在完成數個真實畫面後由下而上提取，嚴禁過早設計模板。

3. 全域規則與專屬技能：因果引導與雙軌驗證閉環

頂層由全域規則（Rules）與任務技能（Skills）構成。規則以「單句規範 + 原因」常駐。提供因果使 Agent 面臨未列舉場景時，能依據「為什麼」推斷出符合品味的決策。

技能則是按需觸發的指令檔（如 review-screen）。規則負責生成正向引導，技能負責事後驗證：標記生硬數值、檢查三態覆蓋、比對狀態文字，有效攔截漂移。

架構權衡 (Trade-offs)

• 優勢 (Pros)：
  • 因果驅動規則大幅提升 Agent 在複雜非標準情境下的推斷精準度。
  • 專屬技能實現輕量級動態驗證，建構自我修復的閉環流水線。
• 劣勢與成本 (Cons & Overheads)：
  • 全域規則過多會佔用 Context Window 配額，需嚴格精簡數量。
  • 技能維護需對 Agent 工具調用機制具備深入理解。
• 選型建議：
  • 規則庫應採漸進式沉澱，僅在犯錯時增補；技能庫則專注於高風險驗證場景。

總結與結論

• 典範轉移：設計系統已由團隊共享庫演進為 Agent 無歧義遵循的機器規格真理集。
• 分層約束：透過基元、語意、組件、區塊的漸進約束，將生成自由度完全鎖定在合規池中。
• 因果賦能：結合因果全域規則與審查技能，方能打造值得信賴的高可用 Agentic UI 開發工作流。

Source URL: https://x.com/_heyrico/status/2116953958279479760 </建構 AI Agent 能精準遵循的五層設計系統與技能規範 (Architectural Deep Dive)>