AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】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 Dashboarddashboard是 html-anything 内置技能库next/src/lib/templates/skills/下的一个独立文件夹中的一个模板。它的核心定位由 SKILL.md 的 frontmatter 准确描述字段值含义namedashboard模板唯一 id作为文件夹名与 API 查询参数zh_name管理后台仪表板选择器中显示的中文名en_nameAdmin Dashboard英文界面下的显示名emoji️选择器列表中的图标description固定侧栏 顶栏 KPI 网格 1-2 张图一句话概括模板形态categorydashboard模板归类与dating-web、flowai-team-dashboard等同属一类scenariooperations场景分组对应 i18n 标签运营 / 协作见 i18n.tsaspect_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、导航菜单与用户区 footerTop bar顶栏包含搜索、通知与头像MainKPI 卡片网格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 classsidebar>赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】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 anyAI 应用人工智能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带你开启无限音乐之旅创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
