dsh-pixel-ui

🪵 dsh-pixel-ui

DeepSeek Harness 像素皮肤（Agent Xi 风格）：五个主题一键切换——像素·木屋 / 像素·羊皮纸 / 像素·暖阳 / 像素·终端绿 / 像素·木刻，随时可切回现代默认 UI。

Overview

dsh-pixel-ui 是一个皮肤插件，把 dsh Web GUI 重皮肤成像素 RPG 风：

1. 五个主题：像素·木屋（深木 + 金）、像素·羊皮纸（浅色纸面 + 金棕）、像素·暖阳（暖橙木）、像素·终端绿（终端绿字）、像素·木刻（真 PNG 9-slice 木框 + 奶油面板）；
2. 像素质感：前四套完全平面——整像素 2px 描边、平涂色块的一档明度差、2px 棋盘抖动、手绘 SVG 像素图形（对勾/单选点/下拉箭头/光标），零 box-shadow 与 text-shadow；木刻是唯一例外，它故意使用 Complete UI 素材自带的浮雕边框（CC BY 4.0，见下方授权），作为「真素材」分支；
3. 细节与动感：所有动效走 steps() 阶梯（80/140/220ms），按下 1px 位移、页签下划线逐格生长、思考中闪烁光标、运行中左条呼吸、toast 三帧进入；另有主题化勾/点、代码块终端顶栏、表格斑马纹、吸顶标题底线、滚动条握把、纸面专用深色光标。prefers-reduced-motion 下一律关闭；
4. 桌面端友好：内容列宽随视口撑开（clamp(680px, 64vw - 140px, 1200px)，窄屏仍是宿主原本的 680px），皮肤选择在 dsh-app:// 页面上也能恢复。

适合谁：想要像素风 / 星露谷风 / 复古终端外观的 dsh 用户；想给会话截图加一点氛围感的博主和开发者。

Themes

像素·木屋 · pixel-wood

深色 · 深木 #1A0F06 + 金 #F4D03F（默认主题）

像素·羊皮纸 · pixel-paper

浅色 · 纸面 #F0E8D8 + 深金棕 #A07000

像素·暖阳 · pixel-warm

深色 · 暖木 #1E0E04 + 橙 #FF8C42

像素·终端绿 · pixel-retro

深色 · 墨绿 #0A0E0A + 绿 #33FF33

像素·木刻 · pixel-woodcut

深色 · 深棕 #24110D + 奶油 #F8E5CF；对话框/菜单/主按钮/输入框/选中行/Toast/滚动条使用 真实 PNG 9-slice（Complete UI · Wood，CC BY 4.0）。

• 面板：panel.png 96×96 → border-image-slice:24 fill；
• 主按钮：button-primary.png 96×32 → slice:8 20、border-width:6px 10px（保留奶油浮雕，又不挤掉文字）；hover/press/lock 三态；
• 输入框：input.png 32×32 → slice:10 fill；选中行：select-bar.png；滚动条：scroll-handle.png；
• 奶油面板内部自动把宿主 label/border/layer 令牌切到深墨色，避免「奶油底 + 奶油字」。

素材：Complete UI Essential Pack v2.4 · 03_Wood_Theme by Crusenho Agus Hennihuno，CC BY 4.0；

只取 7 张切片，完整署名与许可证在

assets/complete-ui/wood/ATTRIBUTION.md。

木刻主题是可选的第五套，前四套仍保持零立体、零阴影。

截图取自 DSH Desktop（1920×1200 @125% 缩放），目前覆盖前四套；木刻主题的实机截图

待重启加载素材路由后补拍。截图由插件市场按本仓库根的

screenshots.json 读取——换图只推自己的仓库，不必提 PR。

Motion & detail

层 · 细节 · 动效 按钮 · 主按钮主题化实心块 + 2px 描边；hover 叠 2px 棋盘 · 80ms steps(2)；按下 1px 位移 页签 · 金色下划线，2→3px · 140ms steps(4) 的 scaleX 会话 / 项目行 · 选中行 hover 提亮；未选行补 2px 金色左条 · 像素手 cursor 全覆盖（含子元素） 面板导航（插件/市场…） · hover 用 --px-wood-mid，纸面不再和侧栏同色；当前项木色底 + 金左条 · hover 再叠 2px dither 页脚菜单（设置/反馈/退出） · 菜单项木色底 + 3px 金左条 + dither；危险项保留红条 · 80ms steps(2)；kbd 只改字体不撑宽 设置页左导航 · 对话框内 hover 用 --px-wood-warm（避免和面板同色）；navList 横向隐藏 · — 输入 · 2px 金框、方块光标、hover 提亮 · 边框 80ms steps(2) 选择件 · 勾/点按主题换色（纸面用纸白） · 80ms steps(2) 代码块 · 终端顶栏、左侧金色运行条、inline code 底色 · — 表格 · 斑马纹 + 行 hover 木色 · — 吸顶标题 · 2px 底线 + 2px 抖动 · — 思考中 · 宿主 shimmer 改 4 帧，左侧 2px 光标闪烁 · 1.2s steps(1) / steps(4) 运行中 · 终端左侧运行条呼吸 · 1.1s steps(2) 状态点 / 转圈 · 方点闪烁；圆形 spinner 改 8 帧旋转 · steps(8) Toast · 2px 框 + 左侧金条 · 220ms steps(3) 进入 滚动条 · 4×2 像素握把 · hover / active 换色 无障碍 · prefers-reduced-motion 下一律关闭 · —

Compatibility

项 · 支持范围 dsh 生态 · 0.1.0-rc.6 ~ 0.2.x（ThemeService register/setTheme + settings.general.item 槽位；0.2.1-rc.3 已按源码逐条核对，并用 0.2.1 真实的 ThemeRuntime 跑通注册/恢复/切换契约；见 docs/dev/迭代记录.md） 兼容声明 · 同时声明 engines.dsh 与 @deepseek-ai/dsh-* peers：0.2.1 的 app-boot 优先读 engines.dsh，dshmarket 的发现页把两者取交集；任一判定器都能过 DSH Desktop · 2.0.x（web 兼容模式/高级模式均适用） 模式 · 四深色 + 一浅色（colorScheme 按主题声明） 浏览器 · 现代 Chromium / Firefox（localStorage + CSS 变量 + SVG 光标） 字体 · fusion-pixel 12px zh_hans（MIT）+ Press Start 2P（OFL），随包分发 对比度 · 五主题全部通过 WCAG AA（正文 ≥4.5:1、非文本 ≥3:1，npm run test:contrast 门禁）

Install / Uninstall

Install

npm（推荐）：

dsh plugin add dsh-pixel-ui

GitHub Releases（无需 npm，同样开箱即用）：

# 下载 Releases 里的 dsh-pixel-ui-<version>.tgz
dsh plugin add ./dsh-pixel-ui-1.7.0.tgz

GitHub 源码（构建产物已随仓库提交，无需构建）：

dsh plugin add github:zhang66633/dsh-pixel-ui

本地开发（link 方式）：

// <profile>/package.json
{
  "dependencies": { "dsh-pixel-ui": "link:<仓库路径>" },
  "dsh": { "profile": { "bundles": ["dsh-pixel-ui"] } }
}

cd <profile> && pnpm install

安装后重启 dsh / DSH Desktop，皮肤才会进入 Loader 组合。

DSH Desktop 用户

1. 托盘右键 → Open DSH Terminal，在终端里执行 dsh plugin add dsh-pixel-ui（自动作用于当前 profile，如 desktop）；
2. 退出并重新打开 DSH Desktop。

主题记忆（桌面端随机端口不再失忆）

DSH Desktop 默认每次启动随机分配本地 Web 端口，而浏览器 localStorage 按 origin（含端口）隔离——旧版本因此会在重启后忘记皮肤选择。v1.4.0 起（v1.5.0 起桌面端改走宿主 index 注入），最后一次选择的主题会同时写入宿主侧文件（$DSH_HOME/storages/dsh-pixel-ui/preference.json，经 /dsh-pixel-ui/preference 路由读写），与端口无关；localStorage 退化为同端口的快速镜像。无需任何配置，固定端口（dsh-desktop.port）现在只是可选项。

Upgrade

• npm：重新运行 dsh plugin add（固定版本号）；
• 本地 link：git pull 后重新构建（npm run build），刷新浏览器。

Disable

只从 dsh.profile.bundles 移除 dsh-pixel-ui（依赖可以保留）——皮肤不再注入，UI 回到现代默认。

Uninstall

从 profile package.json 移除依赖与 bundles 条目，pnpm install。

Quick start

1. 安装后重启 dsh / DSH Desktop；
2. 首次加载自动激活默认主题「像素·木屋」；
3. 设置 → 通用 → 像素主题，五个按钮一键切换四个皮肤和「现代默认」；
4. 选「现代默认」（或外观行选 浅色 / 深色 / 跟随系统）即整体退出皮肤，选择会被记住，下次打开不复活。

最小可复现示例：安装 → 重启 → 木屋主题上身 → 切换到「像素·羊皮纸」→ 输入框文字清晰可读 → 点「现代默认」→ 页面立即回到现代 UI → 刷新页面仍是现代 UI。

Configuration

• 无配置项：五个主题的 16+1 个 --dsw-alias-* token 定义在 src/client/index.js 的 THEMES，像素质感样式在 src/client/pixel.css；
• 默认主题：pixel-wood（仅首次安装时自动激活，之后尊重你的选择）；
• 持久化：双层——宿主文件 $DSH_HOME/storages/dsh-pixel-ui/preference.json（权威，跨端口/跨浏览器）+ 浏览器 localStorage 的 dsh-pixel-ui:theme（同 origin 镜像）；
• 无环境变量、无敏感项。

Permissions & data

• 宿主进程：只读本包内字体文件；在 $DSH_HOME/storages/dsh-pixel-ui/ 下读写一个主题偏好 JSON（仅注册 /dsh-pixel-ui/fonts/* 与 /dsh-pixel-ui/preference 两个路由，字体文件名白名单、主题 id 白名单，均无路径穿越）；
• 浏览器半边：注册主题 + 注入样式表 + 一个设置行；无网络请求、无遥测、不读凭据，只在 localStorage 存一个主题 id。

Troubleshooting

现象 · 处理 皮肤没生效 · dsh --profile --dump-config（DSH Desktop 终端里直接 dsh --dump-config）确认 dsh-pixel-ui 在树；设置 → 通用 → 像素主题 里选一个主题；重启（node 半边改路由后必须重启，client 半边刷新即可） 想回现代默认 · 设置 → 通用 → 像素主题 → 点「现代默认」（或外观行选 浅色/深色/跟随系统） 主题没记住 · 确认浏览器未禁用 localStorage；v1.4.0 起以宿主文件为权威（桌面端经 index 注入下发），检查 $DSH_HOME/storages/dsh-pixel-ui/preference.json 是否存在且内容合法 字体没加载 · 浏览器控制台（F12 → Network）看 /dsh-pixel-ui/fonts/* 是否 200 偏好路由 404 · 宿主还是旧版 node 半边：重启 DSH Desktop；未重启期间功能自动降级为 localStorage 记忆 回滚 · 从 dsh.profile.bundles 移除插件条目并 pnpm install —— profile 其余部分不受影响

Development

npm install
npm run build    # 构建 lib/client.js（wire 格式，CSS 以文本内联）
npm test         # test:compat + test:host + test:client + test:contrast

• scripts/check-compat.mjs：engines.dsh / dsh peers / dshReleases 的声明门禁（0.2.1-rc.3 严格安装路径）
• scripts/test-host.mjs：node 半边（字体白名单 / 木刻素材路由 / 偏好路由读写与校验 / dispose）
• scripts/test-client.mjs：browser 半边（加载真实 lib/client.js，覆盖注册、恢复矩阵、交互、渲染、动效门禁、木刻 9-slice 注入、dispose）
• scripts/audit-contrast.mjs：五主题 WCAG 对比度门禁（改 palette 必跑）

改动皮肤后重新构建并刷新浏览器即可；新增木刻素材路由动了 `lib/index.js`，首次需重启 DSH Desktop。开发文档在 docs/dev/（计划 / 迭代 / 踩坑）。欢迎 PR；行为变更请同步更新 README。

License & security

MIT © 2026 zhang66633 · 字体：fusion-pixel（MIT）、Press Start 2P（SIL OFL）。 pixel-woodcut 的 7 张 Complete UI 切片 © Crusenho Agus Hennihuno，CC BY 4.0，见 assets/complete-ui/wood/ATTRIBUTION.md。

安全问题请通过 GitHub security advisory 私下报告，不要发公开 issue。