Repolode
QingYunA

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. 1

    安装 Node.js 20 或更新版本

  2. 2

    在 Claude Code 中安装插件

    /plugin marketplace add QingYunA/answer-me-with-html
  3. 3

    从插件市场安装该插件

    /plugin install answer-me-with-html@answer-me-with-html
  4. 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 数据每日更新。

相关项目