html-anything 管理后台 Dashboard 技能模板全解析：从 SKILL.md 到单文件 HTML 的生成链路

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

这篇技术指南围绕 html-anything 内置的 dashboard 技能模板展开，讲解它如何以一份 SKILL.md 定义"管理后台仪表板"的版式意图，并通过同目录的 example.html 提供可直接运行的参考实现。读完你将领会：frontmatter 元数据如何驱动模板选择器与分类、五段式布局骨架的具体构成、参考实现的逐段实现细节，以及这条技能从磁盘加载、提示词组装到 Agent 流式输出的完整调用链，从而能够直接使用或仿照该模板生成自己的管理后台页面。

模板定位：面向运营场景的 Admin Dashboard

dashboard 是 html-anything 内置技能库（next/src/lib/templates/skills/ 下的一个独立文件夹）中的一个模板。它的核心定位由 SKILL.md 的 frontmatter 准确描述：

这段元数据不是装饰性的：它直接决定了模板在 TemplatePicker 中的分组、检索匹配与展示方式。从源码看，loader.ts 中 parseFrontmatter()（第 94 行起）会解析 --- 包裹的 frontmatter 块，仅处理字符串、整数与单行数组字面量（如 tags: [...]），并把 zh_name、emoji、description、scenario、tags 等字段映射为选择器可用的 SkillMeta 结构；scenario 字段则会被 scenarios.ts 的 SCENARIO_KEYS 识别并翻译（operations → "Operations" / "运营 / 协作"）。也就是说，改一份 SKILL.md 的 frontmatter，模板的分类与展示就会随之变化，无需改动任何 TypeScript 代码。

布局骨架：五段式仪表板结构

SKILL.md 正文以极简的"意图 + 布局"清单给出生成约束，这是 Agent 生成 HTML 时的硬性版式要求：

• Fixed left sidebar：固定左侧栏，包含 logo、导航菜单与用户区 footer；
• Top bar：顶栏，包含搜索、通知与头像；
• Main：KPI 卡片网格，3-5 个指标卡；
• 1-2 张主图表：折线图 / 柱状图 / 区域图任选；
• 底部 recent activity 列表：最近活动/事件明细表。

这份模板正文会作为"模板意图"注入最终提示词。在 shared.ts 的 assemblePrompt()（第 46 行起）中，模板正文被夹在全局设计准则（SHARED_DESIGN_DIRECTIVES）与用户内容之间，三者拼接成发给 Agent 的完整提示词。全局准则同时强调：模板只定义"可用版面 / 风格 / 配色 / 组件库"，不定义卡片或区块的数量——实际数量由用户内容的长度与信息结构决定。因此"3-5 个 KPI 卡"在实现中是参考下限而非上限，Agent 会根据用户给出的真实指标数量动态扩展网格。

参考实现逐段拆解：Pulse 分析仪表板

同目录下的 example.html 是一个 118 行的完整自包含单文件实现（标题为 "Pulse — analytics overview"），可作为该模板的落地产物范本，也可以直接在浏览器中双击打开。它忠实地实现了五段式骨架，值得逐段研究：

1. CSS 变量与基础布局（第 7-48 行）

设计令牌全部收敛在 :root：--bg: #fafaf9（米白底）、--fg: #1c1b1a（近黑而非纯黑）、--accent: #c96442（陶土色主色）、--good / --bad（涨跌绿红）等，符合全局准则"1 个主色 + 2 个中性色 + 至多 1 个强调色、不使用 #000/#fff"。外层 body 直接使用 display: grid; grid-template-columns: 220px 1fr 实现"固定侧栏 + 自适应主区"，侧栏因此天然固定在左侧。

2. 侧栏（第 51-64 行）

<aside class="sidebar" data-od-id="sidebar"> 内含品牌标识 ◐ Pulse、主导航（Overview / Funnels / Cohorts / Sessions）与带 group-label 的 Workspace 分组（Sources / Members / Billing / Settings），激活项以 .active 高亮。这是"logo + 导航 + 用户 footer"中的前两部分（示例将 footer 部分留白，由生成时的内容决定）。

3. 顶栏（第 66-72 行）

data-od-id="topbar" 区域左侧是页面标题 Overview · April 2026，右侧是"Last 30 days ▾"次级按钮与"+ New report"主按钮（.btn-primary）。搜索框、通知、头像在示例中以右侧操作区形式呈现，符合"Top bar (search + 通知 + avatar)"的意图，具体控件可随内容增删。

4. KPI 网格（第 74-79 行）

.kpis 使用 repeat(4, 1fr) 四列网格，四个指标卡分别展示 MRR（$48.2K，+12.4% MoM）、Active accounts（3,184，+204 this month）、Churn 30d（2.1%，+0.4 pp）、P95 latency（182 ms，-23 ms）。每个 .kpi 由小字号 label、28px 大字号 value 与带涨跌配色的 delta（.up 绿 / .down 红）组成。注意第 29 行有响应式断点：@media (max-width: 900px) 时降为两列，体现"桌面 1440 优先、兼顾窄屏"的适配思路。

5. 图表区与事件表（第 81-115 行）

.panels-row 以 2fr 1fr 双栏承载两块面板：左侧是 Revenue 30 天折线图——一个 600×240 viewBox 的 SVG <polyline>，仅用内联 points 数据即可绘制趋势，不依赖任何外部图表库；右侧是 New accounts 明细表（Account / Plan / Status 三列，状态用 .pill good|bad 胶囊标签）。底部 data-od-id="recent-events" 面板则是"最近活动列表"，四列时间表（Time / Account / Event / Plan）。整个文件零外部依赖、零图片 URL，图表全部由 SVG 内联绘制，完全符合全局准则中"优先使用 CSS / SVG 内联绘制"与"单文件可双击打开即用"的硬性要求。

技能如何被加载与消费：一条完整的调用链

dashboard 模板并不仅是静态文件，它在 html-anything 中有一条清晰的运行时链路：

1. 磁盘注册：loader.ts 以 next/src/lib/templates/skills/<id>/ 为约定目录，SKILL.md 必选、example.md / example.html 可选。listSkills()（第 242 行起）扫描目录并解析 frontmatter，同时把用户通过 Marketplace 安装的技能（默认存放在 ~/.html-anything/skills/，见 paths.ts）合并进同一注册表；
2. 元数据下发：GET /api/templates 返回去正文的 SkillMeta[]（避免把提示词文本推给浏览器），带 Cache-Control: public, max-age=5 头；客户端由 index.ts 的 useTemplates() 统一缓存与去重；
3. 示例预览：GET /api/templates/:id/example 一次性返回示例的内容与 HTML，供选择器的悬停预览（<iframe sandbox="allow-scripts allow-same-origin"> 缩略图）或"Preview"按钮直接载入；
4. 生成：前端把 templateId: "dashboard"、用户内容与格式 POST 到 /api/convert，服务端 loadSkill(templateId) 取回模板正文，经 assemblePrompt() 拼装提示词后调用 invokeAgent()，以 SSE（text/event-stream）流式返回 Agent 生成的 HTML。

值得注意的两个实现细节：其一，convert 接口支持 editFromHtml / editFromContent 参数走"最小化差异编辑"路径（buildEditPrompt()，第 30-62 行），二次编辑时保留原 HTML 的 <head>、字体、配色与布局，只按内容 diff 增删数据节点，避免每次重生成导致的设计漂移；其二，全局准则明确禁止 Agent 使用任何文件系统工具，HTML 必须以 <!DOCTYPE html> 开头、以 </html> 结尾纯文本流式输出，落盘由前端负责。

实操：在编辑器中使用 dashboard 模板

在 html-anything 界面中的典型使用流程如下：

1. 点击工具栏中的模板选择按钮，打开 TemplatePicker；
2. 在搜索框输入 dashboard（会同时命中 zh_name / en_name / description / tags 等字段），或通过"运营 / 协作"（Operations）场景筛选 chips 定位到该模板；
3. 悬停任意带 example.html 的技能可看到缩略预览，点击"预览"按钮会把示例内容与 HTML 直接载入编辑器（loadSample()）；
4. 清空示例内容，粘贴你自己的业务数据（如真实 MRR、活跃账户、留存率、延迟指标，或 CSV/JSON 结构化数据），选择目标 Agent 与模型后点击生成；
5. 生成的单文件 HTML 会流式渲染在预览面板中，可直接导出为 HTML / PNG，或通过一键发布渠道分发。

由于全局准则强制"必须使用用户提供的真实数据，不要编造、不要 lorem ipsum"，生成时请务必提供完整的指标与事件数据；而"内容驱动数量"准则意味着：如果用户内容包含 8 个关键指标，KPI 网格应当渲染 8 张卡而不是砍到 5 张——模板里的数字只决定版式风格，不决定数量。

扩展：如何仿照它新增或定制技能

dashboard 同时是"如何新增一个技能"的最小范例。从 loader.ts 的注释可以看到：新增模板 = 新增一个文件夹，无需改动任何 TS 代码。复制一份 skills/dashboard/ 目录，修改 SKILL.md 的 frontmatter（改名、改描述、改 scenario、改 tags）与正文布局清单，再配上自己的 example.html 预览，重启 next dev（开发环境不缓存元数据）即可在选择器中看到新模板；若从 Marketplace 安装第三方技能包，则技能会以 pkg-<owner>-<repo>--<originalId> 命名空间形式合并进同一注册表，卸载后可调用 invalidateSkillsCache() 刷新缓存。

结语

dashboard 技能模板的价值在于：它用一份可读性极强的 SKILL.md 把"管理后台仪表板"这一高频场景抽象为固定侧栏 + 顶栏 + KPI 网格 + 图表 + 活动列表的五段式骨架，再用同目录的 example.html 给出零依赖、可直接运行的参考实现；而加载器、API 路由、提示词组装与 SSE 生成链路则让这份模板能够被任何兼容的本地 Agent 直接消费。理解这一个模板，就等于理解了 html-anything 全部 75+ 技能模板的通用运作机制——从元数据驱动到单文件 HTML 输出，全程有源码可查、有示例可跑。

赞 分享

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成