@zseven-w/dsh-openpencil

dsh plugin --profile web add @zseven-w/dsh-openpencil

<p align="center">

<img src="./docs/images/dsh-openpencil-logo.png" alt="DSH OpenPencil" width="120" />

</p>

<h1 align="center">DSH OpenPencil</h1>

<p align="center">

<strong>OpenPencil 的 DeepSeek Harness 插件 —— 在对话中预览、检查并编辑真实的 <code>.op</code> 文档。</strong><br />

_{精确多帧预览 &bull; 交互式画布 &bull; 托管编辑器 &bull; 智能体原生设计工具}

</p>

<p align="center">

_{npm: <a href="https://www.npmjs.com/package/@zseven-w/dsh-openpencil"><code>@zseven-w/dsh-openpencil</code></a> · 当前插件版本：<code>0.1.0-rc.14</code> · 编辑器面板已在 DSH 桌面版 <code>0.2.1-rc.3</code> 验证}

</p>

<p align="center">

<a href="./README.md">English</a> · <a href="./README.zh.md"><b>简体中文</b></a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md">हिन्दी</a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md">Bahasa Indonesia</a>

</p>

<p align="center">

<a href="https://www.npmjs.com/package/@zseven-w/dsh-openpencil"><img src="https://img.shields.io/npm/v/%40zseven-w%2Fdsh-openpencil?style=flat&color=cfb537" alt="npm" /></a>

<a href="https://github.com/ZSeven-W/dsh-openpencil/actions/workflows/check.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/dsh-openpencil/check.yml?label=CI" alt="CI" /></a>

<a href="https://github.com/ZSeven-W/dsh-openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/dsh-openpencil?style=flat&color=cfb537" alt="Stars" /></a>

<a href="https://github.com/ZSeven-W/dsh-openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/dsh-openpencil?color=64748b" alt="License" /></a>

<a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/badge/Discord-Join%20chat-5865F2?logo=discord&logoColor=white" alt="Discord" /></a>

</p>

<br />

<p align="center">

<img src="./docs/images/dsh-openpencil-overview.png" alt="DSH OpenPencil —— 多帧预览与侧边栏编辑器" width="100%" />

</p>

<p align="center">_{带交互式画布与托管编辑器工作台的精确多帧 <code>.op</code> 预览}</p>

为什么选择 DSH OpenPencil

DSH OpenPencil 将 DeepSeek Harness 与 OpenPencil 连接起来，让智能体（Agent）驱动一个真实、可编辑、可交互的设计画布，而不是返回一张生成的图片。

<table>

<tr>

<td width="50%">

🖼️ 精确多帧预览

已安装的 OpenPencil 无头导出器会渲染忠实于设计的预览：第一个顶层帧以大型可回放 PNG 呈现，另有一条可水平滚动的缩略图栏，支持点击选择以及多帧文档的上一个/下一个导航。

</td>

<td width="50%">

🗺️ 交互式画布

「打开交互式画布」会按需挂载只读的 OpenPencil Web SDK，支持平移、缩放与适应视图 —— 无需离开对话即可检查任意页面、嵌套节点或非活动页面。

</td>

</tr>

<tr>

<td width="50%">

✏️ 托管编辑器

启用 editable: true 后，编辑操作会打开托管的 OpenPencil 编辑器 —— 包含选择、图层、属性、绘图工具、撤销/重做以及明确的保存语义 —— 呈现在一个可调整大小的右侧工作台中，并支持全屏选项。

</td>

<td width="50%">

🤖 智能体原生设计工具

五个直接操作画布的工具，加上六个 openpencil_pipeline_* 工具，让智能体能通过托管的 OpenPencil 运行时创建、检查、细化、发布、修改和读取真实画布。

</td>

</tr>

<tr>

<td width="50%">

🔐 能力门控授权

图像与文档授权是经过签名、与哈希绑定的能力凭据。浏览器元数据永远不会暴露任意的宿主机路径，签名的预览/编辑器能力也永远不会进入规范的工具结果或模型上下文。

</td>

<td width="50%">

⚡ 事务性安全

完整管线中的文档会一直保留在私有、未发布的草稿中，直到通过全部原生与 DSH 质量门禁。发布绝不会覆盖已有路径，中止或批次失败也不会留下空的目标文件。

</td>

</tr>

<tr>

<td width="50%">

🌍 遵循 DSH 外观与风格

工具卡片与托管编辑器会跟随 DSH 的中文/英文语言环境以及浅色/深色主题，无需重新加载编辑会话。

</td>

<td width="50%">

🎯 一个完整的工作流

「需求 → 私有草稿 → 语义化批次 → live 用户预览 → 确定性的结构/布局/质量校验 → 最终 PNG 完整性保护下的原子发布」—— 全部在 DSH 内完成闭环。

</td>

</tr>

</table>

安装到 DSH

DSH 是独立的包。若尚未安装，先装一次：

npm install -g @deepseek-ai/dsh@latest

然后把插件装进某个 profile 并启动 Web 应用：

dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
dsh web

插件目前仍处于预发布阶段，发布版本使用 npm 的 latest 标签；从 latest 安装即可获取当前版本。较旧的 next 标签已不是当前发布通道。

本地开发时，先构建当前检出目录，再把其绝对路径链接进 Web profile，随后完整重启 DSH：

pnpm run build
dsh plugin --profile web add link:/absolute/path/to/dsh-openpencil
dsh web

link: 依赖会让后续重新构建的产物直接从当前检出目录生效；但替换 profile 依赖后必须完整重启 DSH，因为随附的 Web profile 默认不会热重载宿主插件包。

不想全局安装 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

OpenPencil 插件是公开的，无需 npm token。如果 DSH 预发布版本本身需要 registry 身份验证，请将该凭据保存在仓库检出目录之外的用户级或临时 npm 配置中。本仓库刻意不包含任何 registry 凭据。

设计工具

可选风格流程为 openpencil_style_plan → openpencil_style_confirm → openpencil_pipeline_begin，begin 保留原设计 brief，并传入 style_selection。目录浏览和精确选择无需模型推荐，推荐提供方默认关闭。该交接支持 script 引擎；app-agent 与电商风格交接暂不支持，普通 app-agent 生成入口保持可用。

工具 · 作用

openpencil_new · 面向简单任务的兼容快速路径：运行一份事务性 QuickJS batch_design 脚本，以“仅在不存在时创建”的语义发布并返回可编辑呈现。生产级设计应优先使用下方完整管线。

openpencil_pipeline_begin · 启动仅归当前会话所有的私有草稿，在内部创建唯一 root，返回 rootNodeId、continuationStyle 与紧凑的运行时匹配构建契约，并立即在侧边栏打开同一个 live canvas；目标文件仍未发布。

openpencil_pipeline_context · 只在 begin 契约确实缺少某个指定 guideline、style、theme 或 UI kit 时加载一次定向上下文；不是启动时的固定步骤。

openpencil_pipeline_batch · 最多运行两段直接原生 I(...)/K(...) generation script：第一段严格执行 begin next 返回的有界首个可见视口脚本，第二段一次补齐全部剩余区域。展示第二次预览前会执行 authored-structure 门禁；空分类/商品 helper 会被拒绝并原子恢复第一批快照，只允许重发一次修正后的第二批，且不消耗两段式预算。每次成功事务只会尝试展示给用户的精确 PNG，随后必须不加叙述地立即执行返回的 next。第三段 generation script 会被拒；只有 finish 返回的完整修复门禁可以授权一段有界 U(...) QuickJS 修复脚本。

openpencil_pipeline_inspect · 仅在用户明确要求时提供手动诊断；普通生成不会把它当作预览或模型看图步骤。

openpencil_pipeline_finish · 健康状态下一次调用就完成最终化、验证、最终 root PNG 自动预览与 createIfAbsent 原子发布。只有结果同时为 needs_correction、canContinue: true、含完整非空 repairTargets 且 omitted: 0 时，才授权一次纯 U(...) 修复和最后一次 finish；其他未发布结果一律终止。

openpencil_pipeline_abort · 丢弃未发布草稿，不创建目标文件。

openpencil_create · 在现有的活动画布上应用事务性 batch_design 程序来生成或重构节点。

openpencil_edit · 修改显式指定的节点或用户选中的单个节点。

openpencil_render · 创建不可变、内容寻址的 .op 快照，并渲染活动页面上的每个顶层帧 —— 可选 scale 与 editable 参数。

openpencil_selection · 读取实时编辑器画布中当前选中的确切节点。

智能

…(truncated)