前言¶

用編碼智能體改前端，卡點經常不在「會不會寫 CSS」，而在描述對不上像素。你在對話裏寫「標題和按鈕太近」「這張卡片的圓角不對」，模型只能靠選擇器和源碼猜測目標；改完刷新一看，動到的往往是旁邊那個同類元素。下一輪再補一句「不是那個，是右上角那個」，上下文越積越長，真正要改的那幾行還是對不齊。

DeepSeek Harness（以下簡稱 DSH）把模型、工具、會話、沙箱和 UI 都做成插件，官方頁面的說法是「一切皆插件」：能力靠配置組合，不必改 Harness 源碼。社區裏因此出現了一批給網頁界面補工作臺的插件。dsh-web-review 做的是更具體的一件事：在 DSH 內置預覽裏點選頁面元素、寫修改意見，必要時先在頁面上試顏色和間距，再把這些可視化反饋交給 Agent，讓它去改當前工作區裏的前端源碼。

本文按插件目錄頁、GitHub 倉庫 README / CONTRIBUTING、npm 包頁交叉覈對後整理：它是什麼、裝哪條命令、頁面上怎麼點、適合什麼場景。目錄站點 deepseek-harness-plugin.com 是社區索引，和 DeepSeek / 幻方沒有官方從屬關係，不要把它當成官方應用商店。

這是什麼¶

dsh-web-review 是一款界面增強插件，由 CanglongCl 維護，源碼在 GitHub 倉庫 CanglongCl/dsh-web-review。目錄頁把它歸在「界面增強」，主要語言是 TypeScript。npm 上的發佈包名是 @canglongcl/dsh-web-review，當前版本 0.3.0（2026-08-17 發佈）。插件清單裏聲明的運行平臺是 web，需要走 DSH 的網頁界面，而不是終端 TUI。

截至 2026-08-17，GitHub 顯示 15 個 star；目錄頁當時仍寫 14，以倉庫頁面爲準。GitHub 的 license 字段爲空，倉庫裏也沒有常見的 LICENSE 文件。目錄頁稱它是社區開源項目、可以查看源碼並免費安裝，但這不等於已經聲明瞭 SPDX 許可證。安裝前應自己讀源碼和使用條款。

它解決的問題可以收成一句話：把「看見圖上哪裏不對」變成 Agent 能定位源碼的批註，而不是隻靠自然語言描述。倉庫 README 自己也寫了參照：如果你用過 v0、Codex 這類編碼 Agent 應用的內置瀏覽器，操作會比較熟悉。

核心功能¶

下面幾項都來自倉庫 README 和 CONTRIBUTING，不是額外發揮。

網頁預覽¶

插件在 DSH 網頁界面裏提供預覽能力，可以打開 Agent 返回的鏈接頁面。也可以自己切到「網頁預覽」Tab，填入頁面的絕對 HTTP(S) URL。評審對象是正在跑的前端頁面，不是靜態截圖。

CONTRIBUTING 補充了預覽隔離方式，對使用者有直接含義：宿主只提供會話控制，不會在宿主 Origin 上直接返回目標頁面內容；每個頂層目標使用短生命週期的 *.localhost Preview Origin；代理不轉發瀏覽器 Cookie 和 Authorization。登錄態、帶鑑權頭的內網頁，不要默認「預覽裏登錄了就等於源站登錄了」。

元素批註¶

進入批註後，可以懸停高亮、點選頁面元素，一次給多個目標加意見。插件會自動附帶選擇器、文本、可訪問名稱和源碼線索，用來幫 Agent 找到對應實現。這些字段是從頁面 DOM 序列化出來的證據，不是保證永遠指向正確文件的絕對座標；源碼錨點缺失時，Agent 仍可能要靠選擇器和文案推斷。倉庫的評測套件專門覆蓋了「錨點可用」和「錨點缺失」兩種情況。

即時視覺調整¶

批註編輯器裏可以展開「調整」，臨時改這些屬性並立刻在預覽裏看到效果：

• 文本、顏色、字體、字號、行高、尺寸、透明度
• 間距、佈局、邊框、圓角、效果

這裏有一條邊界，README 寫得很明確：頁面上的臨時調整不會直接寫入工程。它只是你在預覽裏試值；真正改倉庫文件的是 Agent 收到批註之後，用會話裏已有的文件和 Shell 工具去改源碼。試完覺得顏色不對，重置或取消後，預覽會回到原狀。

批註如何進入對話¶

發送時有兩種方式：

1. 點批註工具欄裏的發送按鈕，發送後界面會自動切回「對話」Tab。
2. 在 DSH 輸入框裏再寫一段提示詞，點 DSH 自己的發送按鈕；批註會隨你的提示詞一起送出。

批註會作爲獨立上下文注入，而不是改寫你輸入框裏的原文。對話裏沿用 DSH 原生摺疊行：收起時顯示頁面和批註數；展開後只展示目標、修改意圖、前後值和可用的源碼線索。CONTRIBUTING 還寫了實現約束：瀏覽器發送的是結構化的 { sessionId, page, comments[] }，由 Node 端校驗後再生成 # Browser comments 上下文；插件不註冊新的模型工具。

內置 UI 優化 Skills¶

插件內置了 Jakub Krehel 的設計 Skills，名稱如下：

• better-ui
• better-typography
• better-layout
• better-writing
• better-accessibility
• better-colors
• better-interface
• interface-review

可以在對話裏用斜槓命令調用，也可以在批註編輯器裏勾選，讓 Agent 在這一輪修改時參考對應規則。這些 Skill 提供的是設計側約束，不是把頁面自動「美化」成某一套皮膚。

面向真實流程的評測¶

倉庫帶了一套評測，用來檢查 Agent 在收到插件生成的頁面批註後，能不能定位源碼並完成前端修改。覆蓋範圍包括：文案 / 樣式 / 佈局 / 響應式、多元素關聯修改、React / Vue / 靜態頁、源碼錨點有無、語義化與無障礙、多輪批註和修改範圍，以及 token、步驟數和耗時。設計和跑法見倉庫的 eval/README.md。本文沒有引用具體分數，評測結果以你本地跑出來的報告爲準。

安裝與啓用¶

目錄頁給出的安裝命令如下，在 DeepSeek Harness 終端裏運行：

dsh plugin add github:CanglongCl/dsh-web-review

這是目錄頁原文，不要自行把倉庫名拼成別的 source。需要可復現安裝時，把 #commit 換成真實提交哈希。對應 npm 上的 0.3.0 發佈提交是 7809b6697c347cc11a6c0d4ba641b80926de3ef6：

dsh plugin add github:CanglongCl/dsh-web-review#7809b6697c347cc11a6c0d4ba641b80926de3ef6

維護者 README 寫的是 Web profile + npm 包名，裝完再啓動網頁界面：

dsh plugin --profile web add @canglongcl/dsh-web-review
dsh web

兩條路徑指向同一倉庫。日常跟目錄頁走 GitHub source 即可；已經在用 web profile、希望直接裝 npm 包時，用 README 這條。包清單裏的 dsh.client.platform 爲 web，裝到非 Web 的 profile 上沒有對應界面可掛。

目錄頁有一條安全說明，安裝任何 DSH 插件時都適用：插件以當前 dsh 進程的權限運行，安裝時可能執行代碼。 裝之前檢查源碼倉庫和許可證；需要可復現時固定 commit，不要長期釘在浮動的默認分支上。

使用方法¶

倉庫 README 給出的操作順序如下。

1. 讓 Agent 啓動要評審的前端頁面，然後點擊它返回的地址。也可以切換到 DSH 的「網頁預覽」Tab，輸入該頁面的絕對 HTTP(S) URL。
2. 點擊批註按鈕，再點擊頁面中的目標元素。可以連續點多個目標。
3. 填寫修改意見。若要先看視覺效果，展開「調整」改屬性，預覽會即時更新。
4. 點批註工具欄的發送按鈕，或在 DSH 輸入框補充提示詞後用 DSH 發送。批註會作爲獨立上下文進入本輪對話。
5. Agent 改完工作區源碼後，刷新預覽驗收。不滿意就再點一輪，不要指望臨時調整會留在工程裏。

一個可復現的最小循環是：本地或 Agent 拉起前端開發服務器 → 把 http://127.0.0.1:<端口> 填進網頁預覽 → 點選按鈕或標題 → 寫清「改成什麼」而不是隻寫「不好看」→ 發送 → 刷新看源碼是否真的改到了對應組件。

需要設計規範時，在批註編輯器裏選一項內置 Skill，例如改字號和行高時選 better-typography，改對比度和無障礙時選 better-accessibility。Skill 名稱以 README 列表爲準。

適用場景與注意事項¶

比較適合這些情況：

• 已經在用 DSH 網頁界面做前端，希望對着真實頁面點選，而不是隻在對話裏描述像素
• 改 React、Vue 或靜態頁的文案、樣式、佈局、響應式，並且工作區就是這份源碼
• 想先在預覽裏試顏色、間距、圓角，確認觀感後再讓 Agent 落盤
• 需要把選擇器、可訪問名稱和源碼線索一併交給模型，減少「改錯同類元素」

使用時注意下面幾條，都有倉庫或目錄頁依據：

1. 只覆蓋 Web GUI。 包聲明 platform: web，README 的啓動命令也是 dsh web。終端 TUI 場景應看別的界面插件，不要指望裝上之後在純終端裏點選 DOM。
2. 臨時調整不等於提交。 預覽裏改過的顏色和間距，刷新或重置後會回到原樣；只有 Agent 改過的工作區文件會留下。驗收以刷新後的頁面和 git diff 爲準。
3. 預覽有隔離邊界。 代理不轉發 Cookie 和 Authorization。需要登錄態的頁面，不要默認預覽會話能帶上你瀏覽器裏的登錄信息。
4. 插件不新增模型工具。 Agent 仍然用當前會話已有的文件和 Shell 能力改代碼。批註質量（目標是否點準、意圖是否寫清、有沒有源碼線索）比再裝一套工具更關鍵。
5. 權限與許可證。 插件與當前 dsh 進程同權。GitHub 截至 2026-08-17 未聲明 SPDX 許可證，安裝前應閱讀源碼；生產或公司環境若有開源合規要求，先確認許可再裝。
6. 目錄頁不是官方商店。 deepseek-harness-plugin.com 是社區索引。安裝命令以該頁原文和倉庫 README 爲準，不要從第三方轉述裏複製經過改寫的 source 字符串。

小結¶

dsh-web-review 給 DSH 網頁界面補上內置預覽和元素批註：點選、寫意見、必要時先試視覺屬性，再把帶選擇器和源碼線索的批註交給 Agent 去改工作區前端。它不替代你做設計決策，也不把預覽裏的臨時樣式直接寫進倉庫。對已經在 DSH Web 裏改頁面的人來說，它主要縮短的是「描述像素 → 對上源碼」這一段。

參考地址：

• 插件目錄頁：https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-web-review/
• GitHub 倉庫：https://github.com/CanglongCl/dsh-web-review
• npm 包：https://www.npmjs.com/package/@canglongcl/dsh-web-review
• DeepSeek Harness 官方說明：https://deepseek.com/harness/
• DeepSeek Harness 源碼：https://github.com/deepseek-ai/deepseek-harness