一个智能体技能,让编程助手把图表、代码对比审阅、计划和表格生成为样式精美的 HTML 页面,替代终端里的 ASCII 字符图。
QingYunA/answer-me-with-html
一个 Agent Skill,让 AI 把复杂问题的回答生成为一页可离线查看的 HTML,含图表与表格。
- Star
- 3,953
- Fork
- 275
- 未关闭 Issue
- 8
- 最近提交
- 10小时前
这是什么?
Answer me with HTML 是一个面向 Claude Code、Codex、Cursor 等编码 Agent 的 Skill。遇到需要多段说明的复杂问题时,Agent 先写一份简短的 Markdown 草稿,再交给随 Skill 附带的 CLI 渲染成一个独立的 HTML 文件。布局、主题、SVG 图形和流程图的排版都由 CLI 完成,模型只需负责内容。
页面支持流程图、时序图、ER 图、树形结构、时间线、图表、对比表格和逐词注释,内置 blueprint、shadcn、paper 三种主题。每个页面都内嵌原始 Markdown,不依赖 CDN 或网络字体,可离线打开。项目还提供可选的讲解视频模式,生成带旁白、逐步展开的播放页。
CLI 需要 Node.js 20 或更高版本,安装 Skill 后无需额外的 npm install。内置的写作检查参考 ASD-STE100 规则,会提示过长的句子、被动语态和含糊的措辞。
核心功能
- 01将 Markdown 草稿渲染为单个可离线打开的 HTML 文件,无外部依赖。
- 02自动排版流程图,并按标签宽度分布时序图。
- 03提供 blueprint、shadcn、paper 三种主题,均支持浅色与深色模式。
- 04表格可用 ✓ ✗ 标记,代码块可直接引用源文件中的真实代码。
- 05可生成带旁白的讲解视频播放页,并可在浏览器中导出。
适用场景
- 用时序图和状态图讲解协议或系统设计。
- 用目录树和调用图梳理代码库的模块关系。
- 在一页内对比数据库等技术选型。
- 审阅方案时在页面上做决策,再把回复粘贴回 Agent。
快速上手
- 1
安装 Node.js 20 或更新版本
- 2
在 Claude Code 中安装插件
/plugin marketplace add QingYunA/answer-me-with-html - 3
从插件市场安装该插件
/plugin install answer-me-with-html@answer-me-with-html - 4
或使用 skills 安装器安装到任意智能体
npx skills add QingYunA/answer-me-with-html
使用前须知
- CLI 和技能需要安装 Node.js 20 或更新版本。
- 始终开启模式默认关闭,需要在智能体的规则文件中添加规则。
- 更新需要手动进行;CLI 只会在后台检查新版本。
标签
常见问题
- answer-me-with-html 是什么?
- 一个 Agent Skill,让 AI 把复杂问题的回答生成为一页可离线查看的 HTML,含图表与表格。 Answer me with HTML 是一个面向 Claude Code、Codex、Cursor 等编码 Agent 的 Skill。遇到需要多段说明的复杂问题时,Agent 先写一份简短的 Markdown 草稿,再交给随 Skill 附带的 CLI 渲染成一个独立的 HTML 文件。布局、主题、SVG 图形和流程图的排版都由 CLI 完成,模型只需负责内容。
- answer-me-with-html 可以免费使用吗?用的什么许可证?
- answer-me-with-html 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- answer-me-with-html 还在维护吗?
- 活跃维护中。answer-me-with-html 最近一次提交是在 2026年10月20日。
- answer-me-with-html 适合用来做什么?
- 用时序图和状态图讲解协议或系统设计。 用目录树和调用图梳理代码库的模块关系。 在一页内对比数据库等技术选型。 审阅方案时在页面上做决策,再把回复粘贴回 Agent。
- answer-me-with-html 怎么安装和运行?
- 安装 Node.js 20 或更新版本 在 Claude Code 中安装插件: /plugin marketplace add QingYunA/answer-me-with-html 从插件市场安装该插件: /plugin install answer-me-with-html@answer-me-with-html 或使用 skills 安装器安装到任意智能体: npx skills add QingYunA/answer-me-with-html
- 在哪里获取 answer-me-with-html?
- 源代码和安装说明在 GitHub 上:https://github.com/QingYunA/answer-me-with-html
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
为 AI Agent 一键接入 Twitter、Reddit、YouTube、B站、小红书等平台读取与搜索能力的命令行工具。
面向 Claude Code、Codex 等 AI 智能体的插件,用 LLM 编译可检索、兼容 Obsidian 的知识库。
一套面向 AI 编程代理的 3D 可视化技能,帮助把创意转化为 Three.js 或 Blender 场景。
一套联网实查、多源核验的出行路书工作流,输出可断网打开的单文件 HTML 攻略。
一个 Agent Skill,把主题做成带配音、硬字幕和封面的讲解视频,用 HTML 写画面并本地渲染为 MP4。