dsh-skin-center

Readme

# dsh-skin-center | DeepSeek Harness 皮肤中心(官方插件)

<div align="center">

**给 DeepSeek Harness 换肤的官方插件:一行命令安装,不改宿主源码,`npx` 用户可用。**

35 套内置皮肤(含 14 套开发者经典配色)+ 一张图自定义 + **皮肤包导入/导出**,多标签实时同步,首屏零闪屏。

*An out-of-tree plugin bundle for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness): 21 built-in skins plus one-image custom themes. One command to install, zero host source patches.*

[快速开始](#快速开始) · [功能](#功能) · [它长这样](#它长这样) · [内置 21 套](#内置-21-套皮肤) · [工作原理](#皮肤是怎么实现的) · [致谢与许可](#致谢与许可)

</div>

> 🌐 **在线皮肤画廊**:35 套皮肤逐一预览 + 一键复制安装命令 → **[harnessskins.com](https://harnessskins.com/?utm_source=github&utm_medium=readme&utm_campaign=dsh-skin-center)**

> **归因**:本仓库是 [HeiGeAi/deepseek-harness-skin](https://github.com/HeiGeAi/deepseek-harness-skin)(MIT)的**插件化再实现**——21 套皮肤、取色算法与共享 chrome 样式源自原项目并保留其许可与素材登记(见 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) 与 [ASSET_PROVENANCE.md](ASSET_PROVENANCE.md));插件架构(DOM 运行时盖章、自有路由与持久化、`__ModuleLoader__` 浏览器半)为本仓库新增。向原项目致谢,换肤想法与皮肤设计属于它的作者。

## 快速开始

要求:DeepSeek Harness `0.1.0-rc.6` 及以上、机器上有 pnpm。

```bash
dsh plugin --profile web add dsh-skin-center
dsh web
```

没有全局 `dsh` 命令就先 `npx @deepseek-ai/dsh@latest`,或把第一行换成 `npx @deepseek-ai/dsh plugin --profile web add dsh-skin-center`。装完打开 `http://127.0.0.1:3080`,**设置 → 通用设置 → 皮肤**,点一下就换。

升级与卸载同样一行:

```bash
dsh plugin --profile web update dsh-skin-center   # 升级
dsh plugin --profile web remove dsh-skin-center   # 卸载(选择与自定义图保留在 ~/.dsh/skins/)
```

## 功能

- **加法安装**:官方外观行(浅色/深色/跟随系统)原样保留,皮肤行出现在它下面;默认「默认」,装完不改变任何现有外观。
- **零宿主源码改动**:不覆盖任何宿主文件、不打源码补丁。界面钩子(消息气泡、会话面板、视图页签、主按钮、详情栏、应用框架)由插件在浏览器**运行时盖章**;宿主升级最坏情况是个别效果暂时退化为纯换肤,不会装不上。
- **35 套皮肤**:ACG 系(QQ 怀旧、初音、原神、火影等 21 套,源自上游项目)+ **开发者经典 14 套**(Gruvbox、Nord、Dracula、Tokyo Night、Solarized、One Dark/Light、Rosé Pine、Catppuccin——全部为开源配色)。
- **皮肤包导入/导出**:一个 JSON 就是一套皮肤(四色种 + 外观 + 边框),导入即用、导出即分享——社区可以互相传皮肤包。
- **一张图自定义**:传一张自己的图,取色派生全自动。
- **首屏零闪屏**:换肤选择持久化在 `~/.dsh/skins/selection.json`,Host 在 HTML 里内联首屏配色与属性。
- **多标签同步**:BroadcastChannel,一个标签换肤,所有标签实时跟随。
- **QQ/XP 标题栏**:chrome 皮肤激活时出现,可收起、可开合侧栏。

## 它长这样

侧栏、输入框、会话列表都是 DSH 原生控件,功能一点没动。

| QQ 2008 · 粉 | 初音未来 |
| --- | --- |
| ![QQ 2008 粉色皮肤](docs/images/qq2008.webp) | ![初音未来皮肤](docs/images/miku.webp) |

| 原神 · 璃月夜 | 鸣潮 · 黑青 |
| --- | --- |
| ![原神璃月夜皮肤](docs/images/genshin-dark.webp) | ![鸣潮黑青皮肤](docs/images/waves-1.webp) |

| 皮肤选择器 | 自定义(选图) |
| --- | --- |
| ![皮肤选择器与版本条](docs/images/skin-center.webp) | ![自定义皮肤效果](docs/images/custom.webp) |

## 用一张图做你自己的皮肤

皮肤选择器的第一项就是「自定义(选图)」,选一张 PNG、JPG 或 WebP,剩下的全自动:浏览器本地 96px 采样取色、按画面明暗自动调蒙版浓度保证文字可读、1920px 长边重编码成 WebP 按内容哈希存进 `~/.dsh/skins/`。**原图不出本机**,上传只走同一台机器上的 DSH Host。

## 内置 21 套皮肤

| # | 皮肤 | 外观 | 边框风格 |
| --- | --- | --- | --- |
| 1 | QQ 2007 | 浅色 | flat |
| 2 | QQ 2008 · 粉 | 浅色 | glass |
| 3 | 初音未来 | 浅色 | neon |
| 4 | 原神 · 蒙德 | 浅色 | glass |
| 5 | 原神 · 璃月夜 | 深色 | neon |
| 6 | 恋与深空 · 星海 | 浅色 | glass |
| 7 | 恋与深空 · 星际 | 深色 | neon |
| 8 | 火影 · 鸣人 | 深色 | glass |
| 9 | 火影 · 佐助 | 深色 | neon |
| 10 | 鸣潮 · 黑青 | 深色 | neon |
| 11 | 鸣潮 · 深紫 | 深色 | glass |
| 12 | 龙珠 · 筋斗云 | 浅色 | glass |
| 13 | 龙珠 · 超赛 | 浅色 | neon |
| 14 | 大佬 · 烟灰 | 深色 | glass |
| 15 | DeepSeek 娘 · 深海 | 深色 | neon |
| 16 | DeepSeek 娘 · Q 版 | 浅色 | glass |
| 17 | DeepSeek 青春版 | 浅色 | glass |
| 18 | 内测大佬 | 深色 | neon |
| 19 | 别影响 AGI | 浅色 | glass |
| 20 | 峰哥骑鲸 | 浅色 | flat |
| 21 | 梁圣 · 静音 | 浅色 | glass |

QQ 2007 / QQ 2008 是**纯配色皮肤**(零位图,构建期由四个色种推导整条色阶),其余 19 套各配一张背景图。

### 开发者经典包(v2.1 起,14 套)

 Gruvbox Dark · Gruvbox Light · Nord · Dracula · Tokyo Night · Tokyo Night Storm · Solarized Dark · Solarized Light · One Dark · One Light · Rosé Pine · Rosé Pine Dawn · Catppuccin Mocha · Catppuccin Latte

全部采用开源社区经典配色,纯色阶、零位图、零 IP 风险——终端美学路线。皮肤包本体可通过「导出皮肤包」一键拿到 JSON,改四个色种就是你的新皮肤,再导入回来即可。

## 皮肤是怎么实现的

一套皮肤 = 一份 JSON(四个色种 + 外观 + 边框风格)。构建期从色种**保对比度推导**出完整色阶(OKLab 空间计算,保持与原生色板每级的对比关系),21 套 × 8 项对比度契约不达标直接构建失败;所有规则收口在 `body[data-dsh-skin]` 属性下,切回「默认」即刻还原、零残留;背景层固定视口,开会话、滚长对话、开合侧栏都不动。

想加皮肤:往 `src/styles/skins/themes/` 扔一份 JSON,跑 `npm run build:skins && npm run build`。

插件架构三件事:

1. **宿主半**(Node):注册皮肤 CSS / 背景图 / 选择读写 / 更新检查四组路由,并在 index HTML 里内联首屏配色(tapIndex,先于任何 JS)。
2. **浏览器半**:`__ModuleLoader__` 包裹的 CJS bundle,经官方浏览器名册(`/plugins/<id>/client.js`)加载;负责设置行(`settings.general.item` 插槽)、DOM 盖章、标题栏 DOM 岛与跨标签广播。
3. **持久化**:自有文件 `~/.dsh/skins/selection.json`(宿主的浏览器 settings RPC 目前对第三方命名空间白名单关闭,插件自带状态通道)。

## 版本与更新检查

设置面板底部显示「皮肤系统 vX.Y.Z · DSH <宿主版本>」,「检查更新」由 Host 侧代理请求 GitHub Releases(浏览器不直连第三方);发现新版时按钮变为「复制更新指令」,粘出来就是一条 `dsh plugin --profile web update dsh-skin-center`。

## 从源码构建

```bash
npm install       # esbuild 等构建依赖
npm run build     # → lib/(宿主半 ESM + 浏览器半包裹 bundle + 拍平的 skins.css)
npm run build:skins  # 改了 themes/*.json 后重新生成
```

本地试装:`dsh plugin --profile web add file:$(pwd)`。

## 致谢与许可

- **上游**:皮肤引擎、21 套皮肤与取色算法来自 [HeiGeAi/deepseek-harness-skin](https://github.com/HeiGeAi/deepseek-harness-skin)(MIT),其幕后文章值得一读:[DeepSeek 刚开源的 DSH 已经 5 万星,我给它做了 21 套皮肤](https://mp.weixin.qq.com/s/o6HdY5zi-e3gCkB_-HUKMA)。
- 代码遵循原 [MIT License](LICENSE);第三方代码许可见 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)。
- 皮肤背景图的来源与再分发状态逐文件登记在 [ASSET_PROVENANCE.md](ASSET_PROVENANCE.md),发布边界见 [NOTICE.md](NOTICE.md)。MIT 只覆盖代码,不授权角色、商标或第三方视觉素材——商用前请自行核对素材许可。
- 本项目与 DeepSeek 官方无隶属关系。