DSH Plugin HubDSH 插件市场

GooDAnDReaDY/dsh-live-canvas

Plugin插件 Native原生 ⭐ 2 MIT Dev Workflow开发与代码工作流

Interactive Visual Frontend Studio, Retool-Style CRUD Engine, Time-Travel Debugger, 31 Agent Tools for DeepSeek Harness

Project Overview项目介绍

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

@goodandready/dsh-live-canvas is a DeepSeek Harness-aimed visual frontend studio plugin distributed as an npm package under the MIT license and demanding Node.js 20 or newer as runtime prerequisite. It bundles an in-memory recursive ESM bundler with SSE hot-reload, mounts onto the native right sidebar via sidebarRightTabs and sidebar.right.pane.tab, registers a custom dsh-resource://file viewer covering HTML/JSX/TSX/SVG/Mermaid/Markdown, and falls back gracefully to the dsh-better-sidebar legacy tab, a self-contained slide-over drawer triggered with Alt+C, or dedicated modals on minimal profiles. The plugin exposes roughly thirty dedicated Agent tools, including Figma vector bridging, a Retool-inspired CRUD admin engine, snapshot-based time-travel history debugging, and a single-click multi-platform deploy engine targeting Vercel, Cloudflare, Netlify and GitHub Gist through locally bundled adapters.

A typical workflow begins when the DeepSeek Harness agent invokes a tool such as live_canvas_preview, which causes an interactive preview card to materialise directly inside the chat thread, after which the developer can press Alt+C to summon the standalone drawer, open the collapsible split-view code editor, toggle blueprint wireframe mode, drag and drop section blocks, inspect arbitrary DOM elements, draw bounding-box comments, and scrub the timeline to restore any prior snapshot. The audience is frontend developers, design reviewers, and admin-panel engineers who are tired of bouncing among the editor, terminal, browser and Figma and want production-grade visual feedback, iterative UI experimentation, one-click deploys, and accessible HTML artifacts emitted from a single conversational surface without leaving the harness.

Dependencies are intentionally lean: a DeepSeek Harness host of at least 0.1.5-alpha.1 is preferred for native mounting, otherwise the legacy dsh-better-sidebar integration activates automatically, and Node.js 20 plus a local pnpm (or the bundled dsh plugin add command) are required for installation. The host-side updater polls registry.npmjs.org with semver prerelease awareness and verifies an X-DSH-Update-Key loopback header before triggering a safe profile update. Security relies on strict resolveSafePath workspace sandboxing that rejects out-of-root traversal with HTTP 403, same-origin CSRF checks via Sec-Fetch-Site and referer headers, and iframe-level CSP enforcing default-src 'self' plus X-Frame-Options: SAMEORIGIN. First-run caveats include granting one or more workspace roots, manually enabling the synthesised Web Audio sound effects, and supplying deploy credentials when targeting Vercel, Cloudflare, Netlify or Gist.

@goodandready/dsh-live-canvas 是面向 DeepSeek Harness(DSH)的前端可视化工作室插件,以 npm 包形式分发,要求 Node 20+ 与 MIT 开源许可。它内置 ESM 递归打包器、SSE 热重载、sidebarRightTabs 原生右栏标签、dsh-better-sidebar 兼容回退、独立 Drawer 与 dsh-resource://file 文件查看器等多套挂载面,并提供 30 余个 Agent 工具与 Figma 矢量桥接、Retool 式 CRUD 引擎和时间旅行历史调试能力,可直接读取 HTML/JSX/TSX/SVG/Mermaid/Markdown。

典型流程由 DSH 中的智能体调用 live_canvas_preview 等工具触发,聊天窗口内出现可交互预览卡片,用户通过 Alt+C 切出独立抽屉,使用工具栏的代码编辑器、线框图、检阅、声音开关和拖拽重排等控件打磨 UI,并在时间旅行滑块中回滚快照,最终一键打包部署到 Vercel、Cloudflare、Netlify 或 Gist。它主要服务于在 IDE 工具间频繁往返、渴望在聊天中直接得到可视反馈的前端开发者、设计审稿人和构建管理后台的工程师。

依赖方面需要 DSH 0.1.5-alpha.1 及以上(否则自动回退到兼容侧栏)、Node.js 20 及以上,并通过本地 pnpm 或 dsh plugin add 完成安装,内置 Host 端通过 registry.npmjs.org 的预发布感知自动更新器。安全层采用路径沙箱、同源校验与 iframe 沙盒 CSP,首次运行需授予工作区根目录,UI 音效需手动开启。

View on GitHub在 GitHub 查看

Recommended强烈推荐 Send to your DSH发给你的 DSH 安装 
请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：dsh-live-canvas（GooDAnDReaDY/dsh-live-canvas）
仓库：https://github.com/GooDAnDReaDY/dsh-live-canvas
本站详情页：https://www.yhbd.top/plugins/goodandready-dsh-live-canvas/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 MIT · ⭐ 2 · 最近提交 2026-09-25 · 主语言 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 2 stars - very few users, little community feedback星标只有 2，几乎没人在用，遇到问题缺少社区反馈
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 @goodandready/dsh-live-canvas

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

READMEREADME

22.3 KB · 缓存于 2026-10-01 22:09:22 · 22.3 KB

📦 @goodandready/dsh-live-canvas

Interactive Visual Frontend Studio, Retool-Style CRUD Admin Engine, Time-Travel Debugger, 1-Click Multi-Deploy (Vercel, Cloudflare, Netlify, Gist), Figma Vector Bridge, Effective HTML Artifacts, UI Sound FX, and 31 Agent Tools for DeepSeek Harness

npm version license DSH Plugin Node version

GoodAndReady Showcase

🇬🇧 English • 🇷🇺 Русский • 🇨🇳 中文说明

⭐ If you like this plugin, please star it on GitHub — it shows me that the plugin is useful to you and motivates me to keep developing it.

🐛 If you find a bug or would like to request a feature, open a GitHub issue in any language — I will review your proposal and implement useful suggestions in a future plugin version.

⚡ Overview & The Problem

When coding assistants work in standard terminal or chat windows, they typically produce static code snippets or markdown blocks. This creates critical friction:

  1. No Live Feedback: Developers cannot see or test interactivity, form validations, animations, or responsive breakpoints without manually copying code into a local build toolchain.
  2. Context Fragmentation: Reviewing UI changes requires switching back and forth between IDE, terminal, browser, and design tools.
  3. Verbose Text Overload: Explaining architecture, roadmaps, and wireframes in raw text produces walls of markdown that are difficult to scan.

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

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

Related相关推荐

← 上一个 Prev dsh-rich-editor 下一个 Next dsh-rss-daily →