visual-explainer
将复杂终端输出转换为美观HTML页面的Agent技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：visual-explainer。 它的用途是：将复杂终端输出转换为美观HTML页面的Agent技能 完整的 Skill 内容见：https://321skill.com/skills/visual-explainer/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请画出我们微服务架构的身份验证流程。’ 或者使用命令 `/diff-review` 来可视化代码差异。AI助手会调用该技能，将原本在终端中杂乱无章的ASCII框图或表格，转换成一个排版精美、带有可缩放图表的独立HTML页面，并自动在浏览器中打开，让你能清晰、舒适地审阅。
介绍
visual-explainer 解决了AI助手在生成图表、对比表格或系统架构图时，只能输出难以阅读的ASCII字符画或纯文本表格的问题。这些原始输出在终端中常常格式错乱、难以理解，尤其在处理复杂信息时体验很差。
该技能通过一个简单的命令或工具调用，能将AI助手生成的复杂文本内容（如架构描述、代码差异对比、计划与需求对比等）实时转换为一个独立的、美观的HTML页面，并在浏览器中自动打开。转换后的页面采用现代网页排版，支持深色/浅色主题，并能将文本描述自动渲染成可交互的Mermaid图表。
它非常适合需要频繁与AI讨论技术方案、审查代码变更或梳理复杂逻辑的开发者、技术负责人和架构师。当AI助手给出的文字解释不够直观，或者你需要一份清晰的可视化文档用于分享或存档时，这个技能能极大提升沟通效率和理解速度。
与同类仅优化终端显示或依赖复杂绘图工具的技能不同，visual-explainer的核心优势在于其“无侵入性”和“即时性”。它不改变AI助手的原始工作流程，只是在最终输出环节进行格式转换，无需额外的构建步骤或依赖复杂的图形库，生成的HTML文件自包含，在任何现代浏览器中都能完美呈现。
核心特点
核心区别在于它专注于将AI助手生成的**纯文本逻辑描述**（而非代码或数据）实时转换为美观、可交互的可视化网页，解决了终端阅读复杂ASCII图表的根本痛点；同时它完全自包含，无需任何外部依赖或构建流程。
注意事项
不适合需要生成高度定制化、带复杂交互或动态数据的专业级图表场景。
常见问题
visual-explainer支持哪些AI助手？
支持Claude Code、Pi、Codex CLI、OpenCode/opencode等多种Agent平台，安装方式各异。
生成的HTML图表可以编辑吗？
生成的HTML是静态文件，图表由Mermaid渲染，可在支持Mermaid的编辑器中修改源码后重新生成。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/visual-explainer/raw/index.md 读取 visual-explainer 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/visual-explainer/raw/index.md（查看排版版本）