Visualizer logo

Visualizer

OrganizationPopular
Pinvou
visualizer

当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务；纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能；以文案排版为主体的静态报告页归 visual-design。

Overview

PublisherPinvou
Repositorypinvou-agent
Skill namevisualizer
Stars
2K
Forks
281
Bundled files
2
LicenseMIT
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 2 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by Pinvou on GitHub. Read the source before you install it.

Installation

Install the Visualizer AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git /tmp/pinvou-agent
mkdir -p .claude/skills
cp -r /tmp/pinvou-agent/pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer .claude/skills/visualizer
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Visualizer in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Visualizer on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Visualizer is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

数据分析可视化

把结构化数据、表格汇总、业务指标或用户描述的数据口径转成可交付的 HTML 数据可视化仪表盘。

成功判定

一次合格交付必须同时满足：

  • 已读取 references/visualizer-design-system.md。
  • 已用 write_file 写出 .html 文件。
  • 已用本技能目录下的 scripts/validate_visualizer_html.py 校验最终 .html，且结果为通过。
  • 已调用 present_artifact(path, title) 展示产物卡。
  • HTML 使用 Chart.js UMD：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。
  • 每个 <canvas> 都有 role="img"、描述性 aria-label 和 fallback text。
  • Chart.js 默认 legend 关闭，并使用自定义 HTML legend。
  • 数据先聚合再入图，展示数字经过合理四舍五入。
  • 图表关键数值常驻显示，不只依赖 hover tooltip；数据密集时显示首尾、峰值、谷值或 Top N 等关键标签。

失败判定

如果发生以下任一情况，必须重写产物再交付：

  • 使用 ECharts、Plotly、Vega、D3 伪地图或任何非 Chart.js 图表库，除非用户明确点名要求。
  • HTML 中出现 echarts、Plotly、cdn.plot.ly、cdn.jsdelivr.net/npm/echarts。
  • 直接在聊天正文粘贴完整 HTML，而没有写 .html 文件和展示 artifact。
  • <canvas> 缺少 role="img"、aria-label 或 fallback text。
  • 使用默认 Chart.js legend，而没有自定义 HTML legend。
  • 图表数值只出现在 hover tooltip 中，画布上没有常驻数值标签。
  • 使用彩虹渐变 KPI、重阴影、发光、深色 hero、emoji 或营销页式大标题。
  • HTML/CSS/JS 中出现 <!-- comments -->、/* comments */ 或独立行 // comments。
  • scripts/validate_visualizer_html.py 返回失败。

必须先读

在执行任务前读取 references/visualizer-design-system.md，并遵守其中的 Chart.js、布局、配色、无障碍和流式输出规则。若任务很小，也至少遵守本文件的硬性规则。

交付方式

Pinvou 的聊天正文会转义或清理 <script>，所以不要把带 Chart.js 的 HTML 直接贴在普通回复正文里当最终成品。

必须按以下流程交付：

  1. 用 write_file 写出一个 .html 文件，文件内容可以是完整可打开 HTML，必须包含可执行的 Chart.js 脚本。
  2. 用 exec_shell 运行本技能目录下的校验器： python <visualizer-skill-dir>/scripts/validate_visualizer_html.py <artifact.html> --json 其中 <visualizer-skill-dir> 是 load_skill 返回的 Source 所在目录。
  3. 如果校验失败，读取错误列表，重写 .html，再次运行校验器；不要展示失败产物。
  4. 只有校验通过后，才能调用 present_artifact(path, title) 展示产物卡。
  5. 普通回复只保留简短说明，不重复粘贴整段 HTML。

触发边界

使用本技能：

  • Excel/CSV/JSON/表格数据转图表、转看板、转可视化报告。
  • 用户说“做数据可视化”“做图表”“生成看板”“数据仪表盘”“可视化图表”。
  • 数据分析仪表盘、指标看板、可视化报告。
  • 柱状图、折线图、组合图、散点图、热力图、图表卡片。
  • 用户明确提到 Chart.js、canvas、数据可视化。

不使用本技能：

  • 落地页、品牌页、banner、海报、简历、作品集等以视觉表达为主、没有数据图表核心诉求的任务。
  • 需要真实地图但没有真实拓扑数据的任务；不要手绘伪地图。
  • 需要在线查询最新数据但用户没有提供数据时，先说明需要数据源或使用可用查询工具获取数据。

数据纪律

  • 不要编造真实业务数据。缺数据时先询问，或明确生成空模板/示例模板。
  • 用户给出 Excel、CSV、JSON、表格或明细数据时，先做必要聚合，再写入图表。
  • 所有展示数字都要四舍五入到合理精度。
  • 图表解释写在普通回复中；HTML 产物内部只放视觉元素、必要标题、图例和简短标签。

HTML 产物硬规则

  • 输出 .html 文件，不输出 Markdown 包裹的 HTML。
  • 使用 Chart.js UMD：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。
  • 每个 <canvas> 必须有 role="img"、描述性 aria-label 和 fallback text。
  • 默认 legend 必须关闭，使用自定义 HTML legend。
  • 默认在图表关键数据点上常驻显示数值标签，不只依赖 hover tooltip；柱状图显示在柱体末端或顶部，折线图显示在关键节点附近，饼图/环图显示分类占比。数据密集时只显示首尾、峰值、谷值或 Top N 等关键标签，避免重叠；完整数值保留在图例或 KPI 卡中。
  • canvas 外层 wrapper 设置高度，canvas 本身不直接设置高度。
  • Chart.js 配置里使用硬编码 hex，不使用 CSS 变量。
  • 页面视觉要扁平、紧凑、无渐变背景、无阴影、无深色外层容器。
  • 不写 HTML 注释、CSS/JS 块注释或行内叙事注释。
  • 不写独立行 // 注释；生成脚本内也不要把解释性注释复制进最终 HTML。
  • 不使用 emoji；需要图形标识时用 CSS 小色块或简洁 SVG。
  • 字号保持紧凑：h1 15px、h2 14px、h3 13px、正文 13px；只使用 400 和 500 字重。
  • 推荐结构：2-4 个 KPI 卡片、1 个宽趋势图、1-2 个辅助对比图、每个图表上方放自定义 legend。
  • HTML 内只放视觉元素、标题、图例和必要标签；详细分析写在普通回复中。
  • 若引用完整规范与本文件冲突，以本文件的交付方式为准。

交付前机器校验

本技能自带校验器 scripts/validate_visualizer_html.py，用于拦截常见违规项，包括注释残留、ECharts/Plotly、缺失 Chart.js UMD、canvas 无障碍缺失、默认 legend 未关闭、缺少自定义 legend、渐变/阴影/模糊/发光、异常字重、过小字号和 emoji。

校验器失败时必须按错误逐项修复并重跑，直到输出 ok: true 或文本 OK visualizer artifact。不要把“校验失败但看起来可用”的 HTML 交付给用户。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Visualizer AI skill do?

当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务；纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能；以文案排版为主体的静态报告页归 visual-design。

Why use Visualizer on TypingMind?

Because you install it once and use it with any model. Visualizer is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Visualizer in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Visualizer?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Visualizer?

As many as you like. As long as a model supports skills, you can use Visualizer with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Visualizer AI skill free?

Yes. It is published on GitHub by Pinvou under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
anthropics logo

Brand Guidelines

anthropics
OrganizationPopular

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…

20.9K
176.9K
Instructions
View
anthropics logo

Canvas Design

anthropics
OrganizationPopular

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create…

20.9K
176.9K
81 files
View
anthropics logo

Frontend Design

anthropics
OrganizationPopular

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated…

20.9K
176.9K
Instructions
View
anthropics logo

Web Artifacts Builder

anthropics
OrganizationPopular

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state…

20.9K
176.9K
3 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇