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 开源项目内置的weekly-update团队周报 Deck技能模板展开说明其 SKILL.md 提示词如何定义固定周报结构、示例 HTML 如何实现横向滑动翻页与键盘导航以及模板注册、提示词组装与转换 API 的底层链路。读完本文你将能直接基于该模板复现一份可交互的单文件周报并理解往仓库新增技能模板只需要新建一个文件夹这一核心机制。一、模板在仓库中的位置与角色weekly-update是 html-anything 内置技能skill之一位于 next/src/lib/templates/skills/weekly-update/目录内包含两份关键文件SKILL.md— 模板元信息frontmatter 给 Agent 的提示词正文example.html— 预先渲染好的 8 页周报示例用于模板选择器template picker中的内联预览也是 Agent 生成结果的参考形态。从仓库结构看html-anything 采用了每个技能一个文件夹的磁盘注册表设计见 next/src/lib/templates/loader.tssrc/lib/templates/skills/id/ SKILL.md — frontmatterid、scenario、tags… prompt body example.md — 可选示例输入内容 example.html — 可选预渲染预览选择器中内联展示新增一个模板 新增一个文件夹无需改动任何 TypeScript 代码。API 路由会重新扫描磁盘客户端重新拉取/api/templates即可next/src/app/api/templates/route.ts。二、SKILL.md元信息与周报结构提示词weekly-update/SKILL.md的 frontmatter 是模板元信息的唯一事实来源字段含义如下字段值作用nameweekly-update模板 idkebab-case也是文件夹名zh_name团队周报 Deck中文展示名en_nameWeekly Update Deck英文展示名emoji️选择器中的图标description6-8 页横向滑动周报: 已发布 / 进行中 / 阻塞 / 指标 / 求助一句话说明用途展示在选择器卡片上categoryslides模板品类决定其在选择器中的分组scenariooperations业务场景键用于场景筛选aspect_hint16:9 ×8画幅提示供 Agent 参考featured23在推荐区Featured中的排序数字越小越靠前tags[weekly, 周报, status]搜索标签支持中英文frontmatter 由 next/src/lib/templates/loader.ts 中的无依赖解析器读取支持字符串可带引号、整数和单行数组字面量三种值类型最终被映射为SkillMeta含zhName、enName、aspectHint、featured等字段供选择器消费。scenario键则与 next/src/lib/templates/scenarios.ts 中的SCENARIO_KEYS对照——operations是 12 个可翻译场景键之一不在列表中的键会落到other分组但技能仍可正常加载。提示词正文固定的周报骨架SKILL.md正文定义了 Agent 生成周报时必须遵守的固定结构共 6 个内容区块加 1 个收尾页Cover— 周次 团队 一句话主题Shipped— 已发布事项列表列表项 ownerIn flight— 进行中事项配进度条Blocked— 阻塞项红色 callout 突出Metrics— KPI 卡片网格 周对比Asks— 求助清单Thanks— 收尾致谢页。布局上明确要求6-8 页 horizontal-swipe slides设计细节要求键盘左右切换、hash 同步、单文件 HTML。三、example.html8 页周报的完整实现同目录的 example.html 是一份可直接双击打开的自包含单文件示例恰好 8 页01 / 0808 / 08逐页对应 SKILL.md 定义的骨架Cover— 顶部 crumb 标签、周次徽章Week 42 · 14 → 18 Oct、超大标题Hello, week forty-two.以及作者 / 受众 / 阅读时长三栏 metaHeadline 数字页— 大号22%数字 本周一句话总结示例用漏斗重新变快这类叙述串联本周亮点Shipped— 编号列表 owner 标签如NW-201 · DevonIn flight— 列表项带圆形头像avatar指示负责人Blocked— 单个红色渐变 callout内含阻塞说明 明确的Ask:求助标签Metrics— 两张 KPI 卡片各含内联 SVG 折线/面积图、big-num大数字与delta周对比▲ 9 pp/▼ −25 minAsks— 2×2 求助卡网格每张卡带负责人 截止时间 背景说明Thanks 收尾— 致谢标题、一段话总结、签名行头像 姓名 角色。实现要点横向滑动容器.deck使用display: flexscroll-snap-type: x mandatory每页.slide为flex: 0 0 100vw隐藏滚动条scrollbar-width: none与::-webkit-scrollbar。底部导航点JS 动态生成.dot导航点点击时deck.scrollTo({ left: window.innerWidth * i, behavior: smooth })平滑跳页。键盘翻页监听keydownArrowRight/PageDown下一页、ArrowLeft/PageUp上一页example.html 中已实现键盘切换与导航点联动hash 同步是 SKILL.md 对 Agent 的设计要求需要生成时按此补齐。视觉体系深色主题--bg: #0e0d12配黄色强调色--accent: #ffcc4d与紫色辅助色--accent-2: #b388ff等宽字体用于 crumb、页码与 meta。响应式media (max-width: 760px)下布局降为单列适配手机阅读。该 HTML 由 loader 探测hasHtml并通过 next/src/app/api/templates/[id]/example/route.ts 以 JSON 形式返回给前端选择器点击预览时可直接载入。四、提示词如何真正生效assemblePrompt 组装链路weekly-update的 SKILL.md 正文不会单独发送给 Agent而是由 next/src/lib/templates/shared.ts 的assemblePrompt拼接为完整提示词【共享设计指令】 模板正文SKILL.md body 【输入格式】 【用户内容】其中共享设计指令next/src/lib/templates/shared.ts为所有技能模板统一前置约束与周报模板直接相关的关键条款包括内容驱动数量为最高优先级模板只定义可用版面/风格/配色/组件库不定义页数页面数量完全由用户内容的长度与信息结构决定模板正文中6-8 页这类数字只是短示例下的参考下限用户给了长内容就应远超该范围——这保证了周报骨架不会因内容变长而丢信息禁止使用文件系统工具Agent 必须把完整 HTML 作为回复正文流式输出以!DOCTYPE html开头、/html结尾落盘由前端负责纯 HTML 输出不使用 markdown 代码围栏不输出解释性文字首个字符必须是内容真实性必须使用用户真实数据不得编造、不得 lorem ipsum、不得占位文字设计准则中文优先Noto Sans SC/Noto Serif SC单主色 至多 1 个强调色8px 基线网格颜色对比度 ≥ 4.5。该链路在 next/src/app/api/convert/route.ts 中被调用请求携带agent、templateId、content后路由先loadSkill(templateId)载入weekly-update的正文再组装提示词并调用invokeAgent以 SSE 流式返回生成的 HTML。另外值得一提的是convert路由还支持最小化差异编辑editFromHtmleditFromContent当任务已有旧版 HTML 时Agent 会收到仅根据新旧内容差异修改文字/数据节点保留字体、配色、布局与动效的指令next/src/app/api/convert/route.ts。这意味着周报每周更新时可以在上周 HTML 基础上增量编辑既省 token 又避免设计漂移——每周只需更新内容版式稳定如一。五、实战如何使用该模板生成一份周报在 html-anything 界面中的使用路径仓库为只读仅说明查看与运行方式进入模板选择器应用启动后选择weekly-update团队周报 Deck场景筛选operations确认16:9 ×8的画幅提示输入周报内容将本周的已发布、进行中、阻塞项、指标数据与求助清单以 Markdown/文本形式粘贴为用户内容触发转换选择本地 Agent CLIClaude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider 等无需 API key/api/convert将按上文链路组装提示词并流式生成 HTML预览与交付生成结果可直接在沙箱预览确认键盘左右切换与 6-8 页结构符合预期后再导出为 HTML/PNG 或一键分发到 WeChat / X / Zhihu 等渠道下周更新携带本周生成的 HTML 与旧内容再次转换走最小化差异编辑路径仅替换数据节点即可完成迭代。参考本模板的示例输入输出可见 next/src/lib/templates/skills/weekly-update/example.html 展示了从周次到致谢的完整叙事节奏如需查看模板在其他画幅如 16:9 横向翻页 deck、方形轮播卡等下的变体可在 next/src/lib/templates/skills/ 中横向对比deck-*与card-*系列技能理解 SKILL.md 正文如何通过布局版式池 设计细节约束 Agent而页面数量交给内容决定。六、小结weekly-update模板展示了 html-anything 技能体系的核心设计一个 SKILL.md 定义元信息与结构意图一个 example.html 提供可复现的参考实现共享设计指令保证输出质量底线磁盘注册表让新增模板零代码。无论你是想每周快速产出团队周报还是想研究如何编写自己的技能模板这条frontmatter → 提示词组装 → SSE 流式生成 → 增量编辑的链路都值得按本文路径逐文件对照源码阅读。赞分享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-ppt-skill 中的 weekly-report 全 Deck 模板7 页团队周报的结构、设计令牌与落地实操html ppt skill 中的 weekly report 全 Deck 模板7 页团队周报的结构、设计令牌与落地实操 本篇聚焦 html ppt skiAI 技能/插件前端html-anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboardhtml anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboard 导读 本文以 html anything 仓库AI 应用人工智能AI AgentAI 写作媒体生成html-anything 的 deck-simple 技能模板构建 16:9 横向滑动 HTML 演示文稿html anything 的 deck simple 技能模板构建 16:9 横向滑动 HTML 演示文稿 导读 deck simple 是 html anAI 应用人工智能AI AgentAI 写作媒体生成上一篇GitButler桌面应用开发Tauri配置和打包发布指南下一篇如何高效自动化完成职业教育在线课程智能刷课脚本实践指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考