前言¶
DeepSeek Harness（DSH）把 Web 殼、主題和若干界面能力都做成可插拔擴展。開發者或日常用戶若只想在不動模型、不碰會話數據的前提下，讓界面更接近自己習慣的配色與佈局，往往需要找一套只覆蓋視覺層、停用時能完整回滾的皮膚插件。
社區裏已有隻換側欄品牌圖標的主題類插件；若你希望連全站配色、圓角幾何、新會話快捷入口一併調整，第三方維護的 dsh-doubao-ui 走的是「CSS 語義令牌覆蓋 + 聲明式 React 插槽」路線，零 npm 運行時依賴，適合在 desktop 等 profile 下單獨啓用、按需停用。
這是什麼¶
dsh-doubao-ui（倉庫 JAKE1266/dsh-doubao-ui）由維護者 JAKE1266 發佈，歸類爲趣味換裝類 DSH 插件。簡介是：爲 DeepSeek Harness Web 提供豆包視覺靈感驅動的皮膚——純 CSS token 覆蓋，無額外依賴。
需要 upfront 說明：README 標明這是非官方第三方插件，與字節跳動 / 豆包、DeepSeek 均無授權或背書；只改 Web 界面，不讀寫文件、不聯網、不註冊工具、不接觸模型與會話內容。插件以當前 DSH 進程權限運行，安裝前建議瀏覽源碼與 MIT 許可證。
目錄頁：skillhub.cn 插件條目。截至社區目錄信息，倉庫約 1 star。
核心功能¶
自 v1.1.0 起，插件分兩層工作（當前 package 版本爲 1.2.0）。
第一層：皮膚（CSS 變量）¶
DSH Web 的全站外觀由 body 上的 --dsw-alias-*、--dsw-static-*、--dsw-specific-* 等語義變量驅動。本插件在這些變量層做覆蓋，主要包括：
- 配色：豆包藍主色與中性灰面，亮/暗兩套色板隨宿主
body[data-ds-dark-theme]切換。 - 幾何：大圓角（例如氣泡 16px、卡片/輸入框 20px、按鈕 10px、快捷膠囊 9999px）與偏軟的陰影。
- 輸入與膠囊：大圓角輸入卡、focus 藍色柔光環、發送鍵品牌漸變；首頁快捷膠囊支持 hover/選中態品牌色。
- 排版與可訪問性：15px 基線字號、CJK 字體回退；尊重
prefers-reduced-motion，不破壞宿主「僅鍵盤顯示焦點環」邏輯。
實現上選用 :root:root 等穩定錨點抬高選擇器優先級，避免依賴宿主 CSS Module 哈希類名，便於 DSH 升級。
第二層：組件（React 插槽）¶
在皮膚之上，向宿主插槽注入少量 UI（React 由 DSH 提供，插件不在模塊頂層強依賴 require('react')，缺失時可降級爲純 CSS 皮膚，降低白屏風險）：
| 插槽 | 作用 |
|---|---|
sidebar.brand.mark / sidebar.brand.name |
自創對話氣泡 SVG 標記 + 「豆包」名稱（priority:-1 覆蓋官方品牌佔位） |
conversation.hero.brand.mark |
新會話首頁大號標記 |
conversation.hero.options |
四個快捷入口膠囊（文案如「AI 搜索」等，來自官方 HTML 實測） |
settings.section |
「關於」頁：能力邊界、來源聲明、回滾說明 |
圖標爲倉庫內原創內聯 SVG，非豆包官方素材。
與同類的關係¶
社區插件 zdz6215591/dsh-theme-doubao 側重側欄品牌與新會話頁人物/裝飾，不改全站配色。dsh-doubao-ui 負責配色、幾何、品牌與快捷入口的完整換膚。二者會爭搶側欄品牌插槽，不建議同時啓用。凡同樣覆蓋 --dsw-* 的全站皮膚（如 README 提到的 dsh-zcode-ui、dsh-wechat-ui）也應二選一。
安裝與啓用¶
DSH 引擎要求（見 package.json）：dsh 版本 >=0.2.0-rc.2 且 <0.3.0-0，Node >=20（僅在你從源碼自行構建時需要）。
從 GitHub 安裝（推薦）¶
下面命令中的 desktop 應換成你實際運行 DSH Web 的 profile；可用 dsh --profile desktop --dump-config 覈對。
dsh plugin --profile desktop add github:JAKE1266/dsh-doubao-ui
倉庫已提交構建產物 client/client.js，且沒有 prepare 腳本，安裝過程不會觸發編譯。
npm 發佈後亦可：
dsh plugin --profile desktop add dsh-doubao-ui
生效與自檢¶
- 重啓 DSH Web（新增 profile bundle 需重啓加載器）。
- 瀏覽器硬刷新（
Ctrl+Shift+R或Cmd+Shift+R）。 - 打開 DevTools：若
<html>出現data-dsh-doubao-skin="1.1.1"（或當前構建標註的版本屬性），且<head>內有data-plugin-css="dsh-doubao-ui/skin.css"與.../components.css"的<style>，表示皮膚層與組件層均已掛載。
停用與卸載¶
dsh plugin --profile desktop disable dsh-doubao-ui
dsh plugin --profile desktop remove dsh-doubao-ui
停用或卸載後硬刷新一次，官方界面恢復，無需手工清理配置。
典型用法¶
日常：安裝後即用¶
多數用戶只需完成上一節的安裝與重啓，在明暗主題下查看輸入框、側欄與新會話快捷膠囊是否符合預期即可。README 中的預覽圖由 node scripts/preview.mjs 渲染，僅爲配色示意，真實效果以啓用插件後的 DSH Web 爲準。
自定義配色與文案¶
設計值集中在 src/tokens.mjs，組件邏輯在 src/components.mjs。常見修改入口：
| 目標 | 文件/字段 |
|---|---|
| 品牌主色 | LIGHT/DARK['--dsw-alias-brand-primary'] 及 --db-* 私有變量 |
| 背景與卡片 | --dsw-alias-bg-* |
| 圓角、陰影、字號 | STRUCTURAL、STRUCTURE_CSS |
| 快捷入口文案 | QUICK_ACTIONS |
| 品牌圖標 | src/artwork.mjs 的 MARK_SVG |
改完後需重新構建並跑校驗（維護者流程）：
node scripts/build.mjs
node test/run-all.mjs
test/run-all.mjs 爲零依賴套件，README 寫明 19 項檢查，含亮/暗令牌鍵集合一致（208 個令牌）、樣式注入冪等與 React 缺失時組件層降級等。
排錯¶
裝完無變化時：確認 profile 與正在運行的 DSH Web 一致 → 重啓 DSH → 硬刷新 → 在 dsh --profile desktop --dump-config 輸出中確認已列出 dsh-doubao-ui。
適用場景與注意¶
適合誰：在 DSH Web 上長時間對話、希望界面更接近豆包式藍調與大圓角、且接受非官方視覺再設計的用戶或團隊；需要與官方 DSH 升級路徑兼容、停用即可回滾的場景。
不適合或需謹慎：
- 已與
dsh-theme-doubao或其他全站--dsw-*皮膚同時啓用——後加載者勝出，界面不可預測。 - 指望插件改模型行爲、會話存儲或工作區文件——超出邊界。
- 未審閱源碼即在生產環境批量下發——插件隨 DSH 進程權限執行，安裝前應自行檢查倉庫與許可證。
色板爲「inspired-by」再設計，映射細節見倉庫 docs/DESIGN.md，非豆包官方設計資產復刻。
結尾¶
dsh-doubao-ui 用純 CSS 令牌覆蓋換掉 DSH Web 全站觀感，並用少量插槽補上品牌與首頁快捷入口；不碰數據、不聯網，停用可恢復官方界面。若你在找豆包風格的趣味換裝而非另一套業務邏輯，可從 GitHub 安裝並在正確 profile 下重啓驗證。
