AI编程工具上传完整Git历史：隐私风险与防护策略
2026/9/25 6:18:49
- 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（agentic HTML 编辑器）内置的
frame-macos-notification模板：它如何用一段面向 Agent 的指令（SKILL.md）把公告、消息或提示渲染成 macOS Big Sur+ 风格的通知横幅，适用于视频角落叠加、产品发布预告与社媒配图。读完你会掌握该模板的画布规格、磨砂玻璃（frosted glass）实现细节、内容结构约束、入场动效与堆叠方案，并理解它在仓库中的注册、加载与转换调用链。
一、模板定位：一个 Skill 是什么
在 html-anything 中，每个可视化模板（Template）被组织为src/lib/templates/skills/<id>/目录下的一个 Skill 文件夹，其中：
SKILL.md— 含 frontmatter 元数据（id、场景、标签、示例信息等）+ 给 Agent 的指令正文；example.md— 可选的示例输入内容；example.html— 可选的预渲染预览页面，在模板选择器中内联展示。
frame-macos-notification就是这样一个 Skill，它的 frontmatter 定义在 SKILL.md：
| 字段 | 值 | 含义 |
|---|---|---|
name | frame-macos-notification | Skill 唯一标识（kebab-case） |
zh_name/en_name | macOS 通知横幅 / macOS Notification Banner | 选择器中的双语展示名 |
emoji | 🔔 | 列表中展示的图标 |
description | 拟真 macOS 通知 banner + app icon + 标题正文，适合 video overlay / 产品发布预告 | 一句话能力描述 |
category | card | 卡片类模板 |
scenario | video | 场景归类，对应视频/影像类 |
aspect_hint | 1920×1080 视频或 480×120 横幅 | 宽高比提示，直接显示在选择器按钮旁 |
featured | 41 | 精选排序权重（数值越小越靠前，见下） |
tags | ["macos", "notification", "banner", "overlay", "frame"] | 搜索命中标签 |
example_* | 示例标题「macOS 通知 · 新功能发布」、tagline「Big Sur 磨砂玻璃 banner」、formatmarkdown | 示例条目元数据 |
这些字段并非手工硬编码展示：前端选择器通过 loader.ts 中一个零依赖的 frontmatter 解析器读取SKILL.md，将其转换为SkillMeta结构（含zhName、aspectHint、tags、featured等），featured数值越小越排在精选区靠前（参考 template-picker.tsx 中的rankFeatured）。也就是说，新增一个模板 = 新增一个文件夹，无需改动 TS 代码，API 路由会重新扫描磁盘（见 loader.ts 与 templates/route.ts）。
二、画布规格：两种用法决定两种输出
SKILL.md 明确给出画布的两种用法：
- 视频叠加（推荐）：1920×1080，通知横幅放在右上角，其余区域透明；
- 独立 banner：480×120，居中输出。
配套的示例内容 example.md 提供了一组可复制的输入结构：App（应用名）、Title（标题）、Body（正文）、Time（时间），以及两条用于堆叠的二级通知（Cursor「同步完成」、Spotify「现在播放」）。Agent 在生成时必须以用户输入驱动内容——模板只定义版面与风格，不定义内容本身。
三、横幅结构：从外框到内容的完整规格
SKILL.md 给出了可直接照做的像素级设计规范：
外框
- 圆角 14px（macOS Big Sur 标准）；
- 尺寸 480×120，含正文时可加长到 480×180；
- 内边距 12–16px。
磨砂玻璃背景
- 浅色版：
background: rgba(245,245,247,0.78)； - 深色版（视频推荐）：
rgba(28,28,30,0.78)； - 必须配合
backdrop-filter: blur(40px) saturate(180%)实现 frosted glass 效果，Safari 需要-webkit-前缀。
边框与高光
- 1px 边框：浅色
rgba(0,0,0,0.06)/ 深色rgba(255,255,255,0.08)； - 顶部额外 1px 亮色 highlight
rgba(255,255,255,0.5)，模拟系统通知顶部的光源反射。
阴影
0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)，两层阴影分别提供柔和投影与贴地感。
内容三栏布局
- 左侧：App icon，44×44、圆角 10px，用 CSS gradient + 1 个 emoji 或 monogram 字母绘制，严禁使用外链图片（这是全局硬性约束，见下文「设计细节」）；
- 中间：顶部一行两端对齐 —— App 名（SF Pro 13px、weight 600）+ 时间（12px、opacity 0.6）；标题 15px、weight 600、单行截断；正文 13px、weight 400、1–2 行截断、
line-height 1.35； - 右侧（可选）：capsule 形态的 action button（「Open」/「Reply」，浅灰底）。
字体
- 主字体
SF Pro Text，fallbackInter/system-ui；中文场景用PingFang SC/Noto Sans SC。
四、源码示例验证：example.html 逐段对照
仓库自带的 example.html 是上述规格的直接实现，可以逐段对照验证：
- 深色磨砂背景：
.frost类使用background: rgba(28,28,30,0.78)，同时声明-webkit-backdrop-filter与标准backdrop-filter（blur(40px) saturate(180%)），并补充box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08)——最后一项inset就是 SKILL.md 要求的顶部亮 highlight； - 图标全部内联绘制：Spotify 用绿色渐变
linear-gradient(135deg,#1DB954,#0d7a35)+ emoji 🎵，Cursor 用深灰渐变 + ⌘，HTML Anything 用橙色渐变 + monogram 字母 H，无任何外链图片； - 信息层级完整：每张通知卡片都是
App 名 + 时间（两端对齐）→ 标题 → 正文的结构，正文用opacity-80与leading-snug控制次要与可读性； - 右侧按钮：主通知带一个
background: rgba(255,255,255,0.12)的 capsule「Open」按钮； - 尺寸与圆角：卡片 420px 宽、
rounded-2xl、内边距p-3、图标 44×44（w-11 h-11）圆角 10px（rounded-[10px]），与 SKILL.md 的 480×120 / 14px 规格一脉相承。
该文件同时是选择器中的悬停实时预览来源：模板选择器在用户悬停条目 260ms 后通过/api/templates/:id/example拉取example.html，以srcDoc+sandbox="allow-scripts allow-same-origin"的 iframe 缩放 0.4375 倍渲染（见 template-picker.tsx 与 templates/[id]/example/route.ts）。
五、堆叠与动效：让通知「活」起来
SKILL.md 定义了三条可选增强：
- 多条通知堆叠：第一条（最新）在最前，后面 2 条向后向下递缩——
scale 0.96 + opacity 0.6 + translateY，层层后退形成纵深； - 入场动效：从屏幕外右侧滑入，
transform: translateX(110%) → 0，200ms ease-out；必须能被prefers-reduced-motion关闭（无障碍要求）； - 控制 chip：右上角「Clear」按钮，默认
opacity: 0，hover 时显示。
example.html 完整演示了这套机制：@keyframes slideIn从translateX(120%)滑入并淡出，.notif-1应用 0.4s ease-out 动画；.notif-2为translateY(-12px) scale(0.96) opacity 0.7，.notif-3为translateY(-24px) scale(0.92) opacity 0.4——对应 SKILL.md 描述的递缩堆叠。布局上用 flex 列items-end将通知贴到右上角，正是「视频角落叠加」的用法。
六、设计细节与硬性约束
SKILL.md 最后强调四点，前两点是模板自身约束，后两点来自全局设计指令（shared.ts 中的SHARED_DESIGN_DIRECTIVES）：
- 明暗模式：light 用白磨砂、dark 用近黑磨砂（视频场景推荐 dark）；
- 图标禁止外链：只能使用 unicode emoji 或 CSS 绘制的几何图形，避免外链图片失效；
- 内容真实性：必须使用用户提供的内容，标题与正文清晰来自用户输入，不得编造数据、不得 lorem ipsum、不得「Your text here」；
- 单文件 HTML：
backdrop-filter在 Safari 需要-webkit-前缀，保证单文件可双击打开即用。
此外全局指令还规定：HTML 必须以<!DOCTYPE html>开头、以</html>结尾，通过 CDN 引入 Tailwind v3 Play 与 Google Fonts，首字符必须是<，不得用 markdown 代码围栏包裹（这些约束在 shared.ts 中有完整定义）。
七、运行机制：SKILL 指令如何变成一次真实转换
SKILL.md的指令正文并不会被前端直接发送，而是经由服务端拼装。完整调用链如下：
- 前端把
templateId: "frame-macos-notification"与用户内容 POST 到/api/convert； - convert/route.ts 调用
loadSkill(templateId)从磁盘读取 SKILL 的 body（指令正文），再调用assemblePrompt({ body, content, format })拼接成最终提示词； assemblePrompt（shared.ts）的产物结构是：全局设计指令 + 模板指令正文 + 【输入格式】 + 【用户内容】，保证所有 Skill 行为一致；- 提示词交给
invokeAgent通过 SSE 流式返回 HTML，前端捕获 stdout 落盘（Agent 本身被禁止使用任何文件系统工具）； - 若任务已有 HTML 且内容发生变更，客户端会发送
editFromHtml/editFromContent，服务端改用最小化差异编辑提示词（convert/route.ts），保留frame-macos-notification的字体、配色、布局与动效，只替换数据节点——避免每次重生成导致风格漂移。
八、如何复用与扩展
如果你希望基于该模板定制新通知样式（例如换成 iPad 风格、调整堆叠数量或时间格式），直接参照该 Skill 的目录结构新建文件夹即可：
src/lib/templates/skills/<your-id>/ SKILL.md # frontmatter + 指令正文（可复制 frame-macos-notification 的骨架） example.md # 可选：示例输入 example.html # 可选：悬停预览页面开发模式下无需重启next dev，新的 Skill 文件夹会被listSkills()自动扫描到（loader.ts）；生产模式下调用invalidateSkillsCache()即可刷新缓存。frontmatter 中的scenario字段若使用 scenarios.ts 里未收录的键，模板仍可加载，只是会落入末尾的合成「other」分组并以原始 id 显示。
总结：frame-macos-notification是一个高度规格化、可直接复制的 Skill 模板——像素级视觉规范、明确的画布与内容约束、配套的示例 HTML 与完整加载/转换链路，使它既适合直接产出拟真 macOS 通知横幅，也是理解 html-anything「SKILL 驱动生成」架构的最佳入门样本之一。
赞
- 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
相关推荐
macOS Big Sur风格应用图标替换指南
macOS Big Sur风格应用图标替换指南 1. 项目介绍 macOS_Big_Sur_icons_replacements 是一个开源项目，旨在为流行的应
如何轻松替换macOS Big Sur风格应用图标：完整指南
如何轻松替换macOS Big Sur风格应用图标：完整指南 macOS Big Sur风格应用图标替换项目是一个专为macOS用户设计的开源项目，提供了大量流
HyperFrames native-notification-pop 组件解析：在任意场景上叠加一条逼真的 iOS/macOS 系统通知横幅
HyperFrames native notification pop 组件解析：在任意场景上叠加一条逼真的 iOS/macOS 系统通知横幅 native n
音视频视频AI 技能
上一篇：CapsuleFarmerEvolved核心功能全解析：轻量级设计、多平台支持与实时数据统计
下一篇：SeaORM与Rust后端模板：10分钟快速启动新项目的最佳实践
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考