dsh-claude-style

DSH Claude Style

为 DeepSeek Harness Web 复刻 Claude Code Desktop 风格与交互体验的主题插件。

在 DSH 里，就是 Claude Code Desktop 的样子。

预览

设置页「修改品牌标识」可以在 Claude 与 DeepSeek 两套配色之间切换，亮暗跟随系统颜色模式。每组上一行是工作台首页，下一行是一段 Markdown 对话，左亮右暗。

Claude

亮色：象牙白画布 #FCFCFB 与浅色侧栏 #FBFBF9；暗色：暖黑 #141413。陶烬橙 #D97757 是两套画布唯一的操作强调色，工作台首页的输入框上站着 Claude Code 的像素螃蟹。

DeepSeek

亮色：带一点天蓝的亮白 #F7FAFF 与侧栏 #F3F7FE；暗色：蓝黑 #13161D。强调色是 DeepSeek 的品牌蓝 #4D6BFE，首页与对话页的输入框上都站着像素小鲸鱼 Deepy。

截图里的工作区、会话、用量与昵称都是演示用的示例数据。

字体

重要：Anthropic 字体不随 npm 包分发，仅在仓库 fonts/ 供下载——既可以直接安装到系统，也可以免安装：把两个 .ttf 放进插件包的 fonts/ 目录，宿主会以同样的 webfont 方式提供它们（两种方式的字体文件完全一致，效果相同）。生效均需刷新 / 重启 web。

字体	用途	文件
Anthropic Sans Web Text	界面 / UI	fonts/AnthropicSansWebText.ttf
Anthropic Serif Web Text	对话正文 / Markdown	fonts/AnthropicSerifWebText.ttf
JetBrains Mono Variable	代码 / 代码块	fonts/JetBrainsMonoVariable.ttf、fonts/JetBrainsMonoItalicVariable.ttf

Anthropic 字体启用（二选一）：

① 安装到系统——Windows 双击 .ttf → 「安装」，macOS 用「字体册」导入；

② 免安装——把 .ttf 复制到插件包的 fonts/ 目录。完成后刷新页面生效。

Anthropic Sans/Serif 字体版权归 Anthropic 所有，仅供个人使用，不适用 MIT 许可。

安装

需要 dsh ≥ 0.1.7

1. 通过终端安装

dsh plugin --profile web add dsh-claude-style                  # npm 包（推荐）
dsh plugin --profile web add Nwflower/dsh-claude-style         # GitHub 源

2. 通过插件市场安装

同一时刻建议只启用一个主题。安装后重启 dsh web 并刷新页面即生效。

特点

1. 主题 —— 安装即全局生效，无需配置。亮色象牙白 #FCFCFB、暗色暖黑 #141413，两套画布共用同一个操作强调色陶烬橙 #D97757；亮暗跟随系统颜色模式切换。设置页「修改品牌标识」有 DeepSeek / Claude / Anthropic 三档：选 DeepSeek 时整套配色换成蓝色系——强调色换成 DeepSeek 的品牌蓝 #4D6BFE（按钮、开关、勾选、链接与状态行都跟着变），亮色画布从偏黄的象牙白换成带一点天蓝的亮白 #F7FAFF（侧栏 #F3F7FE），暗色画布从暖黑换成蓝黑 #13161D，边框与灰色文字一并换成冷色，用户消息气泡带一点蓝；侧栏与首页保留宿主自己的 DeepSeek 鲸鱼与字标，画成 DeepSeek 蓝，账号行没有头像时、进行中轮次的状态行也改用 DeepSeek 的鲸鱼标。这一档以前叫「关闭」，存下的旧值照样读作 DeepSeek。
2. 输入框 —— 输入框整块重做：权限分段控件（只读 / 编辑 / 自动 / Yolo）与它下方的档位列表、带品牌锁定标的模型触发器、工具栏与状态统计同一行排版，发送键与停止键统一成 7px 圆角。统计句与模型触发器共用一套字号与颜色。权限档位取自宿主的权限目录：宿主配置了哪几档就画哪几档，第三方插件注册的档位（例如 auto mode 插件的 auto-mode）会自动出现在列表里并占用「自动」那一格；列表保持纯文字，档位自己声明的图标不画。切换档位时，高亮块从原档位平滑滑到新档位；设置页里的各组分段控件也是如此。
3. 模型选择器 —— 全新的两级弹层：一级列官方服务与设置页勾选的快捷供应商，「更多模型」二级按供应商分组；每行带厂商锁定标与说明文案，底部是推理等级推条（无极滑动，松手对齐最近档位）与「更多模型」入口。二级底边与一级对齐，一级已显示的供应商不再重复；模型不支持思考时不画推条。悬停停留 100ms 打开、离开 150ms 关闭，两卡之间的空隙不算离开。
4. 工作区 —— 侧栏「工作区」标题改成 进行中 / 已归档 分段控件：进行中沿用宿主的会话树，已归档是皮肤自己的平铺列表（标题、时间、每行「取消归档」与「删除」两个图标按钮）。删除被拒时弹出宿主的 Toast 说明原因：会话仍被应用占用时提示重启后再删除，其余拒绝提示失败原因。行排版与宿主的会话行逐项一致（行 x=12 / 宽 251 / 高 28 / 标题起点 x=36）。切换两种视图时，高亮块在两段之间平滑滑动。
5. 侧栏 —— 新会话与插件两行取 Claude 真机形状：默认无底色、hover 才有底色，新会话的「＋」套一枚圆形底，两行图标 hover 顺时针转 90°（四重对称图形，转回原位）；底部账户抽屉、封号彩蛋一并保留。桌面端的品牌行比宿主原样上移 10px，不再比 Web 端低出一截。鼠标移到侧栏上时，左上角的品牌标志淡出、换成一个搜索框（侧栏收起成窄条时没有），点它或按宿主的搜索快捷键（桌面端 Ctrl+K，Web 端 Ctrl+Alt+K）在窗口上方淡入搜索面板，「工作区」标题行原来的搜索图标不再显示：搜历史会话（按标题、所属工作区名和对话内容：你和模型说过的每句话都算，句子中间的几个中文字也能搜到，不分大小写，行下显示命中的那一句并把命中的字加粗；宿主启动后第一次打开面板时要把全部会话读一遍，约十几秒）、项目、插件、当前会话可用的 Skill 与快捷键，顶部「全部 / 会话 / 项目 / 插件 / Skill / 快捷键」切换分类，搜索框为空时列出最近的五个会话与「新会话 / 插件 / 设置 / 键盘快捷键」几个操作。↑↓ 选择、Enter 打开、Tab 与 Shift+Tab 切换分类、Esc 关闭；选中会话即打开，选中项目在该工作区开新会话，选中插件打开它在插件页的详情，选中 Skill 把 /名称 放到当前会话输入框开头，选中快捷键打开宿主的快捷键列表并筛到这一条。
6. 账号区 —— 昵称与头像各走一条固定顺序。昵称：自定义昵称 → 官方账号昵称 → HDSL 启动器昵称 → 上次探测到的系统用户名 → 本次探测到的系统用户名 → User；头像：官方账号头像 → HDSL 启动器头像 → Claude 徽标。官方账号资料只在启动、热重载、登录与登出时向服务器读取，不轮询；HDSL 契约由宿主半边读一次后经两条只读路由转发（GET /dsh-claude-style/hdsl 回账号元数据、GET /dsh-claude-style/hdsl-skin.png 回头像图片，都不含头像文件的绝对路径，并过宿主的请求栅栏），契约版本读不到或不认识时整组忽略，头像文件被删除时回落到徽标。启动器给的是皮肤贴图而不是成品头像，因此账号位置的头像由贴图裁出：脸部 8×8 贴图块按盒子 1/18 内缩、帽子层铺满整盒，方形绘制不被圆角裁切。账号弹层沿用宿主自带的那一个：宿主的账号行就是入口，弹层里依次是账号头部、其它插件的页脚条目与宿主自己的「设置 / 意见反馈 / 退出登录」，各行的文案、顺序与点击行为保持宿主原样；宿主没有账号区的环境（Web）由插件自建同样外观的弹层。弹层卡片与主画布同色（亮色下为象牙白，DeepSeek 品牌下为天蓝亮白）、宽度与侧栏一致。没有头像时显示品牌标：Claude 与 Anthropic 两档是 Claude 徽标，DeepSeek 档是 DeepSeek 的鲸鱼标。
7. 对话视图 —— 对话 / 轨迹控件在桌面 Windows 标题栏模式下居中常显在标题栏那一行（与新会话按钮同一行）；宽窗口且标题较短时它停在标题那一行，否则留在标题下方自己那一行。切换视图时，高亮块从原标签平滑滑到新标签。进行中、已停止与失败的轮次，状态行跟在这一轮工作的末尾（页脚与排队中的消息在它下面），画成 Claude Code 的样子：进行中是转动的火花标记加「用时 · 输出 tokens · 当前动作」（等待模型、思考中、思考了 N 秒、输出中、准备调用工具、运行工具中），停止或失败后火花静止、文字为「已停止 / 处理失败 · 用时 · 输出 tokens」；DeepSeek 品牌下火花换成 DeepSeek 的鲸鱼标，进行中时它摇摆着游动。正常结束的一轮保留宿主原来的样子与位置。
8. 首页版面 —— 新会话页有两套版面，默认是工作台，在设置页随时切换：经典是居中大标题加输入卡片，标题按时段从一组问候里抽一句（早上、午间、下午、晚上、深夜各有几句，另有几句不分时段），每次回到新会话页换一句；工作台把标题移到左上并固定为一句「What's up next, 用户名？」，输入框改用对话内的单行样式贴住窗口底部、上方一行细边框上下文胶囊，标题与一块 480px 窄栏用量面板贴着输入框左缘排布：概览页签是六个数字格（会话数、消息数、Token 总量、活跃天数、高峰时段、最常用模型）与 26 周按天热力图（等分列方格），模型页签是每天一根按模型颜色堆叠的柱子加一份模型排行（色块、模型名、输入与输出、占比，超过六行折成「再显示 N 个」，展开后可「收起」），右上角的「全部 / 30 天 / 7 天」切换统计范围（高峰时段与趣味行一并跟随）；所选范围内的用量超过一本书时，热力图下方出现倍数趣味行，书目共六十五本（《道德经》到《追忆似水年华》），每次回到新会话页随机换一本。数据由插件的宿主半边汇总：装了 dsh-cost-meter 时直接读它的账本缓存（只读，不写对方文件），没有时读本机会话日志自己算，并按日志的文件大小与修改时间增量缓存；两种来源都按模型给出四类 token、按天给出各模型的 token，同一模型经不同提供方的用量合成一行；账本不记小时，高峰时段始终由本机会话日志按天算出；汇总不可用时面板改用宿主会话列表每行自带的投影值。数字没到之前面板先画骨架，位置在填充前后不变。还没选工作区时（刚打开、尚无会话），用量面板与 Read / Edit / Auto / Yolo 权限分段照常显示，分段停在新会话的默认权限上，点它和点输入框一样打开工作区选择；表示「先选工作区」的虚线框只框住单行输入框本身。窗口高度放不下整块面板时，面板在问候语与输入框之间自己滚动、底边渐隐，页面不会被撑出窗口。工作区选择菜单照 Claude Code 的文件夹菜单绘制：窄卡片、纯文字行排得更紧，每行前面的文件夹图标与「添加工作区…」前的加号都不画，当前工作区仍以强调色勾号标出。
9. 像素螃蟹 —— 工作台版面的新会话页上，输入卡片上沿、靠右的位置站着 Claude Code 的像素螃蟹（经典版面没有）。点它一下、或指针从它身上移开时（页面开着时也会每隔二三十秒自己来一次），它会照 Claude Code 的样子钓一次鱼：眨眨眼，举起鱼竿甩过卡片边沿，跳一下侧过身钓一会儿，再收竿转回正面，逐帧照搬 Claude Code 的动画，前后约三秒半。系统要求减少动态效果时（例如 Windows 关掉了「在 Windows 中显示动画」），它只在被点击时才动。
10. 像素小鲸鱼 Deepy —— 品牌选 DeepSeek 时，螃蟹换成小鲸鱼 Deepy（画在 52×52 的像素格上，每一帧照搬 Deepy 主题包的动图，每帧 50 毫秒）。它在首页（两种版面都有）站在输入卡片上沿、靠右的位置；进入对话后站在整块输入区的上沿（输入卡片连同上面的待办、排队、目标卡片），要你批准、回答问题或审阅计划时，站到替换输入卡片的那块面板上。只有主对话区有它，侧栏里的子代理对话没有。它的动作跟着智能体的工作走：没事时慢慢呼吸、甩尾、眨眼，每隔二三十秒东张西望或开心喷水一次；模型在想或还没开始回答时头顶冒思考云；模型写回答、调用工具时趴在键盘后敲代码，同时有两个会话在干活时戴上耳机摇摆，三个以上戴安全帽砌砖；有子代理在跑时，一个戴耳机、两个以上用尾巴打拍子带小鲸鱼分身；压缩上下文时把碎片吸进肚子；等你批准或回答时摇感叹号铃铛；工具调用失败或这一轮失败时受惊冒烟、眼冒金星；一轮或一次压缩顺利结束时空翻撒彩纸（紧跟在失败之后的完成，等冒烟演完再庆祝）。首页上它看的是整个工作区：有几个会话在干活就按几个会话挑动作，有会话在等你时摇铃，别的会话在后台做完时庆祝。闲下来后一分钟没动鼠标、没按键时它会戴上睡帽睡着，再动一下就惊醒。点它的脸或尾巴会被戳得果冻一样晃，连点四下被挠痒痒，按住往外拖会被拎起来晃荡，松手放回。系统要求减少动态效果时，每个状态只停在一张代表帧上，点它才会动。动图帧图共约 0.4 MB，不打进页面脚本：插件的宿主半边经公开路由 GET /dsh-claude-style/deepy/.png 提供，浏览器在某个动作第一次出现时才下载它的帧图；宿主半边还是旧版（更新插件后没有重启宿主）时读不到帧图，小鲸鱼不出现，控制台留一条提示。

空闲

思考

写回答、调用工具

指挥子代理

等你操作

失败

完成

睡着

停用与卸载

不停用安装、先暂停主题 —— 在 profile 的 cordis.patch.yml（~/.dsh/profiles/web/cordis.patch.yml）中加入：

- id: ui-skin-claude-style
  disabled: true

保存后约 1 秒内热生效，刷新页面即回到原生外观。

dsh plugin --profile web remove dsh-claude-style   # 卸载

然后重启 dsh web；若曾在 cordis.patch.yml 手工添加过本主题的条目，一并删除。

文档

文档	说明
设计令牌	调色板、字体、形状，源码结构与宿主选择器纪律（英文）
架构决策	单文件拼接、单一调度器、特性契约、账号表面等决策与权衡
更新日志	版本历史
贡献指南	如何从 src/ 构建、提交规范与截图/回归工具（英文）

鸣谢

像素小鲸鱼 Deepy 的动画帧图来自 calmly-eating-bugs（@wp3171216237）绘制的 Deepy 小鲸鱼主题包，经作者许可随插件分发。感谢作者！作者贡献的全部 20 个动画的 GIF 放在 showcase/gifs/。

友链

同时启用多个主题？推荐 dsh-skin-manager，在其设置页一键切换所有已安装主题。

想把 Claude Code / Codex 等外部代理的会话历史导入 DSH 接着聊？推荐作者的另一个插件 dsh-chat-import。

Star History