前言¶
在 DeepSeek Harness（DSH）的開發流程裏，想讓 AI 修改界面時，最常見的問題是說不清“改哪兒”。截圖加一句“右邊那個灰色的卡片”，AI 只能猜，猜錯了就要多一輪對話。dsh-annotate 解決這個問題：在 DSH 的實時預覽裏直接點選元素、寫批註，將結構化數據直接發進對話，不需要截圖，也不需要 AI 猜測。
插件介紹¶
dsh-annotate 是 DeepSeek Harness（DSH）的側邊欄插件。由 TheYoungChen 維護，屬於“聯網工具”類。當前 2 星，MIT 協議。它的核心價值是：在實時預覽裏點選元素、寫批註，直接發進對話。
核心功能¶
- 兩下點擊完成標註：懸停高亮並顯示選擇器，點擊即完成。
- 標註 / 批註兩種粒度：只點元素是“標註”，點元素後寫字是“批註”。
- 選擇器經得起推敲：優先語義化 class，避免位置鏈，確保唯一性。
- 一次帶上多條：按頁面從上到下排序，編號與頁面裏的標記針對應。
- 換頁不丟標註：單頁應用（SPA）裏切換路由，已標好的內容保留。
- 地址欄顯示真實地址：顯示當前頁面的完整地址（含路徑、query、hash），而非代理端口。
- 不弄髒消息：標註作爲獨立上下文投遞，不混進用戶輸入框。
- 技術棧識別：自動探測本地端口並識別框架（Vite / Next / React / Vue 等）。
- 本地代理：與宿主同 site，利用同源策略處理登錄態和存儲。
安裝與啓用¶
宿主與要求：
* 宿主：DeepSeek Harness（DSH），Profile 必須是 web。
* Node 版本：>= 20。
* 平臺：Windows / macOS / Linux。
* 依賴：無額外運行時依賴（@deepseek-ai/cordis 由 DSH 提供）。
安裝步驟：
1. 克隆插件到 DSH 的插件目錄：
git clone https://github.com/TheYoungChen/dsh-annotate
- 把
dsh-annotate加進 Web profile 的dsh.profile.bundles。 - 重啓 DSH 的 Web 端。
典型用法¶
- 打開側邊欄的「標註」頁籤（快捷鍵
⌘⇧B）。 - 上方選擇一個本地服務（自動探測端口與技術棧）或直接填地址；工作區裏的
.html也能直接打開。 - 點擊「標記」，在預覽裏懸停，高亮框顯示選擇器。
- 點擊元素，卡片彈在元素下方。
- 想寫就寫批註，不想寫直接保存。
- 標註列表按頁面從上到下排序，編號與頁面裏的標記針對應。
- 填寫輸入框發送消息，標註會作爲獨立上下文附在消息上。
適用場景與注意¶
對口場景：網頁 UI 修改、前端改稿、讓 AI 精確定位 DOM 元素、在本地服務上圈選元素。
已知限制：
* 脫離 DSH 獨立運行（必須裝進 DSH 的 Web profile）。
* 跨域 iframe 內部元素（瀏覽器同源策略限制）。
* 自動改代碼（只負責“改哪兒”，不改代碼）。
* 網絡訪問：默認只預覽迴環地址（127.0.0.1）與工作區文件；需配置 allowRemote 才能預覽任意 http(s) 站點。
* 換頁面後需手動切回標註頁籤才能看到列表。
結尾¶
dsh-annotate 通過結構化數據替代模糊描述，將 UI 反饋直接注入對話流。如果你在 DSH 裏頻繁修改界面，這個插件能省去反覆解釋“改哪兒”的時間。相關目錄與源碼：dsh-annotate。
