ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

dsh-openpencil 使用教程

2026/10/7 10:03:15 拓冰建站 浏览量
dsh-openpencil 使用教程 ⚠️已被取代2026-09-17已确定放弃 Penpot、改用 OpenPencil 做产品原型。完整系统见OpenPencil-产品设计与前端编码系统.md与工作区规范product/AGENTS.md。本文仅保留 dsh-openpencil 插件本身的说明第 1–4 节仍有效第 5 节 Penpot 部分不再使用。适用环境本机 DSH Webprofile: web插件zseven-w/dsh-openpencil0.1.0-rc.1已安装。本文所有事实均在本机实测/源码核验2026-09-17。0. 先说结论重要问题答案dsh-openpencil 能对接我本机的 Penpotlocalhost:9001的 MCP server 吗不能。dsh-openpencil 与 Penpot 完全无关源码中零处提及 Penpot。它驱动的是另一个设计工具OpenPencil.op文件格式开源 Figma 替代品GitHub: ZSeven-W/openpencil。那我在 DSH 里想用 Penpot 的 MCP 怎么办用 DSH内置的dsh-mcp-client插件见第 5 节直接连 Penpot 的 streamable-HTTP 端点效果等同于 Claude Code 的接法且不需要mcp-remote桥接。dsh-openpencil 现在能用吗插件已装、5 个工具已注册但本机缺少 OpenPencil 二进制当前调用会报错实测openpencil_new→Error: OpenPencil editor host binary is unavailable。按第 4 节装好二进制即可用。1. dsh-openpencil 是什么DSH 的官方生态插件OpenPencil 作者 ZSeven-W 出品让 Agent 直接在 DSH 对话里驱动 OpenPencil 设计画布用自然语言生成.op设计稿JSON设计即代码在对话里渲染 PNG 预览 / 多画板画廊 / 可交互只读画布打开托管的 OpenPencil 编辑器图层、属性、绘图、组件、撤销重做Agent 能读取画布结构、选区直接改节点OpenPencil 背景Rust 原生非 Electron、支持 macOS/Windows/Linux、可导入 Figma.fig、支持代码导出React/HTML/Vue/Flutter 等、自带 MCP server。2. 五个工具工具作用前置条件openpencil_new从一段batch_design程序新建.op文档原子写入工作区绝不覆盖已有文件op-host-web-server守护进程二进制openpencil_render渲染.op工具卡片出 PNG 大图 多画板缩略图 缩放editable:true时可打开托管编辑器openpencil-desktop精确渲染器缺失时回退 jian标注 runtime-previewopenpencil_create对已打开的画布执行批量batch_design生成/重构节点整批事务该文件正在托管编辑器中打开openpencil_edit修改单个节点或你在画布上当前选中的节点同上openpencil_selection读取画布当前选区节点 id/名称/类型/坐标/尺寸同上典型提示词示例直接对 Agent 说“设计一个移动端 App 登录页390×844暖色调有标题、副标题、邮箱输入框、登录按钮” →openpencil_new“把这个按钮改成深绿色、圆角 12” →openpencil_edit先在画布上选中按钮或直接说节点名“在页面底部加一张卡片放三行文字” →openpencil_create“把首页的标题字号调大” / “预览一下 design.op” →openpencil_render3. 标准工作流你说需求 → Agent: openpencil_new生成 xxx.op立即落盘到会话工作区 → Agent: openpencil_render(path, editabletrue, autoOpentrue) → 对话里出现 PNG 预览 右侧可编辑画布 → 你说“改一下/加一点” → Agent: openpencil_edit / openpencil_create改在活画布上实时可见 → 你在画布上手动选中某节点 → “把选中的放大一倍” → 满意后点编辑器里的 Save 落盘保存语义务必记住openpencil_new创建即保存。openpencil_create/openpencil_edit的修改不会自动落盘必须点编辑器的 Save。画布有未保存内容时 DSH 重载/卸载插件会保留最多 7 天的本地恢复草稿再次打开同一文件会询问是否恢复恢复也不会覆盖磁盘文件。渲染出的 PNG/画廊是快照内容寻址与后续编辑互不影响。4. 本机环境配置当前缺失项 安装步骤4.1 插件如何找二进制源码核验用途查找顺序精确渲染openpencil_render1) 环境变量DSH_OPENPENCIL_BINARY或DSH_OPENPENCIL_DESKTOP→ 2) macOS 应用路径Windows 忽略→ 3) PATH 中的openpencil-desktop。都找不到时回退jianDSH_OPENPENCIL_JIAN/~/workspace/jian/target/release/jian/ PATH产出明确标注为低保真 runtime-preview新建/编辑守护openpencil_new、编辑器1) 环境变量DSH_OPENPENCIL_EDITOR_BINARY→ 2) 源码根DSH_OPENPENCIL_SOURCE_ROOT或OPENPENCIL_SOURCE_ROOT或~/workspace/openpencil下的 target/release编辑器 Web bundle可选增强源码根需含crates/op-host-web/pkg/op_host_web.js与crates/op-host-web/assets/canvaskit/canvaskit.wasm也可用OPENPENCIL_WEB_BUNDLE_DIR/OPENPENCIL_CANVASKIT_DIR指定⚠️Windows 关键点PATH 查找用的是不带.exe的精确文件名openpencil-desktop、op-host-web-serverWindows 上即使加入 PATH 也匹配不到.exe。必须用环境变量显式指向 .exe 全路径。4.2 本机实测状态2026-09-17openpencil-desktop、op-host-web-server、jian均未安装PATH/常见目录均无scoop未安装实测openpencil_new→Error: OpenPencil editor host binary is unavailable4.3 安装三选一推荐 AA. GitHub Releases 直接下载Windows x64当前 v0.8.4# 1) 桌面应用含 openpencil-desktop.exe精确渲染用# https://github.com/ZSeven-W/openpencil/releases/tag/v0.8.4# 下载 OpenPencil-0.8.4-x64-win-setup.exe 安装# 或下 openpencil-desktop-windows-x86_64.zip 解压即用便携# 2) 无头 Web server新建文档/托管编辑器用约 68MBInvoke-WebRequest https://github.com/ZSeven-W/openpencil/releases/download/v0.8.4/op-host-web-server.exe -OutFile D:\app\openpencil\op-host-web-server.exeB. Scoop需先装 scoopscoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil scoop install openpencilC. 源码构建git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git Rust stablecargo build --release需要 wasm 工具链才能构建 Web bundle适合要完整编辑器的场景。4.4 设置环境变量用户级设完重启 dsh web[Environment]::SetEnvironmentVariable(DSH_OPENPENCIL_BINARY,C:\Program Files\OpenPencil\openpencil-desktop.exe,User)# 按实际路径[Environment]::SetEnvironmentVariable(DSH_OPENPENCIL_EDITOR_BINARY,D:\app\openpencil\op-host-web-server.exe,User)# 可选完整编辑器 UI# [Environment]::SetEnvironmentVariable(DSH_OPENPENCIL_SOURCE_ROOT, C:\src\openpencil, User)然后重启dsh web环境变量在 dsh web 进程启动时读取。4.5 验证重启后新开一个会话直接说“设计一张 390×844 的 App 启动页”。正常时你会看到工作区里生成xxx.op工具卡片出现 PNG 预览 “Open interactive canvas / Edit” 按钮5. 在 DSH 里对接 Penpot 的 MCP你真正想要的Claude Code 的接法D:\ai\llmmaster\.mcp.jsonpenpot:{command:npx,args:[-y,mcp-remote,http://localhost:9001/mcp/stream?userToken你的token,--allow-http]}DSH 有内置的deepseek-ai/dsh-mcp-client插件一等包支持 stdio 和 streamable-http可以直接连 Penpot 的/mcp/stream不需要 mcp-remote 桥。端点已实测可用initialize 返回 200serverInfo: penpot 1.0.0带high_level_overview等工具。步骤需要一次dsh web重启启用插件在任意终端dsh web 运行中执行也可以重启后生效dsh plugin--profile web add deepseek-ai/dsh-mcp-client追加配置到C:\Users\BingerLiang\.dsh\profiles\web\cordis.patch.yml末尾-id:mcp-penpotname:deepseek-ai/dsh-mcp-clientconfig:serverName:penpottransport:streamable-httpurl:http://localhost:9001/mcp/stream?userToken粘贴你自己的userTokentoken 就是 Claude Code 那边 URL 里的那个它是你的 Penpot 用户令牌不要提交到 git。也可以改用headers方式视 Penpot 端支持而定。重启 dsh web。验证新会话里问“列出 Penpot 里我的文件”之类。工具会以mcp__penpot__工具名出现如mcp__penpot__high_level_overview、mcp__penpot__*。Penpot MCP 自身建议先用high_level_overview工具读一遍高层概览再操作。行为说明每个工具形如mcp__penpot__search_files与 Claude Code 命名规则一致会话历史和权限规则稳定。连接断开自动重连500ms 起指数退避到 30s10 次失败后放弃直到配置重载。成本这些工具的定义会计入每次请求的 token工具多时略增。只桥接 toolsMCP 的 resources/prompts 不支持不影响 Penpot。6. 两套生态怎么共存 / 互通Penpotlocalhost:9001团队文件、.penpot格式 → 通过dsh-mcp-client驱动。OpenPencil.op 文件个人/Agent 快速出稿、设计即代码、代码导出 → 通过dsh-openpencil驱动。互通桥梁Figma.fig格式。OpenPencil 原生支持.fig导入/导出保留布局/填充/描边/文本/图片/矢量Penpot 同样支持导入.fig。需要跨工具迁移设计时走.fig中转。7. FAQQ: 不装 OpenPencildsh-openpencil 还有用吗A: 本机当前状态就是“装了插件但没有二进制”5 个工具都会失败渲染还可能走 jian 回退但你也没装 jian。想用它就先完成第 4 节不想装就只用第 5 节的 Penpot 方案。Q: 为什么openpencil_new报错 “editor host binary is unavailable”A: 找不到op-host-web-server。按 4.3 A 下载4.4 设置DSH_OPENPENCIL_EDITOR_BINARY重启 dsh web。Q: PNG 预览能看但编辑器打不开A: 托管编辑器还需要 Web bundlewasmCanvasKit。发布版op-host-web-server.exe68MB通常已内嵌若仍报错按 4.3 C 源码构建后用DSH_OPENPENCIL_SOURCE_ROOT指向源码根。Q: .op 文件在哪A: 会话工作区本会话是D:\ai\mywiki\mydocs。JSON 文本可 git 管理、可 diff、可手动编辑但插件要求 Agent 不手写 .op。Q: 只读画布和编辑器有什么区别A: “Open interactive canvas” 是 Web SDK 只读画布平移/缩放/定位完整编辑走 managed editor右侧可缩放工作台可全屏小视口自动全屏。两者同时只能各开一个。Q: 多页面 .opA: 渲染画廊只覆盖当前激活页的顶层 frame其他页面用交互画布查看。附关键路径速查项路径插件源码/READMEC:\Users\BingerLiang\.dsh\profiles\web\node_modules\zseven-w\dsh-openpencil\README.mdweb profile 配置C:\Users\BingerLiang\.dsh\profiles\web\package.jsonbundles 数组、cordis.patch.yml用户覆盖层Claude Code 的 Penpot MCP 配置D:\ai\llmmaster\.mcp.jsonPenpot MCP 端点http://localhost:9001/mcp/stream?userToken...实测 200dsh-mcp-client 文档C:\Users\BingerLiang\.dsh\profiles\node_modules\deepseek-ai\dsh-mcp-client\README.md含中文 README.zh.mdOpenPencil 仓库https://github.com/ZSeven-W/openpencil Releases: v0.8.4