mcpField
V
visualise

visualise

github.com/bentossell设计与 UI48554 次安装33 周前更新
代码仓库

关于 visualise

visualise 是面向聊天内容创作的可视化技能，可生成在对话中内嵌呈现的 SVG 图表与 HTML 交互组件。它针对流式输出和沙箱 iframe 设定了明确的结构与样式约束。

主要功能

  1. 01生成内嵌 SVG 图表
  2. 02创建 HTML 交互组件
  3. 03支持内容流式呈现
  4. 04通过 sendPrompt 触发对话
  5. 05提供不同视觉类型的选择规则

适用场景

  1. 01在聊天中展示流程或结构图
  2. 02用图表呈现数据
  3. 03创建带控件的交互式说明

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bentossell/visualise --skill visualise

安装后在 Claude Code 中输入/visualise确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
references/
client-implementation.md
design-system.md
charts.md
components.md
diagrams.md

详细介绍

Inline Visualizer

直接在聊天对话中呈现丰富的视觉内容——SVG 图表、HTML 交互式小组件、图表。输出会逐个 token 流式传输到沙盒 iframe 中。最终效果就像对话的自然延伸，而不是附件。

工作原理

生成原始 HTML 或 SVG 片段。客户端会在沙盒 iframe 中呈现这些内容，并注入设计系统的 CSS 变量。不要使用 <html>、<head> 或 <body> 标签——只需内容片段。

两种输出模式：

  • SVG 模式：输出以 <svg> 开头。客户端会自动将其包装在卡片中。最适合静态图表。
  • HTML 模式：原始 HTML 片段。最适合交互式内容（滑块、标签页、图表、控件）。可在 HTML 模式中嵌入 <svg> 元素。

客户端会根据输出是否以 <svg> 开头来判断模式。

生成任何视觉内容之前

在对话中首次生成视觉内容之前，请先阅读设计系统参考文档：

  1. 务必先阅读：references/design-system.md — CSS 变量、色阶、排版、核心规则
  2. 然后阅读相关模块：
    • 图表（流程图、结构图、示意图）：references/diagrams.md
    • 交互式说明、比较、数据记录：references/components.md
    • 图表（Chart.js、数据可视化）：references/charts.md

每次对话只需阅读一次设计系统文件。根据需要阅读各类视觉内容对应的模块文件。

流式传输限制

输出会逐个 token 流式传输到 DOM 中，因此必须遵循以下结构：

  1. 先输出 <style>（控制在 15 行以内——优先使用内联样式）
  2. 接着输出可见的 HTML/SVG 内容（用户会看到内容逐步构建）
  3. 最后输出 <script>（流式传输完成后才会执行）

由于流式传输的特性：

  • 不要使用渐变、阴影、模糊或辉光——它们会在 DOM 差异更新时闪烁。请使用纯色填充。
  • 不要使用 display:none 或隐藏内容——它们会在流式传输过程中不可见。
  • 不要使用 `` 或 /* comments */——这会浪费 token 并破坏流式传输。
  • 优先使用内联 style="..."，而不是 <style> 块，这样元素在流式传输过程中也能正确显示。
  • 不要使用初始处于隐藏状态的标签页或轮播组件——流式传输期间应将所有内容垂直堆叠显示。流式传输完成后，可通过 JS 添加交互功能。

Iframe 沙盒规则

视觉内容会在沙盒 iframe 中呈现。以下是硬性限制：

  • 不要使用 localStorage / sessionStorage——所有状态必须保存在内存中
  • 不要使用 position: fixed——iframe 会根据内容高度自动调整大小；固定定位元素会使其折叠
  • 不要进行外部 fetch——CSP 会阻止小组件内部的 API 调用
  • 仅允许使用以下 CDN：cdnjs.cloudflare.com、esm.sh、cdn.jsdelivr.net、unpkg.com
  • 不要使用 DOCTYPE、<html>、<head> 或 <body>——只需内容片段
  • 背景为透明——宿主会提供容器/卡片样式
  • 通过 <script src="https://cdnjs.cloudflare.com/ajax/libs/..."> 加载库（UMD 全局变量）

sendPrompt 桥接函数

iframe 中提供了全局 sendPrompt(text) 函数。它会向聊天发送一条消息，效果等同于用户输入该消息。使用它让视觉内容参与对话——例如，点击图表中的节点即可触发后续说明。

如果用户的下一步操作需要模型进行思考，请使用 sendPrompt。筛选、排序、切换和计算则应在本地 JS 中处理。

选择合适的可视化类型

根据动词来选择，而不是名词。同一主题会根据用户的提问方式采用不同的呈现形式：

用户说类型要构建的内容
“X 是如何运作的”示意图用空间隐喻展示其运作机制
“X 由哪些组件构成”结构图用带标签的方框展示包含关系
“带我逐步了解”流程图使用顺序排列的方框和箭头
“比较 X 和 Y”对比布局使用并排卡片展示指标
“给我看看数据”图表使用 Chart.js 或内联数据可视化
“解释 X”（空间概念）交互式讲解图使用滑块、控件和实时状态

回答“X 是如何运作的”时，默认使用示意图——这是更有野心的选择。不要因为流程图看起来更稳妥就退而求其次。

单个回答中的多个可视化

在同一个回答中生成多个可视化，并与文字交替呈现：

  1. 文本块（引入／解释）
  2. 可视化
  3. 文本块（过渡）
  4. 可视化（如有需要）

不要连续放置多个可视化，中间不加文字。

输出包装格式

将可视化输出放在语言标签为 visualizer 的代码围栏中，这样客户端就能检测到内容并将其路由到 iframe 渲染器：

```visualizer
<svg width="100%" viewBox="0 0 680 400">
  ...
</svg>
```

客户端会移除代码围栏，并将内容注入 iframe，同时预先加入主题变量。

快速参考

规则值
SVG viewBox 宽度始终为 680px
字号标签 14px，仅副标题使用 12px
描边宽度边框和边缘均为 0.5px
每张图表的颜色上限2-3 个色阶
方框副标题长度≤5 个词
圆角半径（SVG）默认使用 rx="4"，强调时使用 rx="8"
圆角半径（HTML）var(--border-radius-md) 或 -lg
最小字号11px
文本字重仅使用 400 常规字重和 500 粗体
标题字号h1=22px，h2=18px，h3=16px

评论

支持 Markdown