askman-dev/dsh-canvas-design-harness

Name: askman-dev/dsh-canvas-design-harness
Author: askman-dev

Plugin插件 Native原生 ⭐ 5 Dev Workflow开发与代码工作流 Prompts & Skills提示词与技能

A DeepSeek Harness plugin and AI skill for Figma-style canvas design. Generates, previews, and iterates multi-frame UI drafts directly from chat, storing living design specifications as clean HTML files version-controlled in Git.

Project Overview项目介绍

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

This is a DSH-native canvas design plugin that provides an interactive Figma-style design experience directly inside the DeepSeek Harness Web GUI. It ships as a dual-spec package, with a native DSH plugin integration that adds a Design Gallery tab to the DSH navigation bar, and a standalone skill that works with Codex and Claude Code workflows. To install it for DSH, you can run the direct Git install command dsh plugin --profile web add git+https://github.com/askman-dev/dsh-canvas-design-harness.git in your terminal, then restart your DSH web profile and refresh your browser to access the new Design Gallery tab.

A typical user workflow starts with you describing your UI design requirement in natural language in the agent chat, for example asking for a mobile login and registration interface. The AI agent will automatically invoke the plugin's tools to generate a new HTML design file and save it to the docs/designs/ directory of your current project. You can then navigate to the Design Gallery tab in DSH to preview, inspect, and iterate on the generated interactive canvas. This tool is built for developers and product designers who need to iterate on UI designs directly inside an AI agent workflow.

This project is released under the open source MIT license. It includes a zero-dependency built-in HTTP-MCP daemon that runs on port 9321 by default, handling live canvas synchronization and SVG export functionality. All design files are stored as standard HTML documents in your code repository, so they work natively with Git version control, and can be opened directly in any modern web browser without proprietary design software. If you are modifying the source code, you can run the built-in 42-check offline smoke test suite to verify your changes before deployment.

这是一款专为 DeepSeek Harness 开发的原生插件，提供类 Figma 的交互式画布设计能力，同时也是兼容 Codex、Claude Code 的双规格技能工具。用户可以通过 DSH 命令行工具直接从 GitHub 在线安装，也可以克隆仓库到本地进行开发调试。安装完成后需要重启 DSH Web 配置，刷新浏览器后就能在顶部导航栏看到新增的「设计大厅」标签，即可开始使用设计功能。

对使用者来说，典型工作流通常是先在对话中描述自己想要的 UI 设计需求，比如要求生成适配移动端的登录注册界面，随后 AI 代理会自动调用工具生成设计文件，并存放到项目的 docs/designs/ 目录下，最后用户打开设计大厅标签就能查看生成的交互式画布。它面向需要在代理工作流中完成 UI 设计迭代的开发者和产品设计师，支持多画布、多页面的设计版本管理。

该项目使用 MIT 许可证，内置零依赖的 HTTP-MCP 守护进程，默认监听 127.0.0.1:9321 端口，处理实时同步和 SVG 导出功能。设计文件以标准 HTML 格式存储在代码仓库中，支持 Git 版本管理，可直接用浏览器打开查看，无需依赖专用的大型设计软件。开发修改后可通过内置的冒烟测试套件进行功能验证。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

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

插件：dsh-canvas-design-harness（askman-dev/dsh-canvas-design-harness）
仓库：https://github.com/askman-dev/dsh-canvas-design-harness
本站详情页：https://www.yhbd.top/plugins/askman-dev-dsh-canvas-design-harness/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证未声明 · ⭐ 5 · 最近提交 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兼容性 · 安全性 2 warnings2 项注意

No license declared - all rights reserved by default; ask the author before commercial use or redistribution未声明开源许可证 —— 默认「保留所有权利」，商用或再分发前先问作者
Only 5 stars - very few users, little community feedback星标只有 5，几乎没人在用，遇到问题缺少社区反馈

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 git+https://github.com/askman-dev/dsh-canvas-design-harness.git

把 askman-dev/dsh-canvas-design-harness 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

7.2 KB · 缓存于 2026-08-23 03:42:33 · 7.2 KB

Canvas Design Harness for DeepSeek Harness

English | 简体中文

🎨 Interactive Figma-style canvas design plugin & dual-spec Skill for DeepSeek Harness. Create, inspect, and iterate on multi-frame UI designs directly inside DeepSeek Harness Web GUI, while remaining 100% standalone for Codex, Claude Code, and terminal workflows.

📸 Visual Overview

🖼️ 1. Design Gallery (Grid Overview) — Browse all workspace design documents

🎨 2. Multi-Frame Canvas (Grok Mobile App) — Infinite canvas with responsive device frames

📊 3. Living Specs (AI Apps Comparison) — Multi-page design specs version-controlled in Git

🌟 Key Highlights

1. Integrated "Design Gallery" in DeepSeek Harness UI

Seamlessly mounts into the conversation.view tab ring (alongside Chat and Trajectory).
Instant visual gallery of all design documents located in docs/designs/.
Embedded full-height interactive viewer with zoom, pan, and real-time hot-reloading.

2. HTML as Universal Living Specifications

Human-Friendly: Clean, readable HTML files (docs/designs/*.html). Double-click to open in any standard web browser without heavy proprietary design software.
AI-Friendly: Standard semantic DOM structure. LLMs can inspect, generate, and perform atomic mutations on frames and components with 100% precision.
Git-Native Specs: Design files live right in your repository as code. Commit, branch, diff, and review living design specifications alongside your application code.

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

渲染基于仓库 askman-dev/dsh-canvas-design-harness 的 README.md。在 GitHub 查看原文 →