前言¶

用 DSH 改前端時，常見流程是：在聊天裏描述「把標題改大一點」「按鈕顏色換成藍色」，模型再去搜文件、改 CSS 或 JSX。問題在於，自然語言很難精確對應到頁面上的某一塊 DOM；改完後你也往往要自己在瀏覽器裏對照，再翻 git diff 確認是否改對了位置。

dsh-revise（倉庫 Lostforest7/dsh-revise）把這一步做成可視化改稿臺：在本地開發頁面上點選元素、寫具體修改說明，經當前 DSH 會話交給智能體改代碼，再用固定視口截圖和源碼 diff 做人工驗收。維護者爲 Lostforest7，在 DSH 社區目錄中歸類爲客戶端插件。

這是什麼¶

一句話：爲 DeepSeek Harness 增加「點選前端元素 → 發送改稿請求 → 對比截圖與代碼 diff → 逐項接受或反饋」的工作流。

插件不單獨申請 API Key，模型憑據仍由 DSH 按官方方式配置。代碼編輯仍由 DSH 會話裏的智能體完成；Revise 負責採集上下文、截圖、記錄與導出報告。

README 寫明：目前僅在 DSH Web 0.2.0-rc.2、Vite 8.3.1 / React 18.3.1、Windows、Node 24.19.0 上做過驗證；界面與報告爲中文。簡單示例在 DeepSeek V4 Pro / Max 上跑通；複雜項目、其他框架或模型、Desktop 及其他 DSH 版本未驗證。

核心功能¶

以下能力均來自項目 README 與 package.json 說明。

• 點選即請求：元素選擇器、頁面摘要、視口座標，以及 JSX 源碼提示一併採集。
• 當前會話交接：可在改稿臺預覽請求，再通過 DSH 常規 prompt 隊列發送。
• 改前改後證據：桌面 1280×800 與移動 390×844 截圖，並對採集到的文本源碼做 diff。
• 人工驗收：對每一項 接受，或 繼續修改 並再次發送；重新採集會清掉先前接受狀態；源碼變化後舊候選不可再接受。
• 本地歷史：修訂記錄寫在項目目錄 .dsh-revise/ 下，按 DSH 會話分隔。
• 可攜帶報告：可下載單文件 HTML；本地另存 report.html、report.md 與 PNG。像素變化百分比僅描述圖像差異，不能單獨證明需求是否實現正確。

Vite 側通過 revise() 橋接注入，且僅在開發服務（apply: 'serve'）生效，不參與生產構建。

安裝與啓用¶

環境要求：Node 24，或 22.x 且 ≥22.19.0（見 package.json 的 engines）。需先按 DSH 官方文檔安裝並配置 Harness。

發行包 未發佈到 npm。可從 v0.1.0-pre 下載 dsh-revise-0.1.0.tgz。

1. 註冊 DSH Web 插件並配置瀏覽器¶

將 tarball 註冊到 Web profile，並指定 Chromium/Chrome 可執行文件；若無本地 Chrome，可用 Playwright 安裝 Chromium：

# Windows 示例：先設置 Chrome 路徑，再啓動 DSH Web
$env:REVISE_CHROMIUM_PATH = "C:\Program Files\Google\Chrome\Application\chrome.exe"
dsh web

註冊插件（路徑改爲本機絕對路徑）：

dsh plugin --profile web add /absolute/path/to/dsh-revise-0.1.0.tgz

文檔要求：在啓動 DSH 之前配置 REVISE_CHROMIUM_PATH，或執行：

npx playwright-core@1.63.0 install chromium

2. 在前端 Vite 項目中安裝並接入¶

在前端工程目錄安裝同一本地包爲開發依賴，並把 .dsh-revise/ 加入 .gitignore：

npm install -D /absolute/path/to/dsh-revise-0.1.0.tgz

在 vite.config.ts 中加入 revise()，並建議固定本地開發地址（與改稿臺創建輪次時使用的 URL 一致）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { revise } from 'dsh-revise/vite'

export default defineConfig({
  plugins: [revise(), react()],
  server: { host: '127.0.0.1', port: 5173, strictPort: true },
})

.dsh-revise/

3. 啓動聯調¶

啓動前端開發服務，再運行 dsh web，在 DSH 中選擇該 Vite 項目，點擊界面右下 Revise 改稿臺。

若從源碼目錄開發，README 允許對 checkout 路徑執行 dsh plugin --profile web add /absolute/path/to/dsh-revise（倉庫含已構建的 lib/）。用戶任務要求不展開 git clone 流程；需要時可參閱倉庫 README 的 Source checkout 小節。

典型用法¶

按 README「Use it」步驟，一輪改稿大致如下。

1. 在 DSH 中打開目錄即爲 Vite 項目的會話，並啓動該項目的開發服務器。
2. 點擊 Revise 改稿臺，用真實的本地開發 URL 創建一輪；插件先採集基線。
3. 點擊 選擇元素，選中 DOM 節點並保存具體修改說明；可對多個元素或移動視口重複。
4. 點擊 發送給 DSH，閱讀生成的請求並確認發送；關閉改稿臺以便跟進會話中的智能體回覆。
5. 待修改完成且 Vite 熱更新穩定後，重新打開該輪，點擊 採集修改後，對比截圖與代碼變更。
6. 對每一項 接受，或 繼續修改 後再發請求；結束時 完成本輪驗收。
7. 需要留檔時使用 導出報告（HTML）；項目內 .dsh-revise/ 仍保留 Markdown 與截圖。

倉庫自帶示例：源碼構建後可在終端分別運行 npm run dev:example 與 npm run dev:workbench，在不接 DSH 的情況下體驗選元素、採集與導出（提供 copy request 而非發送給智能體）。完整 DSH 集成需註冊插件並以 examples/vite-react 作爲 DSH 項目目錄。

適用場景與注意¶

更適合：本地 loopback、顯式端口的 HTTP 開發服；Vite + React 前端；希望在改稿前後用固定視口截圖和 src/、app/、pages/、components/ 等目錄內文本文件 diff 做驗收的團隊或個人。

邊界與限制（README Boundaries）：

• 僅接受顯式端口的 loopback HTTP 目標；截圖使用全新上下文，無登錄 Cookie，且只加載同源資源；依賴遠程 API、CDN、登錄或阻止 iframe 的頁面可能需要額外適配。
• 源碼快照有數量與大小上限（如 500 文件、單文件 512 KB、合計 5 MB）；二進制與環境文件不參與 diff；JSX 提示不保證映射到唯一 CSS 規則。
• 本版本無自動回滾、全頁截圖、多人評審或託管報告服務；導出 HTML 含頁面截圖與源碼 diff，外發前請自行審閱內容。

安全與信任：DSH 插件在當前 dsh 進程權限下運行。安裝前請閱讀 GitHub 倉庫 源碼與 MIT 許可證，並理解 .dsh-revise/ 中會寫入請求、截圖與報告元數據。

DeepSeek Harness 生態強調「一切皆插件」；SkillHub 目錄頁 爲社區站點，與 DeepSeek / 幻方無官方從屬關係，本文不以「官方應用商店」表述。

結尾¶

dsh-revise 把「指哪改哪」和「截圖 + diff 驗收」接到 DSH 現有會話上，減少純文字描述前端位置的成本。當前包版本 0.1.0，預發佈包見 v0.1.0-pre；兼容性與排錯見倉庫 docs/compatibility.md。

• 社區目錄：https://www.skillhub.cn/plugins/Lostforest7/dsh-revise
• GitHub：https://github.com/Lostforest7/dsh-revise