Introduction

Design tools in the DeepSeek Harness (DSH) ecosystem are generally divided into two categories: generators that stop after generating a design; and skills that only provide rule prompts. Neither can verify whether the model truly adheres to design specifications, because static analyzers cannot read the styles actually rendered by the browser (for example, alpha compositing, actual values after utility classes are resolved, runtime theme switching, and so on).

dsh-design is the only plugin in this ecosystem that can directly measure design rules on rendered pages. It uses Playwright to render the page, then performs quantitative measurements of the type hierarchy, contrast, spacing grid, and palette drift, turning “looks good” into defensible numbers.

Core Features

The plugin includes a design system skill and an audit tool, with the following main features:

  • contrast (WCAG AA): calculates the contrast between text and background. Text color is alpha-composited against the actual background, so it can detect hard-to-notice issues such as white text on gray.
  • type-scale: analyzes the actually rendered font-size hierarchy on the page. If there are too many levels, the typographic hierarchy is likely ad hoc.
  • spacing-grid: checks whether padding, margin, and gap values deviate from the spacing grid.
  • palette: counts the number of non-neutral colors. Neutral colors (grayscale colors) are not counted toward palette drift; only obvious accent colors count.
  • tap-target: checks whether interactive elements (buttons, links, etc.) have dimensions below 24px (WCAG 2.2 AA standard).
  • line-length: checks whether text lines exceed a comfortable line length.
  • default-font: detects whether text extensively falls back to browser default fonts (indicating that font-family is unspecified).
  • purple-gradient: detects purple gradients by hue angle rather than string matching (for example, Tailwind’s violet-500), preventing models from randomly generating purple.
  • emoji-icons: detects whether emoji are used as icons inside controls.
  • design-system skill: a constraining skill used to define the palette, font sizes, and spacing before generation.

Installation and Activation

The installation command is as follows:

dsh plugin --profile web add dsh-design

Usage Examples

Use the design_audit command to audit a page. The command accepts a URL (localhost is allowed) or a local HTML file, and supports specifying a viewport width.

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

Configuration

Audit thresholds and browser behavior can be adjusted through the configuration file. The default configuration is as follows:

- 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

Notes

  • Environment dependency: requires Node.js version ^22.19 || >=24.
  • Browser dependency: the plugin uses an installed Chrome or Edge; otherwise, run npx playwright install chromium once and set browserChannels: [chromium].
  • Measurement logic: the browser performs measurements, while Node evaluates the rules. This ensures that unsupported color syntax (such as oklch()) is skipped rather than guessed, that contrast calculations are based on the actual background stack, and that neutral colors are excluded from palette statistics.

Summary

dsh-design provides the ability to quantify design specifications into actionable checks, making it suitable for agent development scenarios that require strict control over UI consistency and accessibility. The plugin source and catalog information are available here: GitHub | SkillHub catalog.