jiuyuechuwuhao/dsh-canvas-preview

Name: jiuyuechuwuhao/dsh-canvas-preview
Author: jiuyuechuwuhao

Plugin插件 Native原生 ⭐ 4 MIT Vision & Media视觉与多媒体 Models & Routing模型与路由

🎨 DeepSeek Harness 的画板预览插件 — AI 生成的网页产物实时预览 · PNG/JPG/SVG 一键导出（对标 Gemini Canvas 体验）

Project Overview项目介绍

Edited by Zhiwei Agent (zhiwei)由知微Agent(zhiwei)编辑

dsh-canvas-preview is a native Cordis plugin built exclusively for DeepSeek Harness (DSH), the open-source browser-based AI agent harness from DeepSeek. It adds a dedicated canvas preview panel to DSH that lets users view AI-generated HTML artifacts directly inside the DSH interface, eliminating the need to switch back and forth between DSH and an external browser to open local HTML files. This plugin brings the popular Canvas-style preview experience common to other AI coding assistants directly to DSH, with no extra configuration needed for basic use.

After installation, the plugin adds a new "Canvas" tab to the top bar of every DSH session, placed right next to the default chat tab. The left side of the Canvas tab shows a list of all HTML files in your current DSH working directory, and the right side displays a live sandboxed preview of the selected file. The plugin automatically scans the working directory every 4 seconds, so any changes AI saves to HTML files are reflected immediately without any manual refresh from the user.

The plugin supports exporting previews as 2x high-resolution PNG or JPG bitmap files, or as directly extracted vector SVG files that can be scaled infinitely without quality loss. PNG/JPG export relies on a local installation of the Chrome browser, which runs in headless mode to capture the screenshot in roughly 2 seconds, even for HTML files that load fonts from external blocked sources. It is released under the permissive open-source MIT license, and can be installed with a single one-line npx command that handles all setup automatically.

这是一款专为 DeepSeek Harness（DSH）开发的原生 Cordis 插件，核心功能是给AI生成的HTML产物提供画板预览能力。当用户使用DSH进行内容创作，AI输出架构图、信息图、网页原型、幻灯片这类自包含HTML产物时，不需要再打开本地文件夹双击文件在外部浏览器预览。它把类似 Gemini、Claude 的 Canvas 画板体验原生带进了DSH。

插件会在DSH会话顶部新增一个独立的「画板」页签，和聊天页签并排，左侧展示工作区所有HTML文件列表，右侧沙箱实时预览选中文件。它每4秒自动扫描工作区，AI保存文件后就能立刻看到更新，不需要手动刷新。AI生成新产物时，右上角会弹出带实时渲染缩略图的可拖动通知卡，方便快速查看。

插件支持把预览的HTML导出为2倍高清PNG/JPG位图，也支持直接提取SVG矢量图，导出后可以直接打开保存目录。导出PNG/JPG依赖本地安装Chrome浏览器，采用无头模式截图，耗时大约2秒，不受被墙字体影响。插件采用MIT许可协议免费开源，可通过一行npx命令一键完成安装。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：dsh-canvas-preview（jiuyuechuwuhao/dsh-canvas-preview）
仓库：https://github.com/jiuyuechuwuhao/dsh-canvas-preview
本站详情页：https://www.yhbd.top/plugins/jiuyuechuwuhao-dsh-canvas-preview/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 MIT · ⭐ 4 · 最近提交 2026-08-19 · 主语言 JavaScript

按下面顺序执行，每步先把结论告诉我，再进入下一步：

【1 兼容性检查】
① 我这边：DSH 版本、Node 版本、操作系统、当前 profile（web / desktop）。
② 读它的 README、package.json、插件 manifest，列出它要求的 DSH 版本 / Node 版本 / 操作系统 / 外部依赖 / 需要另外先装的运行时。
③ 逐条比对，结论只写「满足 / 不满足 / 未知」三种；不满足的给出可行替代方案。
④ 检查是否和我已装的插件冲突：命令名重复、skill / tool 重名、端口占用、重复注册的 MCP server。

【2 安全性检查】
① 仓库可信度：和上面「本站登记」是否一致；star / fork 数、创建时间、最近提交，是否归档或长期停更。
② 安装脚本：逐行看 package.json 的 preinstall / install / postinstall，以及 install.sh、setup.ps1 之类脚本。出现 curl|bash、下载后直接执行、混淆代码、访问与插件功能无关的域名，立刻停下来告诉我，不要继续装。
③ 依赖：列出新增依赖，标出无人维护、或与知名包拼写近似的可疑包（typosquatting）。
④ 权限与副作用：它会读写哪些目录、访问哪些域名、需要哪些 DSH 权限（filesystem / network / shell / clipboard 等），以及怎么卸载和回滚。
⑤ 如果它要求 sudo / 管理员权限，或权限明显超出功能所需，先停下来问我。

【3 安装】
上面两步没有「不满足」和「高危项」时才执行；用官方推荐方式安装，不要自行提权。

【4 汇报】
用表格输出：检查项 / 结论 / 依据 / 是否需要我决策。拿不准的一律写「未知」并说明要我怎么确认——不要猜，也不要替我决定。

Send this message to DSH in your current session: it verifies compatibility and security first (answering met / not met / unknown item by item) and only installs once everything checks out — it will stop and ask you if it finds a high-risk item. The box scrolls; the copy is the full prompt. CLI install commands may not be accurate across systems, so DSH is the safer route.把上面这条消息直接发给当前会话里的 DSH：它会先核对兼容性与安全性（逐条给「满足 / 不满足 / 未知」），确认没问题再安装，有高危项会停下来问你。框内可滚动，复制到的是完整提示词；安装命令不一定准确，发给 DSH 更稳。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 1 warning1 项注意

Only 4 stars - very few users, little community feedback星标只有 4，几乎没人在用，遇到问题缺少社区反馈

DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时（Electron / Python / Docker 等）是否齐备
Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突：命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致，是否归档或长期停更
Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需（filesystem / network / shell / clipboard）
Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限，以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照，不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装（适合开发者）

CLI Install命令行安装

dsh plugin --profile web add dsh-canvas-preview

把 jiuyuechuwuhao/dsh-canvas-preview 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

5.9 KB · 缓存于 2026-08-25 04:53:51 · 5.9 KB

🎨 dsh-canvas-preview

DeepSeek Harness 的画板预览插件 — AI 生成的网页产物，实时预览 · 一键高清导出

Canvas preview panel for DeepSeek Harness — live-preview AI-generated HTML artifacts and export them as high-res PNG/JPG in one click.

🤔 什么是 DeepSeek Harness？

DeepSeek Harness（DSH） 是 DeepSeek 开源的 AI 智能体运行台：浏览器里跑一个能读写文件、执行命令、调用工具的 AI 编程助手。它的每一项能力都是一个 Cordis 插件 —— 本项目就是其中之一。

DeepSeek Harness (DSH) is DeepSeek's open-source agent harness: a browser-based AI coding assistant whose every capability is a Cordis plugin. This project is one of them.

✨ 它解决什么问题 / What it solves

用 DSH 做内容创作时，AI 经常生成自包含 HTML 产物——架构图、信息图、网页原型、幻灯片…… 但你只能去文件夹里双击打开，来回切换窗口。

dsh-canvas-preview 把「Gemini / Claude 的 Canvas 画板体验」带进 DSH：


🖼 画板页签	与「聊天」并排的独立视图，左侧文件列表 + 右侧沙箱实时预览
🔄 自动同步	每 4 秒扫描工作区，AI 一保存你立刻看到，无需手动刷新
↗️ 右上角通知卡	AI 生成新产物瞬间弹出实时渲染缩略图，整卡可拖动、可展开、可调大小
📂 另存为	原生 macOS 目录选择器，默认 HTML 同目录，可改存「下载」或任何位置
📥 PNG/JPG/SVG 导出	位图：Chrome 无头 2x 高清（3200×2400）· ~2s；矢量：SVG 直提（瞬时 · 无限缩放）· 点击结果直达 Finder
🌓 细节体验	宽度三档（适配/1280/手机竖屏）· 深色预览 · 导出耗时显示

🏗 架构 / Architecture

双平面插件架构

双平面 Cordis 插件：Client 半（浏览器）注册画板页签与通知卡，通过独立 RPC 频道 /canvas（不占用官方 /api 拦截器）调用 Host 半（Node.js）的文件扫描与导出引擎。导出采用「Chrome 后台启动 + 轮询截图文件 + 稳定即杀」策略——不受被墙字体影响，永不挂起。

Showing the opening section of the README — the full document lives in the repository以上为 README 开头摘要，完整文档在仓库内 · View the full README on GitHub →在 GitHub 查看完整 README →

渲染基于仓库 jiuyuechuwuhao/dsh-canvas-preview 的 README.md。在 GitHub 查看原文 →