Answer me with HTML

Answer me with HTML 是一款面向 AI Agent 的开源技能插件，核心解决“复杂问题回答冗长难读”的痛点。它让 Agent 不再输出大段文字或手写完整 HTML，而是撰写极简的结构化 Markdown 稿件，由内置 CLI 在约 50ms 内生成排版精美、图表自动布局的单文件 HTML 页面。

核心机制：内容与呈现彻底分离

传统方式要求模型逐字输出 CSS、div 嵌套、SVG 坐标，大量 Token 消耗在重复样式上。Answer me with HTML 将这一负担转移至本地 CLI：

• Agent 只写内容：使用领域特定语法（如 sequence、flow、tree）描述信息结构
• CLI 负责渲染：自动选择模板、计算布局坐标、套用主题、执行写作检查
• 产物自包含：单一 .html 文件，无 CDN/外部字体依赖，离线可用，可分享

💡 关键设计：模型输出的 Token 仅为最终页面的 ~1/7，因为所有视觉逻辑已预编译进 CLI，无需每次重新生成。

性能实测数据

⚠️ 注意：当 Agent 环境上下文极重（~51K tokens）时，Skill 额外两轮短对话可能导致总成本反超约 20%。轻中量上下文下优势显著。

组件体系：按信息形状智能选型

Agent 根据问题类型自动选择最适配的可视化组件：

解释视频：3Blue1Brown 风格生成

通过 am video 命令，将带旁白的稿件转为音画同步的播放页：

• 逐步构建：第 N 句旁白播出时，图中动态出现第 N 步，箭头一笔画出
• 镜头聚焦：旁白中 [Server] 触发节点高亮与平滑推镜，全图始终可见
• 跨场景变形：同名节点在新场景中平滑位移，避免硬切跳变
• 配音同步：优先 ElevenLabs（需 API Key），回退系统 TTS；每拍时长 = 音频实际长度
• 单文件交付：音频 Base64 内嵌，离线可播；--mp4 导出 1080p 视频（需 Chrome + ffmpeg + Node 22+）

示例：TCP 三次握手视频稿件仅 835 字符（几百 Token），生成完整同步解说页。

STE 受控写作检查：中英双语质量守护

内置 ASD-STE100 简化技术英语规则，渲染时自动校验并提醒：

• 句长控制：操作步骤 ≤20 英文词 / 35 汉字；描述句 ≤25 词 / 45 字；每段 ≤6 句
• 用词简化：替换生僻词（utilize→use, prior to→before）；删除中文虚动词（“进行优化”→“优化”）
• 句式规范：提示被动语态、过多“的”字结构、套话（赋能/闭环/抓手）
• 中文词表：纠正错别字（登陆→登录）、模糊量词（尽快/若干/大概）、一词多写（单击→点击、入参→参数）
• 日文支持：含假名稿件自动切换日文模式，UI 按钮与 lang="ja" 属性同步适配

严格程度可通过 /answer-me-with-html config style strict 调整，或在稿件 frontmatter 中指定 style: off/80/strict。

安装与配置指南

一键安装（推荐）

向任意 Agent 发送：

帮我安装 Answer me with HTML：读 https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md，照着做。

或手动执行：

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

配置管理

修改命令：/answer-me-with-html config <key> <value> 或终端 am config set <key> <value>

高频模式：结论即页面

开启后，Agent 每轮给出结论/总结/方案/对比时，自动生成 2–4 面板小页面（--no-open 不弹窗），并在回复末尾附 file:// 链接。闲聊、纯命令输出、Plan 模式下不触发。

Claude Code 用户加装插件：

/plugin install answer-me-with-html-always@answer-me-with-html

其他 Agent 可将规则写入 AGENTS.md，要求“有结论即出页面，先渲染再回复”。

适用场景

• 技术概念讲解（协议、架构、算法流程）
• 仓库/模块关系可视化
• 技术选型多维对比
• 文案/代码逐句评审
• 历史/版本时间线梳理
• 需要离线分享或嵌入文档的可视化内容
• 解释视频制作（教学、演示、科普）

⚠️ 注意事项：

• 非万能：一句话能说清的问题（如 ls -a）仍返回纯文本，Agent 自主判断
• 重上下文成本：>50K tokens 环境可能抵消 Token 节省，建议实测
• 视频导出依赖：MP4 导出需本机安装 Chrome、ffmpeg、Node.js 22+
• ElevenLabs 可选：无 API Key 时自动回退系统语音，不影响核心功能
• 手动更新：工具不自动升级，需 npx skills update 或告知 Agent 更新
• 数据安全：页面/缓存存于 ~/.answer-me-with-html/，清理前会征求确认