28672032962867203296/hermes-agent/skills/agent-visualization-flint/SKILL.md

agent-visualization-flint

Skill0 starsChanged 3 months agoMITView on GitHub

Agent 可视化输出：借鉴 Microsoft Flint 思路，用 SVG/HTML/ECharts 让 Hermes 能直接生成图表、仪表盘、信息图而非纯文字回复。

In this repository219 other files it gives its agents.
- agent-doctrineSkill
- agent-evaluation-frameworkSkill
- hermes-agentSkill
- bailian-cliSkill
- edge-browser-automationSkill
- computer-useSkill
- jupyter-live-kernelSkill
- backup-strategiesSkill
- browser-automationSkill
- chinese-ai-free-apiSkill
- cicd-pipeline-templatesSkill
- copybaraSkill
- devops-toolkitSkill
- email-deliverabilitySkill
- monitoring-observabilitySkill
- obsidian-maintenanceSkill
- obsidian-troubleshootingSkill
- openclaw-windowsSkill
- openclaw-workerSkill
- webhook-subscriptionsSkill
- windows-dev-environmentSkill
- windows-masterSkill
- zero-downtime-deploySkill
- codebase-inspectionSkill
- github-workflowSkill
- adaptive-communicationSkill
- agent-cost-dashboardSkill
- agent-evolutionSkill
- agent-governanceSkill
- agent-osSkill
- context-efficient-toolsSkill
- context-loss-awarenessSkill
- creative-synthesisSkill
- hermes-desktop-pluginsSkill
- emotional-intelligenceSkill
- graph-engineering-workflowSkill
- hermes-maintenanceSkill
- hermes-voiceSkill
- hermes-hygieneSkill
- identity-coreSkill
- income-loopSkill
- master-synthesisSkill
- meta-cognitionSkill
- reasoning-engineSkill
- self-preservationSkill
- teaching-abilitySkill
- temporal-awarenessSkill
- hermes-themesSkill
- thinking-visualizationSkill
- user-modelingSkill
- voice-full-restoreSkill
- knowledge-graph-traversalSkill
- mcp-browser-canvasSkill
- free-api-gatewaySkill
- native-mcpSkill
- web-reverse-apiSkill
- ai-edaSkill
- huggingface-hubSkill
- industrial-ai-siemens-mcpSkill
- industrial-ai-unifiedSkill
- The first 60 shown.

The file

Create a free account to mount

Files

SKILL.md

Agent 可视化 — Flint 模式

核心理念

Microsoft Flint (HN 327分) 提出：AI Agent 不应只输出文字，应该像人一样用图表沟通。Hermes 已具备的能力组合可以直接实现这个模式。

Hermes 已有的可视化能力

能力	技能	用途
SVG 架构图	architecture-diagram	云架构/系统拓扑
手绘风图	excalidraw	流程图/架构图
信息图	baoyu-infographic	21种布局×21种风格
HTML 原型	sketch / claude-design	快速原型/仪表盘
ASCII 艺术	ascii-art	终端内图表
ECharts 图表	浏览器直接渲染	折线图/柱状图/饼图
Mermaid 图	写代码时内联	序列图/流程图/类图

Flint 模式的三级输出

L1 终端模式：ASCII 图表 + 结构化数据（纯文本环境）
L2 Web 模式：HTML/SVG 单文件，浏览器打开即看
L3 交互模式：ECharts 仪表盘，支持缩放/筛选/下钻

用法

生成架构图

触发 architecture-diagram 技能 → 输出暗色主题 SVG

"画一下 Hermes 的 MCP 网关架构" → SVG 文件

生成数据图表

用 excalidraw 生成手绘风 JSON → 浏览器渲染

"把最近的 token 用量画成趋势图" → 手绘风折线图

生成信息图

触发 baoyu-infographic → 选择布局+风格

"把这次扫描的 5 个项目做成信息图" → 可视化对比

生成交互仪表盘

用 ECharts CDN + 单 HTML 文件

"做一个 Agent 生态的实时仪表盘" → HTML 文件，浏览器打开

Flint 设计原则

Agent-first：图表不是给人手动画的，是 Agent 按数据模板自动生成的
声明式：告诉 Agent "画什么"而非"怎么画"
渐进增强：先文字概述 → 再图表佐证 → 最后交互探索
零依赖输出：单 HTML 文件，CDN 引用，不需要安装任何东西
暗色优先：Agent 工作环境多为暗色终端/IDE

参考

Microsoft Flint: https://microsoft.github.io/flint-chart/
Flint 核心理念：为 AI 时代设计的声明式可视化语言

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free