让 AI 生成干净、好看的单文件 HTML
不用安装 npm 依赖，不用引用外部 CDN。
自带深浅色模式与常用组件，双击直接打开，断网也能正常用。
组件库
常用按钮与基础组件
不用猜类名，纯原生 HTML/CSS。复制就能用，省去 AI 自己瞎写样式。
按钮与标签
常用
提供主要、次要、边框、幽灵、危险等常用按钮样式与状态标签。
按钮变体
带图标与尺寸组合
语义状态徽章
200 OK 正常
Warning 预警
Critical 阻断
In Progress 处理中
中性默认
原生弹窗与折叠
纯 HTML
纯原生标签实现，自带遮罩与键盘交互，不需要引入任何 JS 库。
原生弹窗 (<dialog>)
自带虚化遮罩，按 ESC 自动关闭
折叠面板 (<details>) ▾
无需任何 JavaScript，展开收起内容。
提示框 (Callout)
醒目展示结论、重要提醒或风险提示。
纯原生 SVG 图表
0 外部图表库
纯 SVG 绘制，不需要 ECharts 或 Chart.js。高清不模糊，自动适配深浅色。
24h 请求吞吐量 (TPS)
↑ +18.4%
各阶段响应延迟分布 (ms)
P95 统计
集群健康度全景占比
99.8% 达标
● 65% 正常832
● 25% 预警320
● 10% 降级128
出入网络流量对冲
— 入向 1.4G
┄ 出向 860M
核心模块耗时排行
P95 ms
DB 连接池等待280ms
大模型首字生成 (TTFT)195ms
网关鉴权校验 (JWT)48ms
边缘静态资源缓存12ms
集群内存占用水位
正常负荷
超时是唯一在涨的错误类别
占第 39 周 57%
■ 超时■ 上游 5xx■ 鉴权
工作日 10–12 点构建最多
悬停看数值
可实时搜索的数据表
5 行纯原生 JavaScript，不需要引入任何前端框架即可实现客户端毫秒级检索。
| Trace 编号 | 所属集群服务 | 响应耗时 | 显存占用 | 当前状态 |
|---|---|---|---|---|
tr-0812-alpha |
网关认证接入中心 (Auth-Gateway) | 14ms | 128 MB | 正常 |
tr-0812-beta |
大模型推理执行管道 (Worker-Pool) | 420ms | 4.2 GB | 优化达标 |
tr-0812-gamma |
异步队列缓存调度 (Redis-Pipeline) | 1.2s | 890 MB | 负载偏高 |
tr-0812-delta |
分布式指标实时采集 (Telemetry) | 88ms | 340 MB | 流式收集中 |
标签页与表单控件
新增 · 可复制回 Agent
支持方向键切换的无障碍标签页，以及带 label 的原生表单控件。审查人填完的内容可以一键复制回 Agent。
变更 3 个文件 · +44 −7 行 · 1 个阻断、1 个重要、2 个次要。
阻断 · src/middleware/rateLimit.ts:8 —— 代理之后所有客户端共用一个桶。
Tabs 使用 role="tablist"、roving tabindex 与 ←/→ 方向键；打印时所有面板自动展开。
32 个常用矢量图标
点击任意图标直接复制 SVG 代码
颜色随文字颜色自动变化，自动支持深浅色模式，零字体依赖。
搜索 (Search)
成功 (Check)
告警 (Alert)
复制 (Copy)
日历 (Calendar)
终端 (Terminal)
过滤 (Filter)
外链 (External)
用户 (User)
折叠 (Chevron)
删除 (Trash)
下载 (Download)
分支 (Branch)
提交 (Commit)
合并请求 (PR)
缺陷 (Bug)
服务器 (Server)
数据库 (Database)
处理器 (CPU)
实时监控 (Activity)
防护 (Shield)
访问控制 (Lock)
刷新 (Refresh)
设置 (Settings)
新增 (Plus)
删减 (Minus)
文件 (File)
目录 (Folder)
查看 (Eye)
评论 (Comment)
标记 (Flag)
时间 (Clock)
场景模板
7 套常用场景模板
直接套用现成页面结构，干净省心，不用从头设计。
Report 报告
单栏文档布局。自带目录导航、评分栏、折叠手风琴与导出 Markdown，适合写评审报告、复盘纪要、说明文档。
Dashboard 数据面板
宽屏数据大盘。自带统计指标卡、SVG 趋势图、可实时搜索过滤的数据表格，适合做业务监控、Token 消耗与成本分析。
Inspector 审查工作台
全屏双栏工作台。左边选列表，右边看详情与处理操作，适合做日志追溯、Prompt 调试、人工审核。
Compare 对比
左右并排对比。自带结论提示、参数对比、差异对比表格，适合做大模型评测、方案选型与版本对比。
Timeline 时间线
单轨垂直时间轴。带状态圆点、时间戳与可折叠日志，适合排查故障记录、发版历史与路线图。
Kanban 看板
多列任务看板。纯原生拖拽排序，支持一键复制结果，适合做需求流转、Bug 分拣与任务管理。
Review 代码审查
原样粘贴 git diff 即可渲染为带行号的统一 diff。发现项按行锚定，带严重度与建议修改；每个文件单独给出裁决，一键把完整审查结论复制回 Agent。
对比
为什么不引 CDN，也不让 AI 随意写 CSS？
看下三种常见方式的区别：
方案 A：引入外部 CDN
引入 Tailwind CDN
AI 喜欢加上
<script src="cdn.tailwindcss.com">。- ✕ 断网或内网环境下直接白屏
- ✕ 打开有明显卡顿和排版闪烁
- ✕ 容易被浏览器的安全策略 (CSP) 拦截
- ✕ CDN 链接一旦失效，历史文件就坏了
方案 B：让 AI 随意手写 CSS
让 AI 随意手写 CSS
不给规范时，AI 自由发挥出来的样式通常很难看。
- ✕ 边框生硬、间距混乱、没有设计感
- ✕ 表格挤成一团，手机上没法看
- ✕ 没有暗黑模式，晚上查看很刺眼
- ✕ 每次生成的类名都随机乱变，没法维护
方案 C：agent-html (推荐)
精简的原生 CSS
大约 75 行原生 CSS 变量与常用的基础样式类。
- ✓ 纯离线单文件，双击秒开
- ✓ 零依赖，不需要打包构建
- ✓ 干净耐看的 shadcn 风格灰色调
- ✓ 自带平滑好用的深浅色切换
常用提示词
日常提示词示例
日常跟 Agent 对话时可以直接使用的指令，避免生成枯燥的 Markdown 文本墙。
“把这次线上事故复盘的分析结论做成一个单文件 HTML 报告，包含事故等级、影响范围、核心根因与改进措施，支持打印为 PDF。”
“生成一个单文件 HTML 数据面板，展示 API 消耗与成本大盘。包含 4 列核心指标卡、走势图和可搜索过滤的明细表格。”
“把今天生产事故的恢复过程整理成时间线页面，按时间先后列出每个操作节点，支持折叠查看详细日志，带一键复制 Markdown。”
“做一个任务看板页面来分拣这批 Bug，支持拖拽卡片调整优先级，能一键把最终分拣结果复制回终端。”
“做个 DeepSeek 和 GPT-4o 的选型对比页面，左边放 DeepSeek，右边放 GPT-4o，包含指标差异对比和最终选型建议。”
“把 Agent 的这次运行日志做成左右双栏的工作台页面，左边是日志会话列表与搜索，右边查看工具调用的具体数据与审查结论。”
“帮我审一下这个 PR 的 diff，做成可视化审查页：每个文件给一个结论，问题标到具体行上，最后能把意见复制回来给你改。”
“做一个发布前检查清单页面：备份、灰度开关、回滚演练、告警、变更单。我逐项勾选、填负责人和备注后，能把结果复制回来给你继续发布。”
# 1. 一键安装 Skill（支持 Claude Code, Pi, Cursor, Codex 等）
npx skills add QingYunA/agent-html -g
# 2. 也可以用 CLI 直接导出模板
npx agent-html template dashboard > dashboard.html
npx agent-html check dashboard.html