Answer Me with HTML Skill：让 Agent 用一页 HTML 回答硬问题

Skill超级捕获手 技术创作者 2026-10-04 1422 阅读

两天 708 星，一个刚在 10 月 2 日创建的 Agent Skill 已经冲上 Trendshift 新品榜，并被 AI Frontier Daily、MindPattern 等多个 AI 资讯源点名推荐。它解决的问题很具体：让 AI Agent 回答复杂问题时，不再吐一大屏 Markdown 文字，而是直接产出一页排版好的 HTML。

总结

answer-me-with-html 是一个跨平台 Agent Skill，核心思路是「模型只写内容，CLI 负责排版」。Agent 先写一段简短 Markdown 草稿，skill 自带的 Node CLI 在约 50ms 内把它渲染成带图表、时序图、对比表的单页 HTML。官方基准显示：相比直接让模型手写 HTML，输出 token 减少 7.4 倍、响应时间快 3.6 倍。两天 708 星的增速让它成为 10 月初最值得注意的新晋 Skill 之一。

功能与原则

  • 核心能力：把「解释概念、对比选型、梳理架构」这类硬问题转成一页可视化 HTML，支持时序图、状态图、目录树、调用图、对比表、时间线。
  • 设计原则：模型只写内容（约原 1/7 的 token），HTML 结构与样式由捆绑的 CLI 模板渲染，既省输出 token 又省等待时间。
  • 成本取舍透明：作者主动披露该 skill 会增加两个短轮次（加载 skill + 跑 CLI），单次成本约 $0.26 vs $0.22，省的是等待时间而非账单——这种不藏短板的基准披露在社区 skill 里很少见。

认可度

  • GitHub Star：708 星（截至 2026-10-04），仓库 2026-10-02 创建，两天内从 0 冲到 700+，Fork 51。
  • Trending 经历：上榜 Trendshift「New 2026」实时趋势榜；MindPattern 于 10-03 发布专项数据分析（「cuts output tokens 7.4x」）；AI Frontier Daily 10-03/10-04 连续两天工具推荐位收录。
  • 基准数据：Claude Sonnet 5.5，3 主题 × 3 次取中位数——输出 token 6,873 → 923，耗时 46s → 13s，复现脚本开源在 bench/ 目录。

链接

GitHub：https://github.com/QingYunA/answer-me-with-html

原作者

QingYunA（GitHub 用户名），开源 Agent Skill 作者，同仓库提供完整中英文 README（README.zh-CN.md），发布即面向中英双语社区；License 为 MIT。

介绍

answer-me-with-html 的使用体验可以概括成一句话：你照常提问，Agent 照常思考，只是最终交付物从「一堵文字墙」变成「一页能读的网页」。安装后，用户不需要改变任何提问习惯——问「解释 TCP 三次握手」，得到的是一张时序图、一张状态机图和一张标志位表格；问「这个仓库的模块怎么组织的」，得到的是目录树加调用图。

项目自带的 Node CLI 是关键：模型输出的是短 Markdown 草稿，不是手写 HTML，所有 div、CSS、SVG 坐标都由 CLI 模板补齐，约 50ms 出页面。官方明确说这不是为了省钱（每轮都会重读上下文，成本基本持平），而是把 46 秒的等待压到 13 秒。仓库还附带 plugins/answer-me-with-html-always 插件、示例目录和可复现的 benchmark 脚本，属于「工程化完整度高于一般社区 skill」的作品。

特点

  • 7.4 倍 token 节省：模型只写内容，输出 token 从 6,873 降到 923（中位数，Sonnet 5.5 实测）。
  • 3.6 倍提速：46 秒 → 13 秒，复杂问题的可读性交付明显更快。
  • 跨 70+ Agent：SKILL.md 标准格式，官方示例覆盖 Claude Code、Codex、Cursor、OpenCode。
  • 零配置：CLI 捆绑在 skill 内，无 npm install 步骤，装完即用。
  • 基准开源可复现：bench/ 目录含逐主题数据与复现脚本。

使用方法

需要 Node.js 20+，三种安装方式任选：

# 方式一：一条命令（推荐，vercel-labs/skills 安装器，支持 70+ 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

# 方式三：手动安装（Claude Code）
git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/amwh
cp -R /tmp/amwh/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

装好后直接提问即可，无需任何额外配置。

使用场景与人群

  • 场景：技术概念讲解（协议、框架原理）、代码库结构梳理、技术选型对比（Redis vs Memcached）、K8s 演进史这类时间线内容、文档段落逐句批改。
  • 人群：需要把复杂结论讲清楚的开发者、写技术文档/做分享的工程师、希望 Agent 交付物「一眼可读」的 Claude Code / Codex / Cursor 重度用户。

输入与输出案例

案例一
– Input：Explain the TCP three-way handshake
– Output：一页 HTML，包含三次握手时序图、连接状态机图、SYN/ACK/FIN 标志位对照表。

案例二
– Input：Redis or Memcached for our cache?
– Output：带 ✓/✗ 的特性对比表 + 结论判定区块；同题直接让模型手写 HTML 需要 9,351 输出 token，用该 skill 仅 899。

GitHub: https://github.com/QingYunA/answer-me-with-html

评论区

0 条评论

登录后可评论。

Skill超级捕获手 1422 阅读