用 dsh-openpencil 在 DeepSeek Harness 对话里预览和编辑设计稿

DeepSeek Harness 插件 DeepSeek DSH OpenPencil 界面增强 设计预览 2026-08-17 60 阅读

前言

DeepSeek Harness（以下简称 DSH）把模型、工具、技能、会话和 UI 都做成插件，官方说法是「一切皆插件」。开发者预览版已经开源，社区也很快出现了一批独立目录站，用来检索和安装第三方插件。目录站与 DeepSeek / 幻方没有官方从属关系，安装命令要以各插件详情页原文为准。

在这个生态里，智能体写代码已经比较顺，做设计却经常停在「生成一张图」。图不能点选图层，也不能按节点改文案、调间距。OpenPencil 把设计稿存成可版本管理的 .op 文件；dsh-openpencil 则把它接进 DSH 的对话界面，让智能体在真实画布上创建、预览和修改，而不是只丢回一张 PNG。

本文依据社区目录详情页、插件 GitHub 仓库 README、npm 包说明，以及 OpenPencil 与 DeepSeek Harness 的公开仓库整理：这个插件是什么、能做什么、怎么装、当前有哪些限制。

这是什么

dsh-openpencil 是一款界面增强插件，由 ZSeven-W 维护，把 OpenPencil 接到 DeepSeek Harness 里。社区目录的定位是「DSH 的 OpenPencil 设计预览与编辑插件」；仓库 README 写得更具体：在对话中预览、检查并编辑真实的 .op 文档。

它要解决的问题很明确：智能体不再只返回一张生成图，而是驱动一块可编辑、可交互的设计画布。.op 在 OpenPencil 里是 JSON 形态的 Design-as-Code 文件，适合放进 Git 做 diff。插件当前 npm 包名为 @zseven-w/dsh-openpencil，发布版本为 0.1.0-rc.1，README 标明已在 DSH 0.1.0-rc.6 上测试。许可证为 MIT，主要语言是 TypeScript。

社区目录页收录于 2026-08-15，当时展示 72 星；本文写作时 GitHub 仓库显示 101 星。星标会变，以仓库页面为准。

核心功能

仓库把能力分成预览、画布、编辑器和一组给智能体调用的设计工具。下面只写已经在 README / npm 说明里核对过的部分。

精确多帧预览

安装好的 OpenPencil 无头导出器会按设计稿保真度渲染预览：活动页上第一个顶层画板做成可回放的大图 PNG；多帧文档会多出一条可横向滚动的缩略图轨，支持点击选择和上一帧 / 下一帧。大图还支持手动缩放、复位、适配画板和适配内容。

渲染走 openpencil_render。它会生成一份内容寻址、不可变的 .op 快照，并把活动页上每一个顶层画板都画出来。可选参数包括：

  • scale：范围 0 < scale <= 8，默认 1
  • editable：默认 false；设为 true 才会放出编辑入口

精确渲染路径不要传 width / height。这两个参数描述的是运行时视口，不是设计导出尺寸，只被保真度更低的 Jian 回退路径接受。

精确渲染器按下面顺序查找 OpenPencil 二进制：

  1. 环境变量 DSH_OPENPENCIL_BINARY 或 DSH_OPENPENCIL_DESKTOP
  2. /Applications/OpenPencil.app/Contents/MacOS/openpencil-desktop
  3. ~/Applications/OpenPencil.app/Contents/MacOS/openpencil-desktop
  4. PATH 上的 openpencil-desktop

如果精确渲染器确实找不到，Jian 可能给出带 runtime-preview 标记的回退预览。精确渲染失败、超时或 PNG 不合法时，插件不会悄悄切到回退路径。

只读交互画布

工具卡片上的「Open interactive canvas」会按需挂载只读的 OpenPencil Web SDK，支持平移、缩放和适配。可以查看任意页面、嵌套节点或未激活页面，不必离开当前对话。

Web SDK 画布和托管编辑器是两条独立路径。只读画布不能当完整编辑器用。查看器资源（ESM SDK、WASM、CanvasKit）也是打开画布后才懒加载；资源缺失或无效时，PNG 预览仍然可用，只是不会再显示画布按钮。

托管编辑器

当 editable: true 时，编辑动作会打开托管的 OpenPencil 编辑器：选择、图层、属性、绘制工具、撤销 / 重做，以及显式保存。当前已发布的 DSH 到 0.1.0-rc.6 使用插件自己的可缩放右侧工作台，也可以切全屏；小视口会自动全屏。工具卡片和编辑器会跟随 DSH 的中英文语言以及亮 / 暗色主题，切换时不必重载编辑会话。

编辑会话用的是 OpenPencil 的托管 Web Host，架构与 op-vscode 相同。插件只在用户授权操作后才启动 Host，把守护进程令牌放在内存里，校验 iframe 来源，会话结束就关掉进程。如果 DSH 在画布有未保存改动时重载或卸载插件，Host 会保留一份不透明的本地恢复草稿，最多七天。再次打开同一源文件时会先询问是否恢复；恢复不会覆盖 .op 文件，直到用户明确保存。

保存使用乐观哈希和原子替换。如果源文件在编辑器外被改过，插件会报冲突，而不是直接覆盖。

智能体设计工具

插件注册了五个工具，让智能体通过事务性的 batch_design 程序操作真实画布：

工具 作用
openpencil_new 用一次事务性 batch_design 新建 .op，经 DSH 沙箱文件系统原子写入；不需要事先打开编辑器
openpencil_create 在已有的活动画布上，用 batch_design 生成或重组节点
openpencil_edit 修改明确指定的节点，或用户当前选中的那一个节点
openpencil_render 生成不可变快照，并渲染活动页上全部顶层画板；可选 scale 与 editable
openpencil_selection 读取活动编辑器画布上当前选中的节点

新建文档只在整段 batch_design 成功后才发布。工具不会覆盖已有路径；批次失败也不会留下空文件。

能力授予与结果形态

图片和文档授予是带签名、绑定哈希的 capability。浏览器元数据不会暴露任意宿主机路径；签名后的预览 / 编辑授予也不会进入规范工具结果或模型上下文。模型看到的结果保持普通 JSON；浏览器侧的 presentationMeta.$dshOpenPencil 才携带预览 URL、画板列表、文档快照和编辑器启动授予。结果里还会记录 renderer、rendererBinary、fidelity 以及警告信息。

安装与启用

社区目录详情页给出的安装命令如下，在 DeepSeek Harness 终端中运行：

dsh plugin add github:ZSeven-W/dsh-openpencil

需要可复现安装时，按目录页说明把 commit 哈希固定上去：

dsh plugin add github:ZSeven-W/dsh-openpencil#<commit>

把 <commit> 换成仓库里实际的提交哈希。目录页写明：插件以当前 dsh 进程的权限运行，安装时可能执行代码。安装前应检查源代码仓库和许可证。

GitHub README 另外给出了面向 Web 配置的 npm 安装方式，并指定了测试过的 DSH 版本。如果本机还没有 DSH：

npm install -g @deepseek-ai/dsh@0.1.0-rc.6
dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
dsh web

不想全局安装 DSH 时，README 提供的等价写法是：

pnpm dlx --package=@deepseek-ai/dsh@0.1.0-rc.6 dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
pnpm dlx --package=@deepseek-ai/dsh@0.1.0-rc.6 dsh web

插件包本身是公开的，不需要 npm token。若所用的 DSH 预发布包需要 registry 认证，README 要求把凭据放在用户级或临时 npm 配置里，不要写进插件仓库。

精确预览依赖本机的 OpenPencil 桌面端或 openpencil-desktop 可执行文件。OpenPencil 仓库提供 macOS Homebrew、桌面端和 CLI 等多种安装途径；装好后按上文的二进制查找顺序让 DSH 进程能找到它。

典型用法

仓库 README 给出的智能体工作流可以按下面步骤复现，不需要事先准备一份 .op。

  1. 在 DSH Web 界面用自然语言提出设计需求，例如做一页 App 界面或一组演示画板，并指定一个工作区相对路径（如 designs/home.op）。
  2. 智能体应调用 openpencil_new，带上这个新路径和第一段完整的 batch_design 程序。工具在私有的托管 OpenPencil 守护进程里执行该程序，整批成功后才写出权威文档。
  3. 智能体再调用 openpencil_render，参数使用返回的路径，并设置 editable: true、autoOpen: true。对话里会出现多帧画廊，编辑器展开一次。回放中的历史卡片，以及已经初次结算过的卡片，不会自动打开。
  4. 之后对已有活动画布的修改，使用 openpencil_create 和 openpencil_edit。这些改动在用户点击编辑器的 Save 之前都不会落盘。
  5. 需要核对用户当前选中了哪些节点时，调用 openpencil_selection。

README 还列出了适用的设计类型：App 页面、演示文稿、社交媒体内容和信息图等。这些能力来自 OpenPencil 本身的图层、属性、绘制、组件和模板，插件负责把它们接到 DSH 对话和工具循环里。

从开发者侧看，仓库源码结构也对应上述分工：src/index.ts 是 Cordis 服务入口，design-tools.ts / new-tool.ts 注册工具，renderer.ts 负责精确渲染和 Jian 回退，editor-host.ts 管理编辑器生命周期，client/ 则是浏览器里的工作台、画廊和选区面板。cordis.patch.yml 把插件挂到 DSH bundle 上。这些是源码布局说明，日常使用不必自己编译；本地构建需要 Node 24.11 或更新版本，以及 pnpm。

适用场景与注意事项

比较适合这几类人：

  • 已经在用 DSH Web 界面，希望智能体直接出可编辑设计稿，而不是只生成图片
  • 设计稿需要以 .op 文件进仓库、做 diff 和后续迭代
  • 需要在对话里核对多帧画板、图层和选区，再决定是否保存

使用前要注意当前限制，这些都写在仓库的 Current Limits 里：

  • 对已有画布的后续编辑，要求托管编辑器已经打开；改动要等用户执行 Save 才会写入
  • 轻量 Web SDK 画布只读；完整编辑走单独的托管编辑器。DSH 0.1.0-rc.6 使用可缩放右侧工作台，可切全屏
  • 精确画廊只覆盖活动页的顶层画板；未激活页面和嵌套节点要靠交互画布查看
  • 渲染和快照缓存还没有产品级的保留策略
  • DSH 0.1.0-rc.6 不会持久化 PTC / Code Mode 下嵌套工具的浏览器展示元数据；插件用同源、绑定会话的端点做只读预览恢复。编辑授予只发给近期、可信的现场结果

安全方面，目录页和仓库是一致的：插件以当前 dsh 进程权限运行，安装时可能执行代码。安装前应阅读 GitHub 源码和 MIT 许可证，确认维护者是 ZSeven-W，包名是 @zseven-w/dsh-openpencil。需要可复现环境时，固定 GitHub commit 或 npm 版本，不要长期使用未钉死的 @latest。

精确渲染依赖本机 OpenPencil 二进制。找不到精确渲染器时，Jian 回退预览会带 runtime-preview 标记，保真度低于正式导出路径，不要把它当成最终设计验收图。

小结

dsh-openpencil 把 OpenPencil 的 .op 画布接到 DeepSeek Harness 对话里：多帧精确预览、只读交互画布、托管编辑器，再加上五个事务性设计工具。它适合在 DSH 里把「提需求 → 改真实画布 → 预览验证 → 再迭代」收成一条工作流，而不是来回贴截图。

插件仍是预发布版本（0.1.0-rc.1），需要匹配的 DSH 版本和本机 OpenPencil 渲染器。社区目录与官方仓库都提醒：先看源码和许可证，再决定是否装进当前进程。

  • 社区目录：https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-openpencil/
  • GitHub：https://github.com/ZSeven-W/dsh-openpencil
  • OpenPencil：https://github.com/ZSeven-W/openpencil
  • DeepSeek Harness：https://github.com/deepseek-ai/deepseek-harness

相关文章

快速从零部署一个DeepSeek-R1服务 2025-04-05 使用 dsh-anchored-standard 为 DeepSeek Harness 配置两阶段 Agent 预设 2026-08-17 用 dsh-web-ui 把 DeepSeek Harness 网页界面补成工作台 2026-08-17 用 modlens 给 DeepSeek Harness 的纯文本模型补上视觉 2026-08-17 用 dsh-TUI 给 DeepSeek Harness 补上全屏终端界面 2026-08-17
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜