@tom_doerr: 将复杂的终端输出转换为带样式的HTML页面 https://github.com/nicobailon/visual-explainer…

将复杂的终端输出转换为样式化的 HTML 页面 https://t.co/m6mtg0k5jT https://t.co/GJfEjkmI9V — # nicobailon/visual-explainer 来源：https://github.com/nicobailon/visual-explainer # visual-explainer 一种智能体技能，能将复杂的终端输出转换为你真正想读的样式化 HTML 页面。 许可证：MIT 让智能体解释系统架构、审查代码差异或将需求与计划进行比较。它不会生成 ASCII 艺术和表格绘制字符，而是生成一个自包含的 HTML 页面并在浏览器中打开。 > draw a diagram of our authentication flow > /diff-review > /plan-review ~/docs/refactor-plan.md https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec ## 为什么 每个编码智能体在绘制图表时都会默认使用 ASCII 艺术。表格绘制字符、等宽对齐技巧、文本箭头。对于简单情况这还行，但一旦超出三框流程图，就变成了一团乱麻。 表格更糟。让智能体将 15 个需求与计划进行比较，你得到的是满屏幕的竖线和破折号，在终端里还会换行断裂。数据都在，但阅读起来非常痛苦。 这个技能解决了这个问题。真正的排版、深色/浅色主题、支持缩放和平移的交互式 Mermaid 图表。无需构建步骤，除浏览器外无任何依赖。 ## 安装 | 工具框架 | 支持方式 | 安装路径 / 行为 | |—|—|—| | Claude Code | 市场插件 | 保留市场形态，源码位于 plugins/visual-explainer/ | | Pi | 包元数据 + 安装程序 | package.json 声明技能和提示词；install-pi.sh 安装到 ~/.pi/agent/skills/visual-explainer 和 ~/.pi/agent/prompts/ | | Codex CLI | 原生技能路径 + 可选提示词 | 复制到 ~/.codex/skills/visual-explainer；如果 Codex 构建支持，可选提示词放入 ~/.codex/prompts/ | | OpenCode/opencode | 已知技能/命令路径 | 复制到 ~/.config/opencode/skill/visual-explainer；可选命令放入 ~/.config/opencode/command/ | | Cursor | 基于规则指导 | 添加提供的 .mdc 规则；Cursor 不视为原生智能体技能支持 | | OpenClaw | 轻量 AGENTS/规则指导 | 使用附带 AGENTS 指导配合规范技能目录 | Claude Code（市场）： shell /plugin marketplace add nicobailon/visual-explainer /plugin install visual-explainer@visual-explainer-marketplace 注意：Claude Code 插件将命令命名空间为 /visual-explainer:command-name。 Pi： bash pi install git:github.com/nicobailon/visual-explainer 或者从本地仓库安装： bash git clone --depth 1 https://github.com/nicobailon/visual-explainer.git pi install ./visual-explainer 包清单声明了规范技能和命令模板： json "pi": { "skills": ["./plugins/visual-explainer"], "prompts": ["./plugins/visual-explainer/commands"] } 如果你之前使用过旧的 curl/手动安装程序，请在使用 pi install 前删除那些复制的文件，否则 Pi 会报告技能和提示词冲突，因为用户级副本会遮蔽包资源： bash rm -rf ~/.pi/agent/skills/visual-explainer rm -f ~/.pi/agent/prompts/{diff-review,fact-check,generate-slides,generate-visual-plan,generate-web-diagram,plan-review,project-recap,share-page}.md 如果你更喜欢复制文件而非包管理，旧安装程序仍然有效： bash curl -fsSL https://raw.githubusercontent.com/nicobailon/visual-explainer/main/install-pi.sh | bash Codex CLI： bash git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer mkdir -p ~/.codex/skills ~/.codex/prompts cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.codex/skills/visual-explainer # 可选，仅当你的 Codex 构建支持提示模板时： cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/ rm -rf /tmp/visual-explainer 使用 $visual-explainer 调用，或让 Codex 使用 visual-explainer 技能。如果提示词已安装且支持，使用 /prompts:diff-review、/prompts:plan-review 等。 OpenCode/opencode： bash git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer mkdir -p ~/.config/opencode/skill ~/.config/opencode/command cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.config/opencode/skill/visual-explainer # 可选命令模板： cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.config/opencode/command/ rm -rf /tmp/visual-explainer 通过让 OpenCode 使用 visual-explainer 技能来激活它。命令模板的行为取决于已安装的 OpenCode/opencode 构建版本。 Cursor： 将 configs/cursor/visual-explainer.mdc 添加到你的 Cursor 规则中，或将其内容复制到项目规则 UI 中。这是基于规则的指导，指引 Cursor 到规范技能；它不声称拥有原生智能体技能支持。 OpenClaw： 将 configs/openclaw/AGENTS.md 作为轻量项目指导，并复制或引用 plugins/visual-explainer/ 作为规范技能来源。不包含原生 OpenClaw 插件适配器。 ## 命令 | 命令 | 功能 | |———|———––| | /generate-web-diagram | 为任何主题生成 HTML 图表 | | /generate-visual-plan | 为功能或扩展生成可视化实现计划 | | /generate-slides | 生成杂志品质的幻灯片 | | /diff-review | 可视化差异审查，附带架构比较和代码审查 | | /plan-review | 将计划与代码库进行比较，附带风险评估 | | /project-recap | 项目心理模型快照，方便上下文切换后快速恢复 | | /fact-check | 验证文档与实际代码的准确性 | | /share-page | 将 HTML 页面部署到 Vercel 并获取实时 URL | 当智能体即将在终端输出复杂表格（4 行或以上，或 3 列或以上）时，它也会自动启动——改为渲染 HTML。 ## 幻灯片模式 任何生成可滚动页面的命令都支持 --slides，以生成幻灯片而非页面： /diff-review --slides /project-recap --slides 2w https://github.com/user-attachments/assets/342d3558-5fcf-4fb2-bc03-f0dd5b9e35dc ## 工作原理 .claude-plugin/ ├── plugin.json ← 市场身份 ├── marketplace.json ← 插件目录 plugins/ └── visual-explainer/ ├── .claude-plugin/ │ └── plugin.json ← 插件清单 ├── SKILL.md ← 工作流程 + 设计原则 ├── commands/ ← 斜杠命令 ├── references/ ← 智能体生成前阅读 │ ├── css-patterns.md（布局、动画、主题） │ ├── libraries.md（Mermaid、Chart.js、字体） │ ├── responsive-nav.md（多节页面的粘性目录） │ └── slide-patterns.md（幻灯片引擎、过渡、预设） ├── templates/ ← 参考模板，各有不同调色板 │ ├── architecture.html │ ├── mermaid-flowchart.html │ ├── data-table.html │ └── slide-deck.html └── scripts/ └── share.sh ← 将 HTML 部署到 Vercel 以便分享 输出： ~/.agent/diagrams/filename.html → 在浏览器中打开 技能会自动选择合适的方式：Mermaid 用于流程图和图表，CSS Grid 用于架构概览，HTML 表格用于数据，Chart.js 用于仪表盘。 ## 限制 - 生成的 HTML 可移植且自包含，但自动打开取决于工具框架、浏览器访问和沙盒规则。 - 除非用户指定其他路径，所有工具框架都将可视化输出写入 ~/.agent/diagrams/。 - 切换操作系统主题需要刷新页面才能更新 Mermaid SVG。 - /share-page 使用 plugins/visual-explainer/scripts/share.sh，该脚本期望在标准 Pi 技能位置有一个兼容 Pi 的 vercel-deploy 技能。其他工具框架仍然可以生成和打开页面，但分享功能可能需要单独安装该依赖。 - 结果因模型能力而异。 ## 致谢 借鉴了 Anthropic 的 frontend-design skill（https://github.com/anthropics/skills）和 interface-design（https://github.com/Dammyjay93/interface-design）的思想。 ## 许可证 MIT