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 仓库内置的meeting-notes会议纪要技能模板为切入点拆解其 frontmatter 元数据 Schema、模板正文的意图与布局约定并结合 example.html 参考实现与磁盘加载、Prompt 拼装、转换 API 的源码调用链说明一个技能模板如何被解析、渲染进模板选择器并最终驱动本地 AI Agent 产出可用的单文件 HTML。读完本文你将掌握该仓库目录即模板、SKILL.md 即提示词的技能扩展机制并能照着meeting-notes的模式为自己的场景新增模板。一、模板在仓库中的位置与文件约定在 html-anything 的 Next.js 应用中所有内置技能模板以一个文件夹一个技能的形式存放在 next/src/lib/templates/skills/ 下每个技能目录约定最多包含三个文件详见 loader.ts 的注释说明文件作用meeting-notes 目录是否提供SKILL.mdfrontmatterid、scenario、tags 等元数据 模板正文Prompt 指令体✅example.md可选的示例输入内容❌example.html可选的预渲染预览页选择器中内联展示✅meeting-notes目录位于 next/src/lib/templates/skills/meeting-notes/同时提供了SKILL.md与example.html是元数据 正文 预览实现三要素齐全的典型模板。二、SKILL.md 的 frontmatter模板选择器的数据来源meeting-notes的 SKILL.md 以 YAML frontmatter 开头完整内容如下--- name: meeting-notes zh_name: 会议纪要 en_name: Meeting Notes emoji: ️ description: 标题 出席 议程 决议 action items 下次 category: doc scenario: operations aspect_hint: 长页面 tags: [minutes, meeting, 1:1, 纪要] ---这些字段并非展示性的装饰它们会被 loader.ts 中的parseFrontmatter与fmToMeta两个函数解析成SkillMeta结构最终通过/api/templates接口下发给选择器。各字段的实际作用如下name技能 id必须是 kebab-case小写字母 数字 连字符见 loader.ts 的isValidBundledId校验目录名与之一致zh_name/en_name选择器按当前语言显示的中英文名称未提供时回退到name本身loader.tsemoji选择器卡片上的图标缺省为✨description卡片副标题一句话说明模板产出物的结构——这里点明了标题 出席 议程 决议 action items 下次六个组成部分category分类doc表示文档类产出scenario业务场景。operations属于 scenarios.ts 定义的 12 个规范化场景键之一marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / video选择器据此提供场景筛选未识别的键不会导致加载失败只会归入兜底的 other 分组aspect_hint版式提示这里为长页面。该字段会在选择器卡片template-picker.tsx与悬停详情中直接渲染帮助用户在挑选前就预判产出物的版式形态tags标签数组用于关键词搜索如minutes、meeting、1:1、纪要。值得注意的细节是parseFrontmatter是一个零依赖的极简解析器loader.ts支持字符串可带引号、整数与单行数组字面量三种值形态tags数组必须在一行内写成[a, b]的形式多行数组不会被解析。三、模板正文约束 AI 产出物的意图与布局frontmatter 之下是模板正文即真正随请求发给 AI Agent 的指令体【模板: 会议纪要】 【意图】现代会议纪要, 强 action items。 【布局】 - Title bar (会议名 时间 出席 avatars) - Agenda checklist - Decisions block (圆角卡片) - Action items table (Owner / Due / Status) - Next meeting footer这段正文与 shared.ts 中全局共享的设计指令SHARED_DESIGN_DIRECTIVES拼接再追加用户内容构成最终 Prompt。assemblePrompt的拼装逻辑shared.ts非常清晰共享设计指令 模板正文 【输入格式】 【用户内容】这意味着meeting-notes的正文只需专注回答这份文档应该长什么样而输出单文件 HTML、禁止写文件、内容驱动数量、配色排版准则、真实性要求等硬性约束全部由共享指令统一兜底。模板正文中的【布局】约定会直接影响共享指令中内容驱动数量的执行——Agent 需要按用户提供的会议实录切分出议程条目、决议与行动项再套用下面这些版面。四、example.html六个布局块的真实参考实现example.html 是一份 234 行的单文件 HTML标题为 Growth squad weekly · 14 Oct notes完整实现了 SKILL.md 布局清单中的每一块。它既是在选择器中内联展示的预览图也是 Agent 生成同风格产物时可参考的视觉基准。各布局块与实现要点对应如下1. Title bar会议名 时间 出席 avatarsheader classhead内包含面包屑crumb等宽字体 大写 字距拉开的 mono 风格、衬线字体标题Charter/Georgia、meta-row元信息行Date / Time / Where / Notes by以及一个带重叠头像的出席栏头像由渐变背景的圆形字母块.av构成用负margin-left实现叠放效果example.html请假者以away灰色文本标注。2. Agenda checklist议程清单每个议程项由勾选框.check、主题正文strong 说明性small与右侧等宽字体的时间标签10:00 · 15m组成。已完成的项通过.done类切换为绿色勾选态example.html未完成的项保持描边空框——这正是内容驱动的体现议程项数量完全跟随用户输入模板只提供版式池。3. Decisions block圆角决议卡片.decisions采用主色左侧边框border-left: 3px solid var(--accent) 浅色底--accent-soft 圆角内嵌无序列表列表标记符marker着色为主色example.html视觉上形成记录在案的分区感。4. Action items tableOwner / Due / Status 表格表格四列Action / Owner / Due / Status。Owner 列内嵌小头像字母块Status 列使用四种语义色药丸标签example.html.pill-todo灰色描边→ To do.pill-progress主色浅底→ In progress.pill-blocked红色浅底→ Blocked示例中还附加了原因注释 · awaiting Grafana ACL.pill-done绿色浅底→ Done5. Open questions Next meeting footer底部采用两栏gridgrid-template-columns: 1fr 1fr窄屏时折叠为单列见 example.html左栏列出遗留开放问题右栏以next-meeting结构给出下次会议的 Date / Time / Pre-read / Notes by页脚则记录版本与归档位置。整份示例贯彻了共享设计指令的配色约束不使用纯黑纯白背景#fafaf8、正文#1a1d24、主色#2c5fae中文场景下可依据共享指令换用 Noto Sans SC / Noto Serif SC 字体族。五、从 SKILL.md 到渲染完整的源码调用链meeting-notes模板并非写死在代码里而是通过一套统一的磁盘加载链路被前端消费全链路如下元数据聚合loader.ts 的listSkills()扫描src/lib/templates/skills/下每个合法目录解析 SKILL.md 的 frontmatter 生成SkillMeta列表生产环境使用内存缓存开发环境NODE_ENV ! production每次直接重扫磁盘因此新增模板目录无需重启next dev接口下发next/src/app/api/templates/route.ts 的GET /api/templates返回{ templates: SkillMeta[] }响应头带Cache-Control: public, max-age5既去重快速重复请求又保证贡献者新增模板后刷新即见客户端缓存index.ts 的useTemplates()Hook 提供跨组件共享的模块级缓存并通过generation单调计数避免慢的旧请求覆盖新的安装后列表这一竞态index.ts预览加载选择器点 Preview 时next/src/app/api/templates/[id]/example/route.ts 一次性返回技能的示例内容example.md与 HTMLexample.html省去客户端两次往返Prompt 拼装与生成提交转换时next/src/app/api/convert/route.ts 调用loadSkill(templateId)取出模板正文再经assemblePrompt({ body, content, format })拼出完整 Prompt 交给本地 AI AgentClaude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider 等Agent 直接以流式 stdout 输出 HTML落盘由前端负责。此外通过市场安装的技能会落在~/.html-anything/skills/下并以pkg-owner__repo--originalId的命名空间 id 与内置技能合并进同一注册表registry.ts这意味着meeting-notes的目录结构SKILL.md example.html同样适用于第三方技能包的编写约定。六、实践如何照此模式编写自己的会议纪要变体结合以上分析若要为 html-anything 新增一个技能模板例如周报纪要或1:1 谈话纪要只需在 next/src/lib/templates/skills/ 下新建一个 kebab-case 命名的目录编写SKILL.md补齐 frontmatter 的name、zh_name、en_name、emoji、description、category、scenario、tags并在正文中按【模板: 名称】【意图】【布局】的格式列出版面约定——正文越精确Agent 输出的结构越稳定可选地提供example.md示例输入与example.html参考实现可参照 example.html 的语义化类名与 CSS 变量体系开发环境下选择器会自动识别新目录若要调整场景筛选需同步在 scenarios.ts 注册新的场景键及 i18n 词条。meeting-notes展示的元数据驱动选择器、正文驱动 Agent、示例驱动预览三层结构正是 html-anything 全部 75 个技能统一遵循的模板规范理解这一个模板即可举一反三地掌握整个技能注册表的工作方式。赞分享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 到单文件 HTML 的生成链路html anything 管理后台 Dashboard 技能模板全解析从 SKILL.md 到单文件 HTML 的生成链路 这篇技术指南围绕 html anAI 应用人工智能AI AgentAI 写作媒体生成html-anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路html anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路 本文聚焦 html anything 开源仓AI 应用人工智能AI AgentAI 写作媒体生成如何扩展publish-please编写自定义验证插件的完整指南如何扩展publish please编写自定义验证插件的完整指南 publish please是一个安全且功能强大的 npm publish 替代工具它通过AI 应用人工智能AI AgentAI 写作媒体生成上一篇如何快速配置罗技鼠标压枪宏绝地求生实战指南下一篇如何通过罗技鼠标宏实现PUBG精准压枪完整配置指南与实战优化方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考