前言¶

在 DSH Desktop 裏改前端原型時，常見做法是截圖、畫圈，或在對話裏描述「左邊第三個按鈕」。模型缺少 DOM 上下文，容易改錯位置或反覆確認。DeepSeek Harness 社區插件 dsh-prototype-annotator（維護者 shiyoungwoo）把交互做成類似 Codex 的頁面批註：在側欄瀏覽器裏直接點選元素、寫修改說明，多條批註合併成緊湊標籤再隨消息發送，並附帶選擇器、樣式、視口等定位信息。插件本身不改動項目源文件，只把批註寫入會話輸入框，由你決定何時發送。

這是什麼¶

DSH 原型批註 · Prototype Annotator 是面向 DSH Desktop 的客戶端插件（分類：客戶端）。它在側欄 Browser 或可訪問 DOM 的預覽頁面上啓用元素點選與批註，將修改要求與元素上下文一併交給當前會話中的 Agent。包名在 profile 中爲 @local/dsh-proto-annotate-spike（與公開倉庫名 dsh-prototype-annotator 並存，便於從本地試用版遷移）；當前版本 0.0.3，許可證 MIT。尚未發佈到 npm，需通過 GitHub 或 DSH 插件管理器安裝。

核心功能¶

下面介紹 README 中已說明、且與實現一致的能力。

• 點選定位：鼠標懸浮高亮元素，顯示尺寸、顏色和字體；點擊後輸入修改說明；Esc 取消點選。
• 批註入口：會話標題欄固定「批註」按鈕，側欄工具欄保留快捷入口；快捷鍵 Option+A（Windows/Linux 文檔寫爲 Alt+A，未驗證）。
• 緊湊標籤：多條批註合併爲「N 條註釋」標籤；發送前可打開詳情、刪除單條；發送後只讀查看。輸入框與已發送消息均以該標籤展示，元素選擇器與樣式等定位信息仍會進入模型上下文。
• 帶上元素信息：DOM 選擇器、標籤名、短文本、尺寸、樣式、頁面 URL 和視口大小隨修改要求發送；開放 Shadow DOM 路徑使用 >>> 分隔。
• 適配現有工作流：僅把批註加入會話輸入框，不自動改倉庫文件；無額外服務、無 prepare / postinstall 構建腳本。
• 側欄本地前端：支持 Vite、React、Vue 等開發服務器頁面，無需整站導出爲靜態 HTML。

插件依賴 Desktop 提供的 sidebar-right 與 sidebar-browser 宿主能力，並注入 @deepseek-ai/dsh-client-ui-sidebar-right、@deepseek-ai/dsh-client-ui-sidebar-browser（見 package.json 中 dsh.client.inject）。

兼容範圍¶

宿主升級後需重新驗證；請勿同時安裝多個副本。

安裝與啓用¶

先做安裝，再重新加載或重啓 DSH Desktop；若未見「批註」按鈕，退出並重新打開應用。

在 DSH 對話中安裝¶

讓 Agent 使用內置插件管理器，不要手改 profile：

請安裝 DSH 插件 github:shiyoungwoo/dsh-prototype-annotator。
請使用插件管理器 install_bundle，不要手動修改 profile 配置。

命令行安裝¶

已配置 dsh 時：

dsh plugin --profile desktop add github:shiyoungwoo/dsh-prototype-annotator

macOS 應用內置 CLI（無需把 dsh 加入 PATH）：

"/Applications/DeepSeek Harness.app/Contents/Resources/runtime/cli/bin/dsh" plugin --profile desktop add github:shiyoungwoo/dsh-prototype-annotator

自定義 profile 時將 desktop 替換爲你的 profile 名。若曾安裝本地試用版，請先在插件管理器移除舊本地鏈接，再安裝 GitHub 版本。

更新與卸載¶

更新：重新執行同一安裝命令後重啓 Desktop。卸載示例：

dsh plugin --profile desktop remove @local/dsh-proto-annotate-spike

典型用法¶

經過上面的步驟啓用插件後，可按 README 示例操作：

1. 在 DSH Desktop 側欄瀏覽器打開前端地址，例如 http://localhost:5173，或打開可訪問 DOM 的 HTML 預覽。
2. 點擊會話標題欄「批註」（或側欄入口 / Option+A）。
3. 懸浮查看高亮，點擊選中元素；輸入修改說明，「完成」或 Enter 寫入輸入框（Shift+Enter 換行；中文輸入法確認不會誤提交）。
4. 輸入框出現「1 條註釋」等標籤；可繼續點選增加條數，或點擊標籤查看、刪除單條。
5. 按需補充普通文字後發送。已發送消息同樣以緊湊標籤顯示，詳情只讀且無截圖。

文檔中的完整示例：打開本地前端 → 點「批註」→ 選中圖標 → 輸入「這個圖標太卡通，改成適合金融平臺的線性圖標」→ 輸入框出現「1 條註釋」→ 發送。

從標題欄進入時默認綁定當前會話輸入框；多輸入框並存時需面板選擇目標會話。提交中的輸入框不能寫入。

數據與隱私¶

標籤保存修改要求與元素上下文。元素截圖縮小爲最大 480×320 的 JPEG，僅用於發送前詳情預覽，不隨批註文本發給模型；發送後詳情無截圖。模型收到修改要求、選擇器、短文本、尺寸、樣式、URL 與視口；在含敏感信息的頁面上使用前請自行檢查。插件 README 說明無額外網絡請求或遙測；消息仍經 DSH 所選模型提供方發送。批註正文以 <prototype-annotations> 塊保存在會話中；停用插件後仍保留可讀原始文本。

適用場景與注意¶

適合：在 DSH Desktop 側欄調試本地或原型頁面、希望 Agent 按具體 DOM 改 UI 的前端與全棧開發者。

限制與排查（摘自 README）：

• 跨域 iframe、封閉 Shadow DOM、canvas 繪製、嵌套 iframe 不在本版本支持範圍；優先側欄 Browser 打開本地頁。
• 頁面結構變化後選擇器可能失效，需重新點選。
• 按鈕未出現：確認 Desktop、側欄已開頁，重載或重啓；可試 Option+A。
• 部分提示與標籤爲中文；元數據與主要操作有中英文資源。

安全與信任：插件以當前 DSH 進程權限運行，安裝前請閱讀 GitHub 源碼 與 MIT 許可證；勿在不可信頁面上放寬 iframe 沙箱，建議用於自有原型與本地開發頁。DeepSeek Harness 生態強調「一切皆插件」；社區目錄 skillhub.cn 爲獨立站點，與 DeepSeek / 幻方無官方從屬關係。

結尾¶

dsh-prototype-annotator 把「點選 + 說明 + DOM 上下文」收進一條可編輯的消息流，減少截圖與口頭定位的誤差，又保留你控制發送時機的習慣。目錄頁：https://www.skillhub.cn/plugins/shiyoungwoo/dsh-prototype-annotator；倉庫與 Issue：https://github.com/shiyoungwoo/dsh-prototype-annotator。