生成式画布 IlliaDol/dsh-artifacts

dsh-artifacts

DeepSeek Harness (dsh) 的一个插件，给模型一个统一的 artifact 界面：内联组件、原生图表、165 个配方的可视化手册、原生卡片、已发布页面、幻灯片、设计画布、文档和可下载文件——Claude 的 artifact 类别，基于三个 dsh 生成式 UI 项目实现。

从零构建，无依赖，无构建步骤：宿主端是纯 ESM，浏览器端是手写的模块加载器打包产物。

dsh plugin --profile web add github:IlliaDol/dsh-artifacts

然后重启配置档并打开新会话：

做一份关于 Q3 数据的幻灯片，共三页，再加一张按季度划分的收入图表。

合并了什么

| 上游 | 许可证 | 它的协议在这里贡献了什么 |
| dsh-genui ★802 | MIT | 声明式 spec artifact（图表、组件、卡片），以及回传给模型的动作循环 |
| dsh-visualize ★323 | BSD-3-Clause | 沙箱化的内联 HTML 卡片、inline / wide / page 三种界面、流式/部分渲染姿态 |
| dsh-generative-ui ★75 | Apache-2.0 | 「artifact 自行上报失败」循环，以及侧边画布思路（这里对应 surface:"canvas" 幻灯片和设计板） |

这是协议合并，不是代码搬运合并：没有复制任何上游源码。每个项目解决了一条通道；这个包在所有通道之上暴露一个工具和一个存储，然后补上它们都没有的东西——幻灯片、设计画布、文档、OOXML 导出。哪些与各上游兼容、哪些不兼容，见 docs/ENGINES.md 的如实说明。

安装

需要 dsh ^0.2.0-rc.1 || ^0.2.1-rc.1，以及 Node 22.19+ 或 24+。

from GitHub (no build step; lib/ is committed)
dsh plugin --profile web add github:IlliaDol/dsh-artifacts

or from a clone
git clone https://github.com/IlliaDol/dsh-artifacts
dsh plugin --profile web add link:/absolute/path/to/dsh-artifacts

重启配置档（dsh web），强制刷新浏览器，然后开一个新会话——提示词段落按会话组装，旧会话仍保留旧工具列表。

验证：浏览器控制台打印 [dsh-artifacts] client active;
channels=toolview+fence；/plugins/dsh-artifacts/gallery 列出 artifact，/plugins/dsh-artifacts/cookbook 打开 165 个配方的画廊。

使用

模型拿到一个工具 artifact，外加一个内置技能，技能里带完整目录。你也可以在提示词里直接驱动它：

- 「按月份给我们的注册量画张图」 → chart
- 「画出缓存淘汰是怎么工作的」 → widget（SVG）
- 「第 3 章的小测验」 → cards
- 「董事会会议的幻灯片」 → slides，然后导出 pptx
- 「给手机和桌面端做个结账页原型」 → design
- 「把发布备忘录写成 Word 文件」 → doc + export docx
- 「这份对数变换后的数据是正态分布吗？」 → 用 recipe，配 qq、histogram 和 combo-layers（想用自己的数据就换成 chart）

产物存放在 $DSH_HOME/artifacts 下（默认是 ~/.dsh/artifacts）。画廊就是索引；每个产物都有 Open、Source 和 Export 链接。

九种类型

| 类型 | 渲染内容 | 动态 | 导出 |
| widget | 内联 HTML 片段或 SVG | 是 | html |
| chart | 20 种形式：line / area / bar / hbar / stacked / scatter / donut / hist / box / density / ecdf / violin / heat / stat / waterfall / dumbbell / slope / pareto / funnel / bullet | 悬停、点击、图例、分箱滑块、拖拽缩放 | html, csv, json, xlsx |
| recipe | 按 id 从 165 个 cookbook 图形中选一个（qq、sankey、treemap、globe、lorenz……） | 图形自带的控件 | html, md, json, csv, docx, pptx, xlsx |
| cards | recipe、itinerary、quiz、steps、compare、metric、profile、weather、translation、message | 在本地给 quiz 打分 | html, json, csv |
| page | 完整发布的文档 | 是 | html, pdf |
| slides | 16:9 幻灯片，方向键翻页，打印时分页 | 翻页 | html, pptx, md, pdf |
| design | 可平移画布上的画板 | 平移/缩放 | html, pdf |
| doc | Markdown 阅读界面 | 否 | md, docx, html, pdf |
| file | 不渲染（只能下载） | 否 | csv, json, md, html, txt, docx, pptx, xlsx |

完整目录——每种产物类型，静态或动态、内联、发布或可下载，都附精确调用方式——见 docs/ARTIFACT-TYPES.md。

默认就是可交互的

图表不是一张图片。它由 kit/ 里自带的工具包绘制——纯 JavaScript，不依赖 CDN，不用图表库——并且会读取指针：

- 悬停给出该标记处的精确值；
- 点击单独隔离一根柱子、一个扇区或一条系列；
- 图例可以关掉一条系列，不用重绘任何东西；
- 直方图带分箱滑块，因为形状取决于宽度；
- 折线在拖拽划过时缩放，双击复位；
- widget 可以用同一套工具包做 3D 场景：VK（缩放、拖拽、帧循环）、V3（旋转、投影）和 VC（图表渲染器）在每个产物框架里都会加载。

不发起任何网络请求：工具包由 scripts/build-kit.mjs 内联进每个文档，所以产物在离线时、在导出文件里、在断网的沙箱内都能渲染。

统一外观，强制执行

外观是一套系统，不是每个产物各自决定：一张 token 表、一套组件词汇（.step、.caption、.panels、.controls），以及一个对每个自由格式 widget 都跑的审计。用 var(…) 画的 canvas 图表会被拒绝；硬编码的白色或黑色、渐变、emoji、position:fixed 和超过 980px 的宽度会作为警告返回，模型必须修掉。docs/HOUSE-STYLE.md 是这份契约，test/design.test.mjs 是它的闸门。
docs/CLAUDE-METHOD.md 逆向拆解了这套方法，从源材料：七个步骤、放置规则和各项检查。

gallery.html 是同一批配方的实时界面——直接打开，或运行 node scripts/serve-gallery.mjs 8777。PROMPT.md 是主提示词，可一次性重建或扩展这份材料。

配方手册：渲染器和库中都有

二十种原生形式不是一串图表名称：它们来自可视化配方手册的问题，每种都配了所需的交互。waterfall 展示累计值，dumbbell 和 slope 展示每项的两个时刻，pareto 把累计占比放在同一条 0–100% 轴上，funnel 让狭窄阶段仍可读，bullet 把数值与目标对照，density、ecdf 和 violin 比较分布，不让箱体遮住形状。

其余 165 个配方整体内置：15 个族，从 Q-Q 图、山脊线到桑基图、矩形树图、地图、3D 场景、示意图和联动视图。每个配方都是按 id 寻址的一等 recipe 产物，模型可用 action:"cookbook" 搜索，也可在 /plugins/dsh-artifacts/cookbook 浏览，支持搜索、族筛选、查看代码和复制。配方下方印出的函数就是绘制它的函数；这些包没有重新录入。

docs/COOKBOOK.md 是选择指南：哪种形式回答哪个问题、每张图都遵循的设计规则、四种组合模式（分层、小多图、联动视图、标注），以及对对数变换 / Shapiro–Wilk 论证的完整处理。完整 id 索引见 docs/RECIPES.md。模型在 SKILL.md 中读到同样的规则，因此产物和画廊保持同步。

工作原理

model ──artifact tool──▶ host half ──▶ $DSH_HOME/artifacts/<id>/
│ source.* · index.html · meta.json ├─ /plugins/dsh-artifacts/view (CSP-sandboxed doc) ├─ /plugins/dsh-artifacts/export (attachment) ├─ /plugins/dsh-artifacts/gallery ├─ /plugins/dsh-artifacts/cookbook (165 recipes) └─ presentationMeta {id, viewUrl, title} │ browser ◀── toolview iframe ◀───────────┘ │ ▲ height messages, theme flips └──┴─ dshArtifact.send / prompt ──▶ conversation.send ──▶ next model turn

完整细节见 docs/ARCHITECTURE.md。

安全策略

- 每个产物都在 iframe 中渲染，带 sandbox="allow-scripts …"，并以 CSP 提供服务，只允许 cdnjs.cloudflare.com、esm.sh、cdn.jsdelivr.net、unpkg.com 和 Google Fonts。
- 产物 id 为 art_ + 10 个十六进制字符；路径由 id 构建，每次访问文件系统前都会重新校验 id。
- 内容中形似凭据的字符串在验证阶段即被拒绝。
- 产物无法访问 harness API；唯一出口是 postMessage 动作桥，宿主会把它转成普通用户消息。

未实现

公开托管链接、按查看者共享数据、页内模型调用、实时 TSX 编译、图像生成和图像搜索。每一项都在 docs/PARITY.md 里列出了原因。PDF 通过浏览器打印对话框生成，不用 PDF 写入器。

开发

npm test # 77 unit tests: schema, design, markdown, zip/OOXML, store, renderers, cookbook
npm run check # tests + package-shape checks
npm run design:check # render examples + the 165-recipe gallery in Chrome; fail on overflow or clipped text
npm run build:kit # inline kit/.js and cookbook/.js into lib/kit.js
npm run build:cookbook # regenerate manifest.json, gallery.html and docs/RECIPES.md
npm run render # write examples/ for a visual check

无运行时依赖。lib/ 已提交，安装包时无需构建。改完 lib/*.js 后重启配置档；只有源文件变动时才重新生成 cookbook 或 kit。

许可

MIT。上游署名和许可文本见 NOTICE。cookbook/ 下的 cookbook 是用户用 Claude 创作的材料，经其指示收录；它不是 Anthropic 的产品。与 Anthropic 无关联；「Claude artifacts」仅作描述性使用。