跳到主要内容
AI教程

使用 Answer me with HTML 将 AI 答案转换为易读页面

了解 Answer me with HTML 如何将简洁的 AI 生成 Markdown 转换为结构清晰、视觉丰富的页面。本教程涵盖安装、日常提示词、直接 CLI 渲染、主题、组件、写作检查、设置，以及可选的始终启用模式。

AI我搜编辑部阅读约 13 分钟
使用 Answer me with HTML 将 AI 答案转换为易读页面

Answer me with HTML 的作用

Answer me with HTML 是一种智能体技能，可将复杂答案转换为易读、独立完整的 HTML 页面。它不会要求模型编写每一个 HTML 元素、CSS 规则和 SVG 坐标，而是让模型先生成一份简短的 Markdown 草稿。随附的 CLI 随后负责布局、样式和图表渲染。

这种分工减少了生成内容和等待时间。在项目基准测试中，该技能的输出中位数为 923 个 token，而不是 6,873 个；完成答案仅需 13 秒，而不是 46 秒。由于额外的智能体回合需要重新读取对话上下文，测得的成本基本保持不变。

Answer me with HTML 页面示例

该工具适用于受益于结构化呈现的信息，包括架构说明、多步骤流程、比较、时间线、模块树以及带注释的写作审查。简单问题仍然可以得到简单的文本答案；除非你明确要求生成页面，否则由智能体自行判断页面是否有必要。

主要功能

  • 紧凑的模型输出： 模型编写内容，而不是生成数百行重复的 HTML、CSS 和 SVG。
  • 代码驱动的布局： CLI 计算面板位置和图表坐标，减少标签被截断和间距不均的问题。
  • 实用的校验： 如果草稿包含错误，CLI 会报告行号、组件和正确示例，帮助智能体进行修复。
  • 可视化组件： 草稿可以包含流程图、时序图、树状图、时间线、限制项、注释、键值块、提示框和比较表。
  • 两种主题： 可选择工程风格的 blueprint 主题或基于卡片的 shadcn 主题。两者都支持浅色和深色模式。
  • 便携式输出： 每个结果都是一个不含 CDN 链接或网页字体的 HTML 文件，可以离线打开并轻松分享。
  • 嵌入源内容： 每个页面都会保留创建它时使用的 Markdown。页面中的 Copy source 控件可以取回该草稿。
  • 写作检查： 系统会检查英文和中文草稿中的长句、冗长表达、被动语态以及相关的文风问题。
该技能生成的可视化 AI 答案

要求与安装

你需要 Node.js 20 或更高版本。正常安装技能不需要单独执行 npm install，因为 CLI 及其运行时依赖已随技能一同打包。

选项 1：让智能体安装

推荐的方式是向你的编程智能体发送安装请求。安装程序支持 Claude Code、Codex、Cursor、OpenCode 以及许多其他智能体。

运行 npx -y skills add QingYunA/answer-me-with-html -g -y 安装 Answer me with HTML 技能。使用 -a 传入相应的智能体名称，例如 -a claude-code。然后阅读其 SKILL.md，并创建一个解释 TCP 三次握手的页面。

选项 2：使用交互式安装程序

运行以下命令，并选择要安装该技能的智能体：

npx skills add QingYunA/answer-me-with-html

该命令使用 vercel-labs/skills 安装程序，支持 70 多种智能体。

选项 3：安装 Claude Code 插件

在 Claude Code 中添加市场并安装插件：

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

选项 4：手动安装

克隆仓库，并将技能目录复制到智能体的技能文件夹中。对于 Claude Code，使用：

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

其他文档中列出的位置包括 Codex 的 ~/.codex/skills/、Cursor 的 ~/.cursor/skills/ 以及 OpenCode 的 ~/.config/opencode/skill/。安装后无需其他设置。

生成你的第一个页面

  1. 提出一个有实质内容的问题。 可以尝试 Explain the TCP three-way handshake、Map out how the modules in this repository fit together 或 Redis or Memcached for our cache?。
  2. 让智能体选择呈现方式。 它会编写一份简短的 Markdown 草稿，并将其传给随附的 CLI。
  3. 打开结果。 默认情况下，生成的页面会在浏览器中打开。
  4. 找到保存的文件。 生成的页面存储在 ~/.answer-me-with-html/pages/ 下。
  5. 使用页面控件。 右上角的控件可以切换主题或颜色模式，并复制源 Markdown。

如果智能体没有自动选择该技能，可以添加类似 Explain it in HTML 的直接指令。

渲染后的技术解释页面

工具如何选择组件

智能体会根据所需呈现信息的形态，匹配合适的组件：

  • flow 表示架构、调用链、决策和分组系统。
  • sequence 展示多个参与者随时间交换的消息。
  • tree 展示文件夹、模块和分类体系。
  • timeline 整理历史、发布版本或阶段。
  • limits 将某个值与其限制进行比较。
  • annot 为句子添加词级注释。
  • kv 显示元数据或标题块信息。
  • callout 突出结论、警告或提示。
  • Markdown 表格支持比较；包含 ok、no 或 warn 的单元格会变成可视化状态标记。

自行编写并渲染草稿

无需使用代理，你也可以使用随附的 CLI。草稿以可选的 front matter 开头，并将每个二级标题作为一个面板。以下示例为 TCP 三次握手创建时序图和流程图：

---
title: TCP three-way handshake
theme: blueprint
---
## 三次握手 {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C 状态变化 {span=2}
```flow LR
(CLOSED) -> LISTEN: 被动打开
LISTEN -> SYN_RCVD: 收到 SYN / 发送 SYN+ACK
SYN_RCVD -> *ESTABLISHED: 收到 ACK
```

在面板标题中，span=2 会使面板占两列宽，rows=2 会使面板占两行高，而 bare 会移除标题栏。你还可以使用 meta="small text" 添加元数据。

从命令行渲染

CLI 文件位于已安装技能中的 scripts/am.mjs。在代码仓库检出目录中，定义其路径并运行所需命令：

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

第一条命令会渲染草稿并打开它。第二条命令选择输出文件名，并禁止打开浏览器。第三条命令为单次运行覆盖主题。其余命令分别运行写作检查、列出组件并显示设置。

代理通常通过标准输入发送草稿。你也可以这样做：

node $AM render - <<'AM_EOF'
## 单个面板
```flow
A -> B: hello
```
AM_EOF

使用 am help <component> 查看特定组件的完整语法。如果希望将生成的页面存储在默认目录之外的位置，请设置 AM_HOME 环境变量。

配置主题、浏览器行为和写作检查

设置通过命令管理，因此无需手动编辑配置文件。值存储在 ~/.answer-me-with-html/config.json 中。

对于 Claude Code 插件安装，可以打开交互式配置命令，或直接更改设置：

/answer-me-with-html:config
/answer-me-with-html:config open off

使用其他代理时，请使用 /answer-me-with-html config open off，或要求它停止打开浏览器。在终端中使用：

am config
am config set open off
am config reset
  • open 默认为 on，用于控制是否在浏览器中打开新页面。
  • always 默认为 on，但仅在安装了可选的始终启用集成时生效。
  • theme 默认为 blueprint，也接受 shadcn。
  • mode 接受 auto、light 或 dark。
  • style 接受 off、80 或 strict。默认的 80 模式会发出警告，但不会阻止渲染。

草稿中声明的主题会覆盖配置的默认主题。--open 和 --no-open 标志仅对单次渲染覆盖浏览器行为。

浅色和深色页面主题示例

高级提示

启用始终启用模式

通常，只有当回答适合使用页面呈现时，代理才会创建页面。始终启用模式会在回复包含结论、摘要、计划、比较、评审或解释时附加一个小页面。常规页面使用两个到四个面板，并在不打开浏览器的情况下进行渲染。闲聊以及不包含结论的回复保持不变。

对于 Claude Code，请安装附加插件：

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html

运行以下命令即可暂停该模式而无需卸载：

/answer-me-with-html:config always off

其他代理可以在其全局规则文件（例如 AGENTS.md）中采用文档说明的始终启用规则。该规则应要求代理为结论创建小页面，并使用 --no-open 进行渲染，同时跳过闲聊、纯命令输出和要求纯文本的请求。

使用严格写作验证

写作检查基于改编自 ASD-STE100 的可机器检查理念。它偏好短句、常用词、直接命令和一致的术语。英文步骤应少于 20 个单词，描述应少于 25 个单词，段落最多包含六句话。中文检查使用相应的字符限制，并标记选定的重复或含糊表达。

使用以下命令全局启用阻断式验证：

/answer-me-with-html:config style strict

你还可以在草稿中指定 style:，以控制该页面的验证方式。

选择合适的模板

默认的 sheet 模板会将信息排列为面板网格。对于带有目录的单栏页面，请使用 doc。对于 sheet，首页元数据中的 cols 字段用于控制列数。

为每个页面单独覆盖展示设置

当某个页面需要不同设置时，请将展示选项放入草稿的首页元数据中：

---
template: sheet
theme: shadcn
title: 缓存对比
subtitle: Redis 与 Memcached
cols: 3
source: 内部架构评审
---

其他首页元数据字段会显示在页面标题下方。当内置组件无法满足需求时，草稿格式还支持原始 HTML 或 SVG 块，不过内置组件能够提供自动布局方面的优势。

在本地开发项目

由于需要使用仓库中的源代码和测试，贡献者需要常规安装依赖：

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

修改 src/ 下的文件后，请运行 npm run build，以重新构建打包后的 skills/answer-me-with-html/scripts/am.mjs。运行时依赖只有两个：用于解析 Markdown 的 marked，以及用于流程图布局的 Dagre；两者都会打包到 CLI 中。

结语

Answer me with HTML 将内容生成与页面构建分离开来。你的代理编写简洁的 Markdown 草稿，而 CLI 提供布局、图表、主题、验证以及可离线使用的 HTML 文件。首先安装该技能，并要求生成一个可视化解释。然后通过直接使用 CLI 渲染、为每个页面设置主题、执行严格的写作检查，或启用可选的始终运行模式来完善工作流。