前言¶

在智能體開發流程中，界面交互的細節往往決定了長時間使用的舒適度。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。