answer-me-with-html - 让 AI 把回答渲染成可读网页的 Agent 技能

answer-me-with-html 是一个给 AI 编程 Agent 用的技能（skill）。它要解决的问题很具体：当你想让模型把答案画成图、排成表、做成时间线时，直接让它手写 HTML 意味着模型要逐行敲出每一段 CSS、每一个包裹用的 div、每一个 SVG 坐标，这些输出 token 既贵又要等。这个技能把工作拆成两半——模型只写一份简短的 Markdown 草稿，随技能附带的 CLI 负责渲染成页面。据项目自述，模型写草稿所需的 token 大约只有手写 HTML 的七分之一。

它适合已经在用 Claude Code、Codex、Cursor、OpenCode 这类 Agent 工具、并且经常需要解释复杂概念、梳理代码结构、做多方案对比的人。如果你只是问一句「ls 怎么显示隐藏文件」，据项目说明，Agent 会判断不值得出页面，直接给一行回答。

维护者与状态

项目由 QingYunA 维护，仓库创建于 2026-10-02，最后一次提交在 2026-10-04。截至 2026-10-04，星标数为 824。事实表显示该项目尚无正式 release，也就是说目前没有打出版本号可供固定引用，安装方式以仓库中的技能目录和命令行工具为准。

主要能力

以下能力均来自项目自述，未经本站实测。

• 按问题类型自动出页面。据 README 的对照表，问「解释 TCP 三次握手」会得到时序图、状态图和标志位表格；问「这个仓库的模块怎么组织」会得到目录树加调用图；问「Redis 还是 Memcached」会得到带 ✓ 和 ✗ 的对比表加结论；问「这段话有什么问题」会逐句标注问题词和改法；问「Kubernetes 是怎么来的」会得到一条高亮关键时刻的时间线。
• 草稿与渲染分离。Agent 写 Markdown 草稿后交给技能自带的 CLI，项目自述渲染耗时约 50 毫秒。页面保存在 ~/.answer-me-with-html/pages/，右上角按钮可切换主题与明暗模式，也能复制生成该页面的 Markdown 原文。
• 讲解视频模式。可以要求生成 3Blue1Brown 风格的讲解视频：草稿里每个节拍配一行旁白，am video 把它变成播放页。据项目说明，第 N 行旁白播放时第 N 步图示出现，箭头自行绘制；旁白里写 [Server] 这样的方括号会把镜头推向该节点并高亮；同名节点在下一幕会滑移到新位置而不是硬切。配音优先使用 ElevenLabs（需设置 ELEVENLABS_API_KEY），否则用系统语音，两者都没有时只出字幕。视频默认蓝图绘图风格，写 theme: 3b1b 可切换深色风格。
• 常开模式（可选）。默认只在需要时出页面；开启常开模式后，Agent 每轮会收到一条约 90 token 的提醒，凡是给出结论、总结、计划或对比，都会附一个 2 到 4 个面板的小页面，并把路径放在回复末尾。这些页面不会自动弹开。据项目说明，Claude Code 在 plan 模式下不生成页面。
• 设置走斜杠命令。可配置项包括是否自动打开浏览器（open）、常开模式（always）、默认主题（theme，可选 blueprint 或 shadcn）、颜色模式（mode）、写作检查强度（style，可选 off、80 警告或 strict 拒绝渲染）、每周检查更新（update_check）以及视频配音方式（voice）。配置存放在 ~/.answer-me-with-html/config.json。

使用入口

仓库地址：QingYunA/answer-me-with-html。

据项目说明，安装前需要 Node.js 20 或更高版本，没有单独的 npm install 步骤，CLI 已打包在技能内。推荐做法是让 Agent 自己安装，把下面这段交给 Claude Code、Codex、Cursor、OpenCode 或其他 Agent：

Install the Answer me with HTML skill: run `npx -y skills add QingYunA/answer-me-with-html -g -y`, and pass `-a` with your own agent name (for Claude Code, `-a claude-code`).

也可以直接执行一条命令，安装器会询问装到哪些 Agent：

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

Claude Code 用户还可以走插件市场：

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

手动安装则是把 skills/answer-me-with-html 目录复制进对应 Agent 的技能目录，例如 Claude Code 的 ~/.claude/skills/、Codex 的 ~/.codex/skills/、Cursor 的 ~/.cursor/skills/、OpenCode 的 ~/.config/opencode/skill/。项目自述安装后无需额外设置。

许可与限制

许可证为 MIT。

已知限制与前置条件（据项目自述）：

• 运行需要 Node.js 20 或更高版本。
• 导出 MP4 视频需要机器上装有 Chrome、ffmpeg 和 Node.js 22 以上版本，导出耗时约为视频时长的 1.3 倍。
• 项目自述其基准测试显示，输出 token 中位数从 6873 降到 923，耗时从 46 秒降到 13 秒，但单次回答成本基本持平（0.22 美元对 0.26 美元）——因为技能增加了两次短回合，且每一回合都要重新读取对话上下文。项目自己的说法是「省下的是等待，不是账单」。这些数字来自维护者自述的测试，本站未复现。
• 更新是手动的，工具每周在后台检查一次新版本并提示，但不会自行更新。
• 常开模式在 Claude Code 中需要额外安装一个插件，其他 Agent 需要把规则写进自己的规则文件（如 AGENTS.md）。