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），仅供参考
企业数字化 ERP 产品动态
相关推荐
Mumble Developer Console：开启开发者菜单、定位客户端问题日志的完整指南 音视频即时通讯 【免费下载链接】mumble Mumble is an open-source, low-latency, high quality voice chat software. 项目地址： https://gitcode.com/gh_mirrors/mu/mumble 点击查看 免费下载 Mumble 客户端内置了一个开发者控制台（Developer Console… · 2026/9/25 5:34:36
以太网物理介质详解：从10Base-T到100Base-TX的编码与布线 1. 从一张网卡说起：为什么物理介质决定以太网的上限做网络这一行，有个很基础但总被忽略的事实：以太网的上限不是协议定的，是物理介质定的。协议栈里的IP地址、TCP端口、路由策略说得再漂亮，最后数据还是得变成电信号或… · 2026/9/25 5:34:36
PaddleSpeech 中的 ERNIE-SAT：基于 AISHELL-3 的语音合成与语音编辑实战指南 人工智能语音音频 【免费下载链接】PaddleSpeech Easy-to-use Speech Toolkit including Self-Supervised Learning model, SOTA/Streaming ASR with punctuation, Streaming TTS with text frontend, Speaker Verification System, End-to-End Speech Translation and Keyword… · 2026/9/25 5:34:36
DotNETReactor代码保护原理与合规实践指南 简介：本资源为DotNET Reactor最新破解版工具集，面向C#开发者与.NET程序安全加固需求者，解决C#代码易被反编译、逻辑泄露等核心防护难题，适用于软件发布前的代码混淆、加密与许可证控制等实战场景。压缩包共105个文件，含… · 2026/9/25 5:59:02
Motrix浏览器扩展连接失败的底层原因与解决方案 1. Motrix浏览器扩展到底在解决什么问题？——不是插件本身，而是RPC通信链路的“最后一公里”Motrix作为一款开源的下载管理器，它的浏览器扩展（Browser Extension）本质是个轻量级“遥控器”，不直接处理下载任… · 2026/9/25 5:59:02
系统Python拒绝pip安装？PEP 668报错解决与虚拟环境实践 最近几天我在好几个技术群里看到同一张截图，红屏黑字写着error: externally-managed-environment，后面跟着一大段"This environment is externally managed"的解释。问这个问题的，有刚给树莓派换完系统的硬件玩家，有在 … · 2026/9/25 5:59:02
Cognex DM280X读码器TCP通讯与DataMan实战配置指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 5:58:56
Spark Link 插件测试套件实战指南：单元测试、集成测试与覆盖率保障体系 人工智能AI AgentAgent 编排RPA后端前端企业应用 【免费下载链接】astron-agent Enterprise-grade, commercial-friendly agentic workflow platform for building next-generation SuperAgents. 项目地址： https://gitcode.com/gh_mirrors/as/astron-agent 点击查看… · 2026/9/25 5:58:56
Cursor 入门：MCP 开发调用与项目实战，用 TaoToken 统一 Key 打通 AI 编程链路 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 5:58:50
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
