前言¶
用 DeepSeek Harness（DSH）改前端時，常見問題是用文字描述 UI：「中間那塊按鈕看着不對」——Agent 得猜是哪個節點、要改成什麼樣。純截圖能定位區域，卻難帶上可執行的 selector、你在頁面上試過的樣式差分，以及裁剪後的上下文圖。
dsh-redline 是面向 web profile 的客戶端插件：在 Harness 內置瀏覽器打開的頁面上，點選元素、寫評論或現場調樣式，確認後把標註收進輸入框上方的卡片；發送下一條消息時，這些內容會以結構化快照附在對話裏，供 Agent 直接據此改代碼。
這是什麼¶
- 名稱：
dsh-redline（npm 包名與倉庫名一致） - 維護者：klaus-2
- 分類：客戶端（注入 Harness 瀏覽器頁面）
- 許可證：MIT（見倉庫與 npm 元數據）
- 定位：在 Harness 瀏覽器內做可視化評審——選中元素、評論、實時樣式預覽，並把 selector、無障礙信息、裁剪截圖、樣式 before→after、文本修改等一併交給 Agent。
插件以 DSH 的「一切皆插件」方式安裝；社區目錄在 SkillHub 插件頁，與 DeepSeek / 幻方無官方應用商店從屬關係，使用前請自行覈對源碼與許可證。
核心功能¶
以下能力均來自項目 README 與 package.json 說明。
元素標註與兩種 Pin 模式¶
- 在 Harness 瀏覽器渲染的任意頁面上，懸停高亮，點選目標元素。
- 評論模式（
C）：選中後寫「希望怎麼改」；Popover 錨定在元素上。 - 調整模式（
V）：打開實時樣式檢查器，改文字、顏色、排版、尺寸、間距、邊框與效果等，頁面即時預覽；可逐行重置、回滾。 - 確認：Pin 彙總到輸入區上方的卡片；可就地編輯、resolve/reopen/delete。發送消息時附帶；從卡片移除 Pin 時，頁面對應 overlay 也會同步去掉（reconciliation）。
自由標註畫布（D）¶
全頁畫布：筆刷、線、箭頭、矩形、橢圓、 numbered step 標記、文字等。可將整頁截圖與繪製內容合成後送入對話。
Agent 收到的結構化塊¶
每個 Pin 在單次快照裏佔一塊，典型字段包括：
Target：標籤、role、無障礙標籤Target selector：回到該元素的 CSS 路徑Target text/Component：內容與框架提示Screenshot (cropped around the target)：圍繞標記區域的 JPEG，非整屏Comment：你的說明Requested visual changes：現場調整記錄爲prop: before -> afterRequested text change：若在檢查器裏改過元素文本
快照作爲 producer-owned 的 context 掛在你的下一條消息上，聊天裏以原生可摺疊卡片展示。
國際化與運行範圍¶
Overlay UI 支持 English、Português (Brasil)、簡體中文，隨瀏覽器 locale 選擇。
當前範圍：單 Harness 實例、內置瀏覽器渲染的頁面、基於視口的裁剪截圖。遠程瀏覽器與整頁捕獲 README 標明暫不在範圍內。
本地服務（默認無需配置）¶
插件啓動 loopback 服務，默認 127.0.0.1:47477，佔用則依次嘗試後續 20 個端口；提供 overlay、截圖附件與標註 intake。實例密鑰存放在 ~/.dsh/profiles/<profile>/dsh-redline/instance.secret（模式 0600），不注入頁面。
安裝與啓用¶
官方安裝命令（須使用 web profile）：
dsh plugin --profile web add dsh-redline
dsh web
私有或未發佈構建可從 git 或本地路徑安裝：
dsh plugin --profile web add git+https://github.com/klaus-2/dsh-redline.git
dsh plugin --profile web add ./dsh-redline
package.json 要求 Node >=20。npm 上包版本以發佈爲準（倉庫內開發版本見 tag/release，安裝時以 dsh plugin 拉取的包爲準）。
典型用法¶
在 dsh web 打開的目標頁中，用快捷鍵進入模式並完成標註後發送。
| 按鍵 | 作用 |
|---|---|
C |
評論模式：點元素並描述應如何修改 |
V |
調整模式：點元素並打開實時樣式檢查器 |
D |
自由標註畫布 |
Esc |
取消當前模式、Popover 或預覽 |
Enter |
在 Popover 中保存標註 |
推薦流程：
- 啓動 web 會話並在 Harness 瀏覽器中打開待改頁面。
- 按
C或V點選問題元素；寫評論或在檢查器裏試樣式，確認後 Pin 進入卡片。 - 需要流程說明或跨區塊示意時，按
D在整頁上繪製再發送。 - 在輸入框附帶卡片中的快照，發送下一條消息，由 Agent 根據結構化上下文改倉庫代碼。
未發送前，繪製內容僅在內存中，刷新不保留；Pin 與標籤頁作用域相關。
適用場景與注意¶
適合：在 DSH web 工作流裏做 UI 評審、把「指哪打哪」的反饋交給編碼 Agent，而不是反覆用文字猜 selector。
安全與信任（摘自 README Security notes，摘要）：
- Loopback 僅綁定
127.0.0.1，校驗 Host；私有路由需實例密鑰，頁面通過受限 message bridge 通信，overlay 不持有密鑰。 - 經 Redline 提交的評論視作用戶輸入；代理不轉發 cookie。
- 插件按當前 DSH 進程權限運行，安裝前請閱讀 GitHub 倉庫 源碼與
THIRD-PARTY-NOTICES.md（含 tencil、html2canvas 等歸屬說明）。
第三方與啓發：overlay 樣式體系部分源自 tencil；交付環路受 dsh-web-review、dsh-annotate 等社區項目啓發（見 README Credits）。
結尾¶
dsh-redline 把「點元素、試樣式、留評論」收成 Agent 可消費的一條結構化上下文，減少 UI 反饋中的歧義。若要安裝或查看版本信息，可從社區目錄進入，也可直接查閱 GitHub：
- 目錄頁：https://www.skillhub.cn/plugins/klaus-2/dsh-redline
- 倉庫：https://github.com/klaus-2/dsh-redline
