Windows音效增强设置详解：从系统开关到专业EQ调音
2026/9/25 6:07:17
- AI 应用
- 人工智能
- AI Agent
- AI 写作
- 媒体生成
【免费下载链接】html-anything
✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.
项目地址：https://gitcode.com/gh_mirrors/ht/html-anything
这篇技术指南围绕 html-anything 内置的dashboard技能模板展开，讲解它如何以一份 SKILL.md 定义"管理后台仪表板"的版式意图，并通过同目录的 example.html 提供可直接运行的参考实现。读完你将领会：frontmatter 元数据如何驱动模板选择器与分类、五段式布局骨架的具体构成、参考实现的逐段实现细节，以及这条技能从磁盘加载、提示词组装到 Agent 流式输出的完整调用链，从而能够直接使用或仿照该模板生成自己的管理后台页面。
模板定位：面向运营场景的 Admin Dashboard
dashboard是 html-anything 内置技能库（next/src/lib/templates/skills/下的一个独立文件夹）中的一个模板。它的核心定位由 SKILL.md 的 frontmatter 准确描述：
| 字段 | 值 | 含义 |
|---|---|---|
name | dashboard | 模板唯一 id，作为文件夹名与 API 查询参数 |
zh_name | 管理后台仪表板 | 选择器中显示的中文名 |
en_name | Admin Dashboard | 英文界面下的显示名 |
emoji | 🎛️ | 选择器列表中的图标 |
description | 固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图 | 一句话概括模板形态 |
category | dashboard | 模板归类，与dating-web、flowai-team-dashboard等同属一类 |
scenario | operations | 场景分组，对应 i18n 标签"运营 / 协作"（见 i18n.ts） |
aspect_hint | 桌面 1440 | 目标画布为 1440px 桌面宽度 |
tags | ["dashboard", "admin", "analytics"] | 搜索与推荐用标签 |
这段元数据不是装饰性的：它直接决定了模板在 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">赞
- AI 应用
- 人工智能
- AI Agent
- AI 写作
- 媒体生成
【免费下载链接】html-anything
✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.
项目地址：https://gitcode.com/gh_mirrors/ht/html-anything
相关推荐
html-anything架构深度解析：从child_process.spawn到iframe srcdoc，本地AI流式生成HTML的全链路
html anything架构深度解析：从child_process.spawn到iframe srcdoc，本地AI流式生成HTML的全链路 html any
AI 应用人工智能AI AgentAI 写作媒体生成Konstellate：免费开源的Kubernetes应用可视化工具，让复杂部署变得简单直观
Konstellate：免费开源的Kubernetes应用可视化工具，让复杂部署变得简单直观 Konstellate是一款免费开源的Kubernetes应用可视
给html-anything添加新Skill新手指南：3个文件打造可发布的SKILL.md模板，零注册秒生效
给html anything添加新Skill新手指南：3个文件打造可发布的SKILL.md模板，零注册秒生效 html anything 是一款 agent 时
AI 应用人工智能AI AgentAI 写作媒体生成
上一篇：如何轻松掌握X-Spider：面向新手的完整推特媒体下载指南
下一篇：免费AI音乐创作终极指南：ACE-Step UI带你开启无限音乐之旅