前言¶

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 目录。