让 Coding Agent 生成干净好看的单文件 HTML
本质就是个轻量 Skill，教大模型输出不带 CDN 依赖、自带微 CSS 的单文件 HTML。
借鉴 shadcn 的冷灰色调与 1px 细线，告别大模型自由发挥时的粗糙塑料感。
6 套开箱即用的布局模板
大模型自由发挥容易排版错乱。直接套用现成结构，清晰又省心。
单栏长文档与系统评估报告母版
860px 居中标准阅读视口，针对技术评审、架构审查、面试评估与打印 PDF 深度优化。具备元数据标头、评分栏、结论 Callout、折叠手风琴与一键导出 Markdown。
业务指标监控与实时过滤数据大盘
宽屏流式响应式网格布局。内置 4 列 KPI 统计卡片、纯原生响应式 SVG 走势图与柱状图、双重实时过滤工具条（搜索+状态下拉）、原生模态弹窗与一键复制表格 Markdown。
左右双栏工作台与数据审查器 (100vh)
视口充满型工作台应用。左侧 320px 边栏支持快速检索过滤用例列表，右侧详情区动态响应渲染选中条目属性、人工审查裁决操作组（通过/修复/拒绝），以及一键将裁决结论复制发回终端 Agent。
并排横向对比与 A/B 评测矩阵
双栏左右并排对比布局（基准方案 vs 升级挑战方案）。内置核心胜出判定 Callout、参数规格对决、输出快照对比、量化 Delta 差异对照表以及一键复制对比 Markdown 摘要。
事件垂直时间轴与突发故障编年史
高信息密度单轨垂直时间线。具备语义化状态圆点（故障、警告、恢复、信息）、精确时间戳与操作人标签、可展开诊断日志，以及一键将时间线完整复制为 Markdown。
任务缺陷分拣与敏捷拖拽看板
4 列分类流转看板（Backlog、进行中、阻塞阻断、已完成）。零外部库依赖，纯原生 HTML5 Drag & Drop（~35 行原生 JS 驱动），提供一键复制分拣结果回发 Agent 闭环。
为什么坚决追求零 CDN 自包含？
对比 AI Agent 生成前端页面的三种典型实现路径。
<script src="cdn.tailwindcss.com"> 与远程字体。- ✕ 企业离线环境 / 隔离机房彻底白屏失效
- ✕ 2 秒 JS 运行时解析开销，伴随严重排版闪烁 (FOUC)
- ✕ 触发严格企业内网的内容安全策略 (CSP) 拦截
- ✕ 外部 CDN 节点漂移失效导致长期归档文件损坏
- ✕ 产生不协调的纯黑 1px 粗暴边框与失衡留白
- ✕ 表格列宽失衡，缺少移动端自适应
- ✕ 零暗黑模式支持，夜晚查看极其刺眼
- ✕ 每次会话自由命名 CSS 类，完全无法复用
- ✓ 100% 离线自包含，双击访达 0ms 瞬间秒开
- ✓ 零依赖、零 npm 构建链，永久可用
- ✓ 精准复刻 shadcn Zinc 冷灰高级中性美学
- ✓ 5 行原生脚本驱动平滑深浅模式双切换
基础原子组件与矢量图表
开箱即用的 HTML 片段：按钮体系、胶囊徽章、原生微交互、6 大纯原生 SVG 图表与 24 个矢量图标。
可折叠 <details> 诊断日志手风琴 ▾
| 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 | 流式收集中 |
stroke="currentColor"，能够随父级字色自动适配深浅主题。零字体依赖，100% 离线可用。日常提示词示例
日常跟 Agent 对话时可以直接使用的指令，避免生成枯燥的 Markdown 文本墙。
# 1. 通过 skills.sh 官方生态一键安装（支持 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