前言¶

在 DeepSeek Harness（DSH）里用智能体做中文 Web 界面时，常见问题不是「能不能写出页面」，而是排版细节、配色与文案是否一眼像模板站：中西文混排没留空、行高过紧、硬编码色值、营销套话堆在标题下。单靠通用前端 skill，很难把 CJK 排版和「反生成感」检查固化进每次对话。

下面介绍社区插件 dsh-zh-ui（维护者 1186258278）。它在 DSH 中提供中文 UI 设计 skill、项目级设计规范注入，以及不依赖浏览器渲染的静态 lint 工具，面向中文前端界面设计与规范落地。

这是什么¶

dsh-zh-ui 是面向中文界面工作的 DSH 插件，当前在 SkillHub 目录 与 GitHub 分发，许可证为 MIT。插件由三块能力组成：

1. Skill zh-ui-design：中文排版规则、反「生成感」清单、「先定设计方向」工作流，以及四套带完整 CSS 自定义属性与组件示例的风格预设。
2. 项目规范注入：每次组装 prompt 时，从会话工作目录读取 DESIGN.md 与 design.tokens.json，追加为运行时上下文（非缓存 system prompt）；文件不存在则不注入。
3. 工具 zh_design_lint：对 HTML / CSS / SCSS / Vue / JSX / TSX / Svelte 源码及 Tailwind class 做静态扫描，不渲染页面。

DSH 生态主张「一切皆插件」；SkillHub 为社区目录站点，与 DeepSeek / 幻方无官方从属关系。

核心功能¶

Skill zh-ui-design¶

Skill 侧覆盖中文排版与界面方向，要点包括：

• 中文与拉丁字母、数字之间的间距；全角标点；带 fallback 的 CJK 字体栈；行高建议 1.6–1.8；每行约 25–40 字。
• 反「生成感」检查清单，以及「设计方向优先」流程。
• 四套风格预设：observatory、night-shift、cobalt-poster、trust，各含完整 CSS 自定义属性，以及导航、Hero、定价卡、CTA 等示例配方；预设中的文字/背景对比按 WCAG AA（4.5:1）校验。

项目规范注入¶

插件监听 system-prompt/assemble，在组装完成后追加运行时上下文，行为类似 @deepseek-ai/dsh-working-directory 对工作目录的处理方式。默认读取的文件列表可通过配置中的 specFiles 调整；字符上限由 maxSpecChars 控制（默认 8000）。

工具 zh_design_lint¶

Lint 仅读取工作目录内的文件，解析到工作目录外的路径会被拒绝。规则概览如下：

已知限制：CSS 解析为基于正则，非完整 AST；颜色关键字如 white 不检测；对比度、点击区域、渲染后字号不测量——这类问题需用渲染类工具（README 举例 dsh-design 的 design_audit）。

插件使用的 DSH API 包括：ctx.skills.register()、ctx.on('system-prompt/assemble', …)、ctx.workingDirectory.get(session)、ctx.tools.register(defineTool(…))。

安装与启用¶

在 web profile 下从 GitHub 安装：

dsh plugin --profile web add github:1186258278/dsh-zh-ui

运行环境需满足 DSH 对 Node 的要求（README 写明 Node 22+）。本地开发时可将构建产物通过 patch 挂载：

# extra.yml
- insert:
    - id: zh-ui
      name: '/absolute/path/to/dsh-zh-ui/lib/index.js'

dsh web --patch ./extra.yml

可选配置示例（摘自 README，可按项目裁剪 rules 等字段）：

- id: zh-ui
  name: dsh-zh-ui
  config:
    registerSkill: true
    injectProjectSpec: true
    specFiles: [DESIGN.md, design.tokens.json]
    maxSpecChars: 8000
    rules: [hardcoded-color, off-scale-px, font-family-cjk, cjk-latin-spacing, cjk-punctuation, cjk-line-height, purple-gradient, emoji-icon, heading-subtitle, filler-copy]
    spacingBasePx: 4
    allowedPx: [0, 1, 2]
    minLineHeight: 1.5
    maxFiles: 200

典型用法¶

1. 安装插件后，在 web 相关 DSH 会话中启用 zh-ui-design skill（registerSkill: true 时由插件注册），让智能体按中文排版与四套预设之一推进界面方案。
2. 在项目根目录维护 DESIGN.md 与 design.tokens.json，开启 injectProjectSpec 后，每次 prompt 组装会自动带上项目设计说明与 token 色值，减少与仓库规范脱节。
3. 在改完 Vue / React / 静态 HTML 等文件后，调用 zh_design_lint 对工作目录内源码扫描，按规则 ID 逐项改硬编码颜色、间距刻度、混排与套话等问题。
4. 仓库 demo/ 提供 A/B 对比，细节见 demo/RESULTS.md（需自行 clone 仓库查看，非安装包必需步骤）。

适用场景与注意¶

适合谁：用 DSH 做中文产品站、落地页或管理台原型，希望把 CJK 排版、设计 token 与「不像 AI 默认站」的约束写进 agent 工作流的团队或个人。

权限与安全：插件以当前 dsh 进程权限运行，可读取工作目录内文件并注册 skill / 工具。安装前应在 GitHub 查看源码与 MIT 许可证，确认符合组织策略。

与渲染审计的分工：zh_design_lint 是静态规则，不能替代真实渲染下的对比度与触控尺寸检查；需要时可配合 dsh-design 等带 design_audit 的插件。

结尾¶

dsh-zh-ui 把中文 UI 设计 skill、项目 DESIGN.md / design.tokens.json 注入和十条静态 lint 规则收进一个 DSH 插件，适合在 Harness 里长期做中文界面时减少排版与「模板感」返工。

• 目录页：https://www.skillhub.cn/plugins/1186258278/dsh-zh-ui
• 源码与文档：https://github.com/1186258278/dsh-zh-ui