answer-me-with-html 怎么用?一句话让 Agent 输出可视化网页,安装配置教程

answer-me-with-html 是一个面向 AI Agent 的开源技能(Skill),由开发者 QingYunA 发布在 GitHub 上。它的核心思路来自 Andrej Karpathy 关于「理解大模型输出」的思考:与其让模型吐出一大段文字,不如让它直接生成一个可交互的网页。安装之后,你照常用自然语言提问,Agent 会先写一份简短的 Markdown 草稿,再交给技能自带的 CLI 渲染成页面,整个过程大约 50 毫秒。

官方基准测试显示,相比直接让模型手写 HTML,它的输出 token 减少约 6.1 倍,耗时缩短约 2.8 倍,单次回答成本也更低。项目基于 Node.js 20 及以上版本,无需 npm install,CLI 已内置在技能目录中。

痛点是什么

很多人已经习惯让 AI 解释复杂问题,但得到的往往是一堵密密麻麻的文字墙:TCP 三次握手、仓库模块关系、Redis 与 Memcached 的取舍,这些内容用纯文本表达既难读也难记。直接要求模型输出 HTML 页面看似可行,代价却是模型必须逐行手写 CSS、包装 div 和 SVG 坐标,输出 token 动辄数千,等待时间被拉长,费用也随之上涨。更麻烦的是,当你的 Agent 环境本身加载了大量工具、规则和技能时,上下文越长,这种「手写页面」的方式越不划算,速度与成本双双失控。

主要功能特点

这个技能把「写内容」和「做页面」拆开:模型只负责内容,样式与渲染交给内置 CLI,从而在速度、成本和可读性之间取得平衡。

一句话生成可视化页面

提问后自动产出带图表、表格或时间线的可读网页。

ASD-STE100 简洁写作

借鉴航空文档控制语言规范,让 Agent 用最少的字讲清事情。

两种视觉风格

提供 blueprint 与 shadcn 风格,右上角可切换主题与明暗模式。

3b1b 风格讲解视频

用 am video 把草稿变成带旁白与分步动画的播放页。

为什么值得关注

它把 Karpathy 提出的「让模型输出网页甚至讲解视频」从理念变成了可安装、可复现的工程实践,并且给出了公开的基准数据与复现脚本。

省 token 也省时间

官方测试中输出 token 最多减少约 17.8 倍,速度提升明显。

安装门槛极低

一条 npx 命令即可装进 Claude Code、Codex、Cursor 等 70 多个 Agent。

智能判断是否值得出页面

简单问题仍给一行答案,复杂概念才生成网页。

项目地址:github.com/QingYunA/answer-me-with-html

推荐信息
云辰 Cyan
云辰 Cyan @smk7z 2026年10月07日 13:04

我把 @karpathy 大神的最新理念做成了 Skill 🔥!
一句话,让你 agent 给你可视化结论!

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

1. 超级快速: 比正常输出 HTML,token 少 7.4 倍!快 3.6 倍
2. ASD-STE100 原则: 让 Agent 用最少的字把事情讲明白!
3. 两种风格: blueprint + shadcn 风格

2026-10-02 08:37
我们将花费更多时间来理解语言模型的输出。一些思考、技巧和窍门:
写作。我成功过的一个方法:让你的LLM用ASD-STE100来解释某事,这是一种最初为航空航天维护文档开发的控制语言规范。LLM对这种语言很熟悉,而且它对简洁的写作风格有严格的约束,我常常觉得这样可读性更高。有时我会尝试稍微放宽一点,比如要求“达到ASD-STE100的80%”,因为该规范相当严格。但更好的做法是:
图表/图像。与其写作,不如让你的LLM创建一个图表。这些可能更容易处理、解析和理解。但更好的做法是:
网页。要求以“HTML”输出,以获得一个漂亮、可交互的网页。LLM在前端方面正变得非常擅长,可以创造出漂亮的体验、动画等。但更好的做法是:
讲解视频。我最看好的输出格式,是针对任意主题生成完全自定义/定制的讲解视频。可以尝试类似“创建一个关于X的3b1b风格视频讲解。使用我的ElevenLabs API密钥进行音频旁白”这样的提示。(后者需要API密钥,或者你可以让你的LLM为你找到使用本地算力的不错的免费替代方案)。这实际上已经开始奏效了!
总结:
- 随着LLM变得更好,它们将越来越自主地承担更多基础工作,而我们更多的工作将上升到更高的抽象层,转向监督和理解。
- 幸运的是,LLM在这里也能帮上忙,因为随着智能和代码日益充裕,你可以要求生成大型、定制、可丢弃的软件产物(例如网页应用、视频讲解),而这些在以前根本不可能有理由去创建。在这里突破边界,你会感到惊讶。

answer-me-with-html 怎么用?一句话让 Agent 输出可视化网页,安装配置教程 哔哩哔哩视频封面