前言¶
DeepSeek Harness（DSH）把 Web 壳、主题和若干界面能力都做成可插拔扩展。开发者或日常用户若只想在不动模型、不碰会话数据的前提下，让界面更接近自己习惯的配色与布局，往往需要找一套只覆盖视觉层、停用时能完整回滚的皮肤插件。
社区里已有只换侧栏品牌图标的主题类插件；若你希望连全站配色、圆角几何、新会话快捷入口一并调整，第三方维护的 dsh-doubao-ui 走的是「CSS 语义令牌覆盖 + 声明式 React 插槽」路线，零 npm 运行时依赖，适合在 desktop 等 profile 下单独启用、按需停用。
这是什么¶
dsh-doubao-ui（仓库 JAKE1266/dsh-doubao-ui）由维护者 JAKE1266 发布，归类为趣味换装类 DSH 插件。简介是：为 DeepSeek Harness Web 提供豆包视觉灵感驱动的皮肤——纯 CSS token 覆盖，无额外依赖。
需要 upfront 说明：README 标明这是非官方第三方插件，与字节跳动 / 豆包、DeepSeek 均无授权或背书；只改 Web 界面，不读写文件、不联网、不注册工具、不接触模型与会话内容。插件以当前 DSH 进程权限运行，安装前建议浏览源码与 MIT 许可证。
目录页：skillhub.cn 插件条目。截至社区目录信息，仓库约 1 star。
核心功能¶
自 v1.1.0 起，插件分两层工作（当前 package 版本为 1.2.0）。
第一层：皮肤（CSS 变量）¶
DSH Web 的全站外观由 body 上的 --dsw-alias-*、--dsw-static-*、--dsw-specific-* 等语义变量驱动。本插件在这些变量层做覆盖，主要包括：
- 配色：豆包蓝主色与中性灰面，亮/暗两套色板随宿主
body[data-ds-dark-theme]切换。 - 几何：大圆角（例如气泡 16px、卡片/输入框 20px、按钮 10px、快捷胶囊 9999px）与偏软的阴影。
- 输入与胶囊：大圆角输入卡、focus 蓝色柔光环、发送键品牌渐变；首页快捷胶囊支持 hover/选中态品牌色。
- 排版与可访问性：15px 基线字号、CJK 字体回退；尊重
prefers-reduced-motion，不破坏宿主「仅键盘显示焦点环」逻辑。
实现上选用 :root:root 等稳定锚点抬高选择器优先级，避免依赖宿主 CSS Module 哈希类名，便于 DSH 升级。
第二层：组件（React 插槽）¶
在皮肤之上，向宿主插槽注入少量 UI（React 由 DSH 提供，插件不在模块顶层强依赖 require('react')，缺失时可降级为纯 CSS 皮肤，降低白屏风险）：
| 插槽 | 作用 |
|---|---|
sidebar.brand.mark / sidebar.brand.name |
自创对话气泡 SVG 标记 + 「豆包」名称（priority:-1 覆盖官方品牌占位） |
conversation.hero.brand.mark |
新会话首页大号标记 |
conversation.hero.options |
四个快捷入口胶囊（文案如「AI 搜索」等，来自官方 HTML 实测） |
settings.section |
「关于」页：能力边界、来源声明、回滚说明 |
图标为仓库内原创内联 SVG，非豆包官方素材。
与同类的关系¶
社区插件 zdz6215591/dsh-theme-doubao 侧重侧栏品牌与新会话页人物/装饰，不改全站配色。dsh-doubao-ui 负责配色、几何、品牌与快捷入口的完整换肤。二者会争抢侧栏品牌插槽，不建议同时启用。凡同样覆盖 --dsw-* 的全站皮肤（如 README 提到的 dsh-zcode-ui、dsh-wechat-ui）也应二选一。
安装与启用¶
DSH 引擎要求（见 package.json）：dsh 版本 >=0.2.0-rc.2 且 <0.3.0-0，Node >=20（仅在你从源码自行构建时需要）。
从 GitHub 安装（推荐）¶
下面命令中的 desktop 应换成你实际运行 DSH Web 的 profile；可用 dsh --profile desktop --dump-config 核对。
dsh plugin --profile desktop add github:JAKE1266/dsh-doubao-ui
仓库已提交构建产物 client/client.js，且没有 prepare 脚本，安装过程不会触发编译。
npm 发布后亦可：
dsh plugin --profile desktop add dsh-doubao-ui
生效与自检¶
- 重启 DSH Web（新增 profile bundle 需重启加载器）。
- 浏览器硬刷新（
Ctrl+Shift+R或Cmd+Shift+R）。 - 打开 DevTools：若
<html>出现data-dsh-doubao-skin="1.1.1"（或当前构建标注的版本属性），且<head>内有data-plugin-css="dsh-doubao-ui/skin.css"与.../components.css"的<style>，表示皮肤层与组件层均已挂载。
停用与卸载¶
dsh plugin --profile desktop disable dsh-doubao-ui
dsh plugin --profile desktop remove dsh-doubao-ui
停用或卸载后硬刷新一次，官方界面恢复，无需手工清理配置。
典型用法¶
日常：安装后即用¶
多数用户只需完成上一节的安装与重启，在明暗主题下查看输入框、侧栏与新会话快捷胶囊是否符合预期即可。README 中的预览图由 node scripts/preview.mjs 渲染，仅为配色示意，真实效果以启用插件后的 DSH Web 为准。
自定义配色与文案¶
设计值集中在 src/tokens.mjs，组件逻辑在 src/components.mjs。常见修改入口：
| 目标 | 文件/字段 |
|---|---|
| 品牌主色 | LIGHT/DARK['--dsw-alias-brand-primary'] 及 --db-* 私有变量 |
| 背景与卡片 | --dsw-alias-bg-* |
| 圆角、阴影、字号 | STRUCTURAL、STRUCTURE_CSS |
| 快捷入口文案 | QUICK_ACTIONS |
| 品牌图标 | src/artwork.mjs 的 MARK_SVG |
改完后需重新构建并跑校验（维护者流程）：
node scripts/build.mjs
node test/run-all.mjs
test/run-all.mjs 为零依赖套件，README 写明 19 项检查，含亮/暗令牌键集合一致（208 个令牌）、样式注入幂等与 React 缺失时组件层降级等。
排错¶
装完无变化时：确认 profile 与正在运行的 DSH Web 一致 → 重启 DSH → 硬刷新 → 在 dsh --profile desktop --dump-config 输出中确认已列出 dsh-doubao-ui。
适用场景与注意¶
适合谁：在 DSH Web 上长时间对话、希望界面更接近豆包式蓝调与大圆角、且接受非官方视觉再设计的用户或团队；需要与官方 DSH 升级路径兼容、停用即可回滚的场景。
不适合或需谨慎：
- 已与
dsh-theme-doubao或其他全站--dsw-*皮肤同时启用——后加载者胜出，界面不可预测。 - 指望插件改模型行为、会话存储或工作区文件——超出边界。
- 未审阅源码即在生产环境批量下发——插件随 DSH 进程权限执行，安装前应自行检查仓库与许可证。
色板为「inspired-by」再设计，映射细节见仓库 docs/DESIGN.md，非豆包官方设计资产复刻。
结尾¶
dsh-doubao-ui 用纯 CSS 令牌覆盖换掉 DSH Web 全站观感，并用少量插槽补上品牌与首页快捷入口；不碰数据、不联网，停用可恢复官方界面。若你在找豆包风格的趣味换装而非另一套业务逻辑，可从 GitHub 安装并在正确 profile 下重启验证。
