前言¶

DeepSeek Harness（DSH）生態中的設計工具通常分爲兩類：一類是生成設計後即停止的生成器；另一類是僅提供規則提示詞的技能。這兩者都無法驗證模型是否真正遵守了設計規範，因爲靜態分析器無法讀取瀏覽器實際渲染的樣式（例如透明度合成、工具類解析後的實際值、運行時主題切換等）。

dsh-design 是該生態中唯一能在渲染頁面上直接測量設計規則的插件。它通過 Playwright 將頁面渲染出來，然後對類型層級、對比度、間距網格和調色板漂移進行量化測量，將“看起來不錯”轉化爲可論證的數值。

核心功能¶

該插件包含一個設計系統技能和一個審計工具，主要功能如下：

• contrast (WCAG AA)：計算文本與背景的對比度。文本顏色會與實際背景進行 Alpha 混合計算，因此能檢測出灰底白字等難以察覺的問題。
• type-scale：統計頁面實際渲染的字體大小層級。如果層級過多，說明排版層級是即興發揮的。
• spacing-grid：檢查 padding、margin 和 gap 值是否偏離了間距網格。
• palette：統計非中性色的數量。中性色（灰色階）不計入調色板漂移，只有明顯的強調色纔算。
• tap-target：檢查交互元素（按鈕、鏈接等）的尺寸是否低於 24px（WCAG 2.2 AA 標準）。
• line-length：檢查文本行是否超過了舒適的行長。
• default-font：檢測文本是否大量回退到了瀏覽器默認字體（說明未指定字體族）。
• purple-gradient：通過色相角度而非字符串匹配來檢測紫色漸變（如 Tailwind 的 violet-500），防止模型隨機生成紫色。
• emoji-icons：檢測控件內是否使用了 emoji 充當圖標。
• design-system skill：約束選擇的技能，用於在生成前設定調色板、字體大小和間距。

安裝與啓用¶

安裝命令如下：

dsh plugin --profile web add dsh-design

使用示例¶

通過 design_audit 命令對頁面進行審計。命令接受 URL（localhost 允許）或本地 HTML 文件，並支持指定視口寬度。

design_audit { target: "http://localhost:3000/pricing" }
design_audit { target: "dist/index.html", viewportWidth: 390 }

配置項¶

可以通過配置文件調整審計的閾值和瀏覽器行爲。默認配置如下：

- id: design
  name: dsh-design
  config:
    headless: true
    browserChannels: [chrome, msedge, chromium]
    viewportWidth: 1280
    viewportHeight: 900
    navigationTimeoutMs: 15000
    spacingBasePx: 4        # 間距必須爲該值的倍數
    maxTypeSizes: 6         # 超過此數量的不同字體大小則層級混亂
    maxPaletteColors: 8     # 非中性色數量超過此值視爲漂移
    neutralChroma: 0.18       # 低於此色度視爲中性色
    minTapTargetPx: 24     # WCAG 2.2 AA 標準；移動端產品可設爲 44
    maxCharsPerLine: 75
    allowedHosts: []        # 允許審計加載的額外域名
    registerSkill: true

注意事項¶

• 環境依賴：需要 Node.js 版本 ^22.19 || >=24。
• 瀏覽器依賴：插件使用已安裝的 Chrome 或 Edge；否則需運行 npx playwright install chromium 一次，並設置 browserChannels: [chromium]。
• 測量邏輯：由瀏覽器進行測量，Node 決定規則。這確保了未建模的顏色語法（如 oklch()）會被跳過而非猜測，對比度計算基於真實的背景層級，且中性色被排除在調色板統計之外。

總結¶

dsh-design 提供了將設計規範量化爲可執行代碼的能力，適合需要嚴格控制 UI 一致性和可訪問性的智能體開發場景。插件源碼與目錄信息可參考：GitHub | SkillHub 目錄。