dsh-reading-comfort

Reading Comfort

DSH Reading Comfort: Rebuild interface hierarchy, apply section-based color coding, and add speaker labels and guiding whitespace to AI responses. Pure CSS, without changing the layout.

Target profile

The plugin will be installed here. Keep web if you are unsure.

npx -y @deepseek-ai/dsh plugin --profile web add github:chaizedong73-arch/dsh-reading-comfort#751421dae588b0f3282867aef847ce74c23de214

README

dsh-reading-comfort

给 DeepSeek Harness(dsh) 换一套「长时间看不累」的界面 —— 配色与几何全部来自对 WorkBuddy 截图的像素级逆向,不是拍脑袋。

纯 CSS + 一次 DOM 标记 + 一个从官方图标抠出来的头像。不改布局结构、不注入可见 DOM、零运行时依赖。

演示

👉 打开交互式演示页 —— 右上角一键切换「原生 dsh ⇄ WorkBuddy 皮肤」,同一个 DOM,两套令牌。

原生 dsh	WorkBuddy 皮肤
before	after

它解决的是什么

dsh 的浅色主题有一个结构性问题 —— 从 app.asar 里读出来的原文:

--dsw-alias-bg-base:    var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50)  /* #f9fafb */

主区、卡片、面板、嵌套层全是同一个 #fff;侧栏只和主区差 2%。 整个界面的明暗阶梯是塌陷的 —— 于是"处处需要眼力去分辨哪里是哪里"。

另外三个同源问题:

/* 表格:没有外框,只有 0.5px 下边线,第一列还贴边 */
._tableScroll_xxx table { border-collapse: collapse }
._tableScroll_xxx th { padding:10px 16px; border-bottom:.5px solid ... }
._tableScroll_xxx td:first-child { padding-left: 0 }

/* "已完成,用时 X" 那一行:33px 高、tertiary 色、带下边线的整宽按钮 —— 像工具栏 */
._4AI11G_root { height:calc(33px + ...); color:var(--dsw-alias-label-tertiary);
                border-bottom:.5px solid ...; display:flex }

/* 会话行是"图标 + 上下两行" */
.S0jZwq_rowContent { flex-direction: column }

逆向出来的设计规格

全部通过逐区域像素采样测得,脚本见 tools/(见文末)。

五级明度阶梯

层级	色值	饱和度	用在哪
① 最亮	`#FFFFFF`	—	输入框 / 卡片
②	`#F5F8F5`	18%	主区底
③	`#E9F1E9`	22%	用户气泡 / 附件卡
④	`#E4ECE5`	17%	侧栏底
⑤ 最深	`#D5E5D6`	24%	侧栏选中行

关键数字

项目	实测
饱和度天花板	24% —— 任何底色不超过它
侧栏行高	40px(文字带中心间距 39~41,极匀)
选中行高度	36px
用户气泡圆角	15px
输入框卡片圆角	42px(含抗锯齿高估,实现取 28)
侧栏宽	345px
正文 / 次要 / 时间戳	`#1A2418` / `#5E615D` / `#707B73`

三条设计原则

饱和度天花板 24%,任何底色不超过它
不用边框分块 —— 侧栏和主区之间连分隔线都没有,全靠底色差
焦点用"最亮 + 最大圆角" —— 输入框是全界面唯一纯白的地方,靠形状跳出,不用彩色

装了什么

区域	改动
层级	五级明度阶梯,替换原来"一片白"的塌陷梯度
侧栏	会话行从"上下两行 + 图标"改成 40px 单行,标题左 / 时间右;去掉侧栏分隔线;选中态 `#D5E5D6`
回答头	"已完成,用时 X" 从工具栏样式改成头像 + 名字 + 元信息,并在下面留 26px 引导留白
输入框	纯白大圆角卡(28px)+ 柔和阴影
表格	1px 外框 + 圆角 + 表头底色 + 恢复第一列内边距
代码块 / 引用块	加边界与底色
排版	行高 1.85;段落 16→10px;标题上 32→24px;h1 落差 12→5px

深色模式不碰,保持官方原样。

安装

# 1. 把插件放到任意目录,例如 ~/.dsh/plugins/dsh-reading-comfort
# 2. 执行安装脚本
powershell -ExecutionPolicy Bypass -File install.ps1 -Profile desktop
# 3. 完全退出并重开 DeepSeek Harness

install.ps1 做三件事,并留下备份:

dependencies["dsh-reading-comfort"] = "link:<本目录>"
追加进 dsh.profile.bundles
在 node_modules/ 下建 junction

改东西:刷新页面就行

插件注册了三条热加载路由,启动时注入的那段脚本是极简且永不变化的引导,每次页面加载都去拉最新的文件:

/dsh-reading-comfort/comfort.css
/dsh-reading-comfort/runtime.js
/dsh-reading-comfort/logo.png

改什么	生效方式
第一次安装	完全退出并重开 DSH
之后改 CSS / JS / logo	刷新页面

调参

所有可调数字集中在 comfort.css 最上面那段 :root:

:root {
  /* 背景透明度:WorkBuddy 是实底,默认 1 */
  --dsrc-base-alpha:    1;
  --dsrc-sidebar-alpha: 1;

  /* 五级阶梯 */
  --dsrc-base-rgb:    245 248 245;
  --dsrc-sidebar-rgb: 228 236 229;
  --dsrc-selected-rgb:213 229 214;
  --dsrc-bubble-rgb:  233 241 233;

  /* 点睛色:默认 WorkBuddy 绿;改成 var(--dsrc-blue) 就变蓝色点睛 */
  --dsrc-accent: var(--dsrc-brand-ink);
  --dsrc-blue:   #2d6cfe;

  /* 回答头 */
  --dsrc-head-name:    "DeepSeek";
  --dsrc-head-avatar:  30px;
  --dsrc-head-gap-bot: 26px;   /* ★ 引导留白 */
}

想让壁纸/视频透出来(配合 dsh-video-skin 等):把 --dsrc-base-alpha / --dsrc-sidebar-alpha 改成 0.9 左右即可。本插件用 html:root body:not(...) 的选择器,特异性高于 video-skin, 所以这里说了算。

卸载

powershell -ExecutionPolicy Bypass -File uninstall.ps1 -Profile desktop

或直接恢复 install.ps1 留下的 package.json.<时间戳>.bak。

技术说明

注入通道

webserver/index-inject 推两行:

{ kind: 'style',  text: <comfort.css> }        // 启动快照,保底
{ kind: 'script', placement: 'body', text: <引导脚本> }  // 每次加载拉最新

三条硬约束(踩过):

订阅必须同步注册 —— 注入表只在宿主启动时收集一次
行按数组顺序应用 —— style 必须在 script 之前
绝不能用 kind:'script-src' —— 桌面壳对它 await loadScript(src),失败即 reject, 会把 __DSH_BOOT_READY__ 打掉导致整个应用起不来

路由注册

ctx.inject(['webServer'], (child) => {
  child.effect(() => child.webServer.register({ kind: 'exact', path, handler }))
})

不能用 ctx.get('webServer') —— 服务未就绪时它返回 undefined,会让路由静默地一个都注册不上 (本项目实测踩过:头像加载不出来 + 热加载失效)。

选择器策略

类名用 [class~="..."] 整词匹配 —— CSS Modules 生成的 S0jZwq_row 是整词, 而 [class*="S0jZwq_row"] 会误伤 S0jZwq_rowTitle
回答头按文字内容标记(已完成…用时 / Completed in),不依赖会变的 hash
令牌覆盖的选择器特异性要 明确高于 其他皮肤插件(video-skin 是 (0,1,2))

头像

官方聊天界面没有 assistant 头像这个概念(assistantAvatar 命中 0 次)。所以从 resources/icon.png(官方虎鲸标)用亮度阈值抠出虎鲸、染白、缩成 128px, 以 data URI 内嵌在 CSS 里 —— 不依赖任何路由,保证加载得出来。

发布到 GitHub

仓库已经在本地初始化好(26 个文件全部暂存),只差一个 GitHub 用户名。

第一步:在 GitHub 上建一个空仓库(不要勾 README / .gitignore / License):

https://github.com/new?name=dsh-reading-comfort

第二步:跑这个脚本,它会设身份、提交、加 remote、推送:

.\push-to-github.ps1 -User 你的用户名
# 想换仓库名 / 建私有仓库:
.\push-to-github.ps1 -User 你的用户名 -Repo dsh-skin -Private

第一次推送会弹出浏览器让你授权 —— 凭据由 Windows 凭据管理器保管,脚本本身不接触 token。默认邮箱用 用户名@users.noreply.github.com,不会暴露你的真实邮箱。

⚠️ push-to-github.ps1 是 UTF-8 with BOM 编码。因为文件里有中文, 不加 BOM 的话 PowerShell 5.1 会按 ANSI 解析并报"字符串缺少终止符"。

想让演示页上线:Settings → Pages → Source 选 main / root,然后访问 https://你的用户名.github.io/dsh-reading-comfort/demo/

参考

WorkBuddy 设计规格 —— 完整测量报告
DeepSeek Harness

MIT

README

dsh-reading-comfort

给 DeepSeek Harness(dsh) 换一套「长时间看不累」的界面 —— 配色与几何全部来自对 WorkBuddy 截图的像素级逆向,不是拍脑袋。

纯 CSS + 一次 DOM 标记 + 一个从官方图标抠出来的头像。不改布局结构、不注入可见 DOM、零运行时依赖。

演示

👉 打开交互式演示页 —— 右上角一键切换「原生 dsh ⇄ WorkBuddy 皮肤」,同一个 DOM,两套令牌。

原生 dsh	WorkBuddy 皮肤
before	after

它解决的是什么

dsh 的浅色主题有一个结构性问题 —— 从 app.asar 里读出来的原文:

--dsw-alias-bg-base:    var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50)  /* #f9fafb */

主区、卡片、面板、嵌套层全是同一个 #fff;侧栏只和主区差 2%。 整个界面的明暗阶梯是塌陷的 —— 于是"处处需要眼力去分辨哪里是哪里"。

另外三个同源问题:

/* 表格:没有外框,只有 0.5px 下边线,第一列还贴边 */
._tableScroll_xxx table { border-collapse: collapse }
._tableScroll_xxx th { padding:10px 16px; border-bottom:.5px solid ... }
._tableScroll_xxx td:first-child { padding-left: 0 }

/* "已完成,用时 X" 那一行:33px 高、tertiary 色、带下边线的整宽按钮 —— 像工具栏 */
._4AI11G_root { height:calc(33px + ...); color:var(--dsw-alias-label-tertiary);
                border-bottom:.5px solid ...; display:flex }

/* 会话行是"图标 + 上下两行" */
.S0jZwq_rowContent { flex-direction: column }

逆向出来的设计规格

全部通过逐区域像素采样测得,脚本见 tools/(见文末)。

五级明度阶梯

层级	色值	饱和度	用在哪
① 最亮	`#FFFFFF`	—	输入框 / 卡片
②	`#F5F8F5`	18%	主区底
③	`#E9F1E9`	22%	用户气泡 / 附件卡
④	`#E4ECE5`	17%	侧栏底
⑤ 最深	`#D5E5D6`	24%	侧栏选中行

关键数字

项目	实测
饱和度天花板	24% —— 任何底色不超过它
侧栏行高	40px(文字带中心间距 39~41,极匀)
选中行高度	36px
用户气泡圆角	15px
输入框卡片圆角	42px(含抗锯齿高估,实现取 28)
侧栏宽	345px
正文 / 次要 / 时间戳	`#1A2418` / `#5E615D` / `#707B73`

三条设计原则

饱和度天花板 24%,任何底色不超过它
不用边框分块 —— 侧栏和主区之间连分隔线都没有,全靠底色差
焦点用"最亮 + 最大圆角" —— 输入框是全界面唯一纯白的地方,靠形状跳出,不用彩色

装了什么

区域	改动
层级	五级明度阶梯,替换原来"一片白"的塌陷梯度
侧栏	会话行从"上下两行 + 图标"改成 40px 单行,标题左 / 时间右;去掉侧栏分隔线;选中态 `#D5E5D6`
回答头	"已完成,用时 X" 从工具栏样式改成头像 + 名字 + 元信息,并在下面留 26px 引导留白
输入框	纯白大圆角卡(28px)+ 柔和阴影
表格	1px 外框 + 圆角 + 表头底色 + 恢复第一列内边距
代码块 / 引用块	加边界与底色
排版	行高 1.85;段落 16→10px;标题上 32→24px;h1 落差 12→5px

深色模式不碰,保持官方原样。

安装

# 1. 把插件放到任意目录,例如 ~/.dsh/plugins/dsh-reading-comfort
# 2. 执行安装脚本
powershell -ExecutionPolicy Bypass -File install.ps1 -Profile desktop
# 3. 完全退出并重开 DeepSeek Harness

install.ps1 做三件事,并留下备份:

dependencies["dsh-reading-comfort"] = "link:<本目录>"
追加进 dsh.profile.bundles
在 node_modules/ 下建 junction

改东西:刷新页面就行

插件注册了三条热加载路由,启动时注入的那段脚本是极简且永不变化的引导,每次页面加载都去拉最新的文件:

/dsh-reading-comfort/comfort.css
/dsh-reading-comfort/runtime.js
/dsh-reading-comfort/logo.png

改什么	生效方式
第一次安装	完全退出并重开 DSH
之后改 CSS / JS / logo	刷新页面

调参

所有可调数字集中在 comfort.css 最上面那段 :root:

:root {
  /* 背景透明度:WorkBuddy 是实底,默认 1 */
  --dsrc-base-alpha:    1;
  --dsrc-sidebar-alpha: 1;

  /* 五级阶梯 */
  --dsrc-base-rgb:    245 248 245;
  --dsrc-sidebar-rgb: 228 236 229;
  --dsrc-selected-rgb:213 229 214;
  --dsrc-bubble-rgb:  233 241 233;

  /* 点睛色:默认 WorkBuddy 绿;改成 var(--dsrc-blue) 就变蓝色点睛 */
  --dsrc-accent: var(--dsrc-brand-ink);
  --dsrc-blue:   #2d6cfe;

  /* 回答头 */
  --dsrc-head-name:    "DeepSeek";
  --dsrc-head-avatar:  30px;
  --dsrc-head-gap-bot: 26px;   /* ★ 引导留白 */
}

卸载

powershell -ExecutionPolicy Bypass -File uninstall.ps1 -Profile desktop

或直接恢复 install.ps1 留下的 package.json.<时间戳>.bak。

技术说明

注入通道

webserver/index-inject 推两行:

{ kind: 'style',  text: <comfort.css> }        // 启动快照,保底
{ kind: 'script', placement: 'body', text: <引导脚本> }  // 每次加载拉最新

三条硬约束(踩过):

订阅必须同步注册 —— 注入表只在宿主启动时收集一次
行按数组顺序应用 —— style 必须在 script 之前
绝不能用 kind:'script-src' —— 桌面壳对它 await loadScript(src),失败即 reject, 会把 __DSH_BOOT_READY__ 打掉导致整个应用起不来

路由注册

ctx.inject(['webServer'], (child) => {
  child.effect(() => child.webServer.register({ kind: 'exact', path, handler }))
})

不能用 ctx.get('webServer') —— 服务未就绪时它返回 undefined,会让路由静默地一个都注册不上 (本项目实测踩过:头像加载不出来 + 热加载失效)。

选择器策略

类名用 [class~="..."] 整词匹配 —— CSS Modules 生成的 S0jZwq_row 是整词, 而 [class*="S0jZwq_row"] 会误伤 S0jZwq_rowTitle
回答头按文字内容标记(已完成…用时 / Completed in),不依赖会变的 hash
令牌覆盖的选择器特异性要 明确高于 其他皮肤插件(video-skin 是 (0,1,2))

头像

发布到 GitHub

仓库已经在本地初始化好(26 个文件全部暂存),只差一个 GitHub 用户名。

第一步:在 GitHub 上建一个空仓库(不要勾 README / .gitignore / License):

https://github.com/new?name=dsh-reading-comfort

第二步:跑这个脚本,它会设身份、提交、加 remote、推送:

.\push-to-github.ps1 -User 你的用户名
# 想换仓库名 / 建私有仓库:
.\push-to-github.ps1 -User 你的用户名 -Repo dsh-skin -Private

⚠️ push-to-github.ps1 是 UTF-8 with BOM 编码。因为文件里有中文, 不加 BOM 的话 PowerShell 5.1 会按 ANSI 解析并报"字符串缺少终止符"。

想让演示页上线:Settings → Pages → Source 选 main / root,然后访问 https://你的用户名.github.io/dsh-reading-comfort/demo/

参考

WorkBuddy 设计规格 —— 完整测量报告
DeepSeek Harness

MIT

Reading Comfort

Reading Comfort

README

dsh-reading-comfort

演示

它解决的是什么

逆向出来的设计规格

五级明度阶梯

关键数字

三条设计原则

装了什么

安装

改东西:刷新页面就行

调参

卸载

技术说明

注入通道

路由注册

选择器策略

头像

发布到 GitHub

参考

Compatibility and provenance

Versions

Related plugins

Related plugins

Related plugins

README

dsh-reading-comfort

演示

它解决的是什么

逆向出来的设计规格

五级明度阶梯

关键数字

三条设计原则

装了什么

安装

改东西:刷新页面就行

调参

卸载

技术说明

注入通道

路由注册

选择器策略

头像

发布到 GitHub

参考