前言¶
DeepSeek Harness（DSH）把智能體能力拆成可插拔模塊，核心理念是「一切皆插件」。社區目錄 SkillHub 插件庫 收錄了大量第三方 DSH 插件，但它與 DeepSeek / 幻方並無官方從屬關係，更像獨立維護的插件索引站。
對 UI 設計類任務，常見痛點是：Agent 往往只能生成一張靜態 PNG，改一版就要重新出圖，無法像 Figma 那樣在真實畫布上迭代。維護者 ZSeven-W 出品的 dsh-openpencil（npm 包名 @zseven-w/dsh-openpencil）把 DSH 與開源設計工具 OpenPencil 接在一起，讓你在對話裏直接預覽、檢查並編輯真實的 .op 文檔。該插件在 GitHub 上有 153 個 Star、6 個 Fork，SkillHub 分類爲客戶端，許可證爲 MIT。
這是什麼¶
dsh-openpencil 是面向 Web 版 DSH 的客戶端插件。它不做「假設計圖」，而是驅動 OpenPencil 的無頭渲染器與託管編輯器，把 .op 矢量設計文件當作一等公民：Agent 通過工具調用創建或修改畫布，你在側邊欄看到精確預覽、只讀交互畫布，必要時還能打開完整編輯器繼續改。
一句話定位：在 DSH 對話中預覽、檢查並編輯真實 .op 設計文檔，而不是截圖往返。
當前插件版本爲 0.1.0-rc.4，README 標註已在 DSH 0.1.1-rc.2 上測試通過。
核心功能與亮點¶
1. 精確多幀預覽¶
插件調用 OpenPencil 無頭導出器，按設計稿真實渲染預覽：活動頁面上第一個頂層 Frame 顯示爲大圖，其餘 Frame 以橫向縮略圖條展示，支持點擊切換與上一幀/下一幀導航。PNG 預覽可回放，適合在對話裏快速驗收版式。
2. 交互式只讀畫布¶
點擊「打開交互畫布」後，懶加載 OpenPencil Web SDK（含 WASM 與 CanvasKit），支持平移、縮放、適應窗口。你可以在不離開對話的情況下查看任意頁面、嵌套節點或非活動頁——這是 PNG 預覽的補充，畫布本身只讀。
3. 託管編輯器¶
當工具調用帶上 editable: true 時，可在右側工作臺打開 OpenPencil 託管編輯器，提供圖層、屬性、繪圖工具、撤銷/重做與顯式保存。編輯器支持調整寬度與全屏，無需單獨安裝桌面版 OpenPencil 即可編輯（託管運行時隨插件打包，覆蓋 darwin / linux / win32 六類平臺包）。
4. 五個 Agent 原生設計工具¶
| 工具 | 作用 |
|---|---|
openpencil_new |
用 QuickJS batch_design 腳本從零創建新 .op，整批成功後才原子寫入，並自動打開可編輯側邊欄 |
openpencil_create |
在已有畫布上執行事務性 batch_design，生成或重組節點 |
openpencil_edit |
修改指定節點，或編輯用戶在畫布中選中的單個節點 |
openpencil_render |
對 .op 路徑做不可變快照，渲染活動頁全部頂層 Frame；可選 scale 與 editable |
openpencil_selection |
讀取編輯器中當前選中的節點 |
Agent 用 I/K 等高層 API 編寫 batch_design 程序，而不是手寫底層 operations；失敗批次不會留下空文件，也不會覆蓋已有路徑。
5. 能力門控與安全¶
圖片與文檔訪問通過簽名、哈希綁定的 capability 發放。瀏覽器側元數據不會暴露任意主機路徑，簽名預覽/編輯能力也不會進入模型可見的工具結果 JSON，降低路徑泄露風險。
6. 與 DSH 界面一致¶
工具卡片與託管編輯器跟隨 DSH 的中英文 locale 以及明/暗主題切換，編輯會話無需重載。
安裝與啓用¶
DSH 與插件是分開安裝的。若尚未安裝 DSH，可先全局安裝：
npm install -g @deepseek-ai/dsh@latest
將插件加入 Web profile 並啓動 Web 應用：
dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
dsh web
不想全局安裝 DSH 時，可用 pnpm dlx 等價執行：
pnpm dlx --package=@deepseek-ai/dsh@latest dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
pnpm dlx --package=@deepseek-ai/dsh@latest dsh web
本地開發插件時，可在倉庫內 pnpm run build 後，用絕對路徑 link 進 profile（修改後需完整重啓 DSH，Web profile 默認不熱重載宿主 bundle）：
pnpm run build
dsh plugin --profile web add link:/absolute/path/to/dsh-openpencil
dsh web
插件爲公開 npm 包，無需 npm token；若 DSH 預發佈版本身需要 registry 認證，請把憑據放在用戶級配置中，不要寫進倉庫。
典型用法示例¶
從零創建設計稿¶
當用戶用自然語言描述一個新界面、且尚無 .op 文件時，Agent 應調用 openpencil_new：傳入工作區相對路徑與完整的 batch_design 腳本。工具在私有託管 OpenPencil 守護進程中執行腳本，整批成功後才發佈權威文檔，並在同一工具調用中返回可編輯展示，DSH 自動打開編輯器側邊欄——無需再單獨調用 openpencil_render 或等待 PNG。
渲染已有文檔¶
對已有 .op 文件，可用 openpencil_render：
路徑：workspace/design.op
scale：1（可選，0 < scale <= 8）
editable：false（默認；設爲 true 可授權打開編輯器）
精確 PNG 渲染會按順序查找 OpenPencil 桌面二進制：環境變量 DSH_OPENPENCIL_BINARY / DSH_OPENPENCIL_DESKTOP、macOS 默認安裝路徑、PATH 中的 openpencil-desktop。若精確渲染器不可用，可能降級爲標註了 runtime-preview 的 Jian 回退渲染；精確渲染失敗、超時或 PNG 無效時不會靜默降級。
在已打開的畫布上繼續改¶
openpencil_create 與 openpencil_edit 僅適用於已經打開託管編輯器的 live canvas；修改會留在編輯器內存中，直到用戶點擊 Save 纔會寫回 .op 文件。
適用場景與注意事項¶
適合誰用：
- 需要在 DSH 對話裏做 UI / 幻燈片 / 矢量稿迭代的產品、設計、前端同學；
- 希望 Agent 操作真實
.op畫布，而不是反覆生成位圖的設計自動化場景； - 已在用或計劃用 OpenPencil 生態（同維護者還有
openpencil-skill、Zode等）的開發者。
務必注意：
- 權限邊界：插件以當前 DSH 進程權限運行，安裝前請閱讀 GitHub 源碼 與 MIT 許可證，確認工具行爲符合你的安全策略。
- 編輯與預覽分離：Web SDK 交互畫布只讀；完整編輯走託管編輯器。DSH 0.1.1-rc.2 上編輯器默認在右側可縮放工作臺中打開。
- 保存語義：對已有畫布的 follow-up 編輯必須編輯器已打開，且需用戶顯式 Save；外部若改動了源文件，插件會用樂觀哈希檢測衝突而非強行覆蓋。
- 渲染依賴：託管編輯不依賴桌面 OpenPencil；精確 PNG 預覽仍可能依賴
openpencil-desktop或上述環境變量。Viewer 資源（SDK / WASM / CanvasKit）缺失時，PNG 預覽仍可用，但不會展示「打開畫布」按鈕。 - 版本與平臺：構建要求 Node >= 24.11.0 與 pnpm；Linux 平臺包目標爲 glibc。
- 社區目錄：安裝命令以 GitHub README 與 npm 包
@zseven-w/dsh-openpencil爲準；SkillHub 頁面便於發現插件，但不替代官方文檔。
結尾¶
如果你受夠了「描述需求 → 出一張圖 → 再描述 → 再出圖」的循環，dsh-openpencil 把 OpenPencil 的真實畫布搬進了 DSH 對話：預覽、交互檢查、Agent 驅動編輯可以在同一條工作流裏完成。
- 目錄頁：https://www.skillhub.cn/plugins/ZSeven-W/dsh-openpencil
- GitHub：https://github.com/ZSeven-W/dsh-openpencil
- OpenPencil 官網：https://op.zseven.tech
安裝前建議通讀 README 中的「Current Limits」與「Managed Editor」章節，再決定是否納入你的 DSH Web 工作流。
