前言¶
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 工作流。
