前言¶

在智能体开发流程中，界面交互的细节往往决定了长时间使用的舒适度。DeepSeek Harness（DSH）默认提供的界面相对简洁，但对部分开发者而言，希望进一步调整任务面板、输入栏、侧栏等区域的材质与动效，以适应个人偏好或工作流习惯。

是什么¶

dsh-ui-beautify 是一个为 DeepSeek Harness 提供独立任务面板、输入栏与侧栏材质，以及背景、主题切换和对话动效的插件。插件标识统一为 dsh-ui-beautify，仓库与包名亦为此。旧版 dsh-claude-beautify 的本机偏好会自动迁移。代码采用 MIT 许可证，可选鲸鱼娘素材为 CC BY-NC-SA 4.0。

核心功能¶

插件在设置入口 设置 → dsh-UI美化 下提供七个分类的配置项：

1. 任务面板
   - 右上角显示任务进度、输出文件、工具与资源摘要
   - 支持悬停预览或点击固定
   - 可按当前轮或全部轮次浏览
   - 选择卡片材质、宽度（280–480px）、默认 2/3 步和栏目开合

2. 输入栏
   - 独立选择输入框材质
   - 独立开启小按钮 Lens 玻璃
   - 选择对话是否滚到输入栏后方
   - 保留原生输入、模型选择、录音、发送和停止操作

3. 侧栏
   - 独立选择侧栏材质和切换动效
   - 左右面板覆盖主屏幕或恢复并排布局
   - 顶部标题、标签与正文对齐，显示实际所属项目
   - 圆角和选中反馈跟随明暗主题

4. 开屏欢迎
   - 原生 Logo、欢迎文字、本机字体和书写速度
   - 可导入自己的图片、动图或视频，直接预览

5. 全图背景
   - 本机图片、视频与 HTML 素材库
   - 日夜主题分别记住选择、启用状态和上一张
   - 调整可见度、模糊、铺放、位置和视频声音

6. 粒子背景
   - 支持使用 DeepSeek Logo、鲸鱼娘、自定义图片或 SVG
   - 粒子数量 500–20000 颗
   - 手动调整成形进度，或跟随真实上下文占用
   - 设置开始显示与完整成形阈值
   - 成形后保持粒子漂浮

7. 对话动效
   - 默认、轻盈卡片、极简分隔
   - 用户消息气泡的 QQ 蓝、便签、玻璃和自定义 CSS
   - 艺术字、自定义分隔动图和 CSS
   - 新消息入场预览与开关

此外，顶部提供 日夜主题开关 和 专注模式。专注模式暂时收起输入栏、侧栏、会话标题与浮动面板，将标签和顶部操作收成一行，让正文向上扩展。标签沿正文实际左边缘对齐，工具保留在右上角。

安装与启用¶

插件需要 Node.js 22.13+，宿主范围为 DSH >=0.2.1-rc.2 <0.3.0-0。

普通安装：从本仓库 最新 Release 获取预构建包 dsh-ui-beautify.tgz，在 DSH 插件页按 URL 安装。

Web profile 安装：

dsh plugin --profile web add https://github.com/AumiSatori/dsh-ui-beautify/releases/latest/download/dsh-ui-beautify.tgz

开发者源码链接安装：

git clone https://github.com/AumiSatori/dsh-ui-beautify.git
cd dsh-ui-beautify
node scripts/profile.mjs install --profile desktop
node scripts/profile.mjs check --profile desktop

安装器会登记 link: 依赖、锁文件和 bundle，并建立源码链接。

材质与性能¶

任务面板、输入栏、侧栏分别选择材质，互不绑定，也会分别记住选择。材质选项包括：

• 默认 milk：恢复该区域的原始或基础表面，开销较低
• 透明玻璃 clear：通透表面、边缘折射、高光与交互追光，开销较高
• 轻量玻璃 css：CSS 亮边与轻微背景模糊，开销较低
• 毛玻璃 glass：干净白底、清晰亮边和柔和悬浮阴影，22px 背景模糊，开销随场景变化

小按钮 Lens 是单独的绘制功能，可搭配任意输入框材质。毛玻璃的白底、亮边与阴影参考推理滑块的表面观感。

自定义 CSS¶

在 设置 → dsh-UI美化 → 对话动效 → 用户消息气泡 中选择 自定义 CSS，可载入 QQ、便签或玻璃的完整例子。草稿先在设置页预览，点 保存气泡 CSS 后应用到聊天；切回默认会保留已保存的代码。

示例 CSS：

.bubble {
  background: linear-gradient(135deg, #2673d7, #3455cb);
  color: white;
  border-radius: 20px 20px 6px 20px;
  padding: 12px 18px;
}
.dark .bubble {
  background: #293d70;
}

在 对话动效 → 极简分隔 中，也可使用 CSS 编辑器自定义分隔样式，支持 .line、.brand、.divider 等元素和变量。

设置与素材保存¶

• 材质、布局、动效、面板栏目、粒子与媒体选择：当前浏览器来源的 localStorage["dsh-ui-beautify:settings:v1"]
• 最后打开的美化设置分类：localStorage["dsh-ui-beautify:settings-tab:v1"]
• 背景、开屏媒体、分隔图片、粒子图片与 SVG：当前浏览器来源的 IndexedDB
• 任务、输出与工具摘要：从宿主已加载的会话投影和事件读取，临时状态留在页面内存
• 专注模式、手动浏览历史步骤的位置：当前页面内存

本插件不把展示偏好或本机素材上传到服务器，不另存聊天副本。

配套插件¶

• dsh-settings-groups：设置入口分组、排序、隐藏、搜索、窗口拖动缩放、一级设置页记忆
• dsh-cursor-skin：设置拖动区的鲸鱼娘张手/握拳、图片缩放与部分横向调整指针
• dsh-claude-slider：模型与推理强度选择；本插件提供可选的模型按钮材质适配

卸载¶

node scripts/profile.mjs uninstall --profile desktop

总结¶

dsh-ui-beautify 为 DeepSeek Harness 提供了一套可配置的 UI 美化方案，覆盖任务面板、输入栏、侧栏、背景、粒子与对话动效等多个区域。通过材质选择、CSS 自定义和素材导入，开发者可以根据个人习惯调整界面细节，提升长时间使用的舒适度。插件遵循 MIT 许可证，可在 DSH 插件目录页（https://www.skillhub.cn/plugins/AumiSatori/dsh-ui-beautify）查看详情，源码仓库为 https://github.com/AumiSatori/dsh-ui-beautify。