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-anythingagentic 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字段值含义nameframe-macos-notificationSkill 唯一标识kebab-casezh_name/en_namemacOS 通知横幅 / macOS Notification Banner选择器中的双语展示名emoji列表中展示的图标description拟真 macOS 通知 banner app icon 标题正文适合 video overlay / 产品发布预告一句话能力描述categorycard卡片类模板scenariovideo场景归类对应视频/影像类aspect_hint1920×1080 视频或 480×120 横幅宽高比提示直接显示在选择器按钮旁featured41精选排序权重数值越小越靠前见下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通知横幅放在右上角其余区域透明独立 banner480×120居中输出。配套的示例内容 example.md 提供了一组可复制的输入结构App应用名、Title标题、Body正文、Time时间以及两条用于堆叠的二级通知Cursor「同步完成」、Spotify「现在播放」。Agent 在生成时必须以用户输入驱动内容——模板只定义版面与风格不定义内容本身。三、横幅结构从外框到内容的完整规格SKILL.md 给出了可直接照做的像素级设计规范外框圆角 14pxmacOS 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 亮色 highlightrgba(255,255,255,0.5)模拟系统通知顶部的光源反射。阴影0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)两层阴影分别提供柔和投影与贴地感。内容三栏布局左侧App icon44×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 TextfallbackInter/system-ui中文场景用PingFang SC/Noto Sans SC。四、源码示例验证example.html 逐段对照仓库自带的 example.html 是上述规格的直接实现可以逐段对照验证深色磨砂背景.frost类使用background: rgba(28,28,30,0.78)同时声明-webkit-backdrop-filter与标准backdrop-filterblur(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×44w-11 h-11圆角 10pxrounded-[10px]与 SKILL.md 的 480×120 / 14px 规格一脉相承。该文件同时是选择器中的悬停实时预览来源模板选择器在用户悬停条目 260ms 后通过/api/templates/:id/example拉取example.html以srcDocsandboxallow-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%) → 0200ms ease-out必须能被prefers-reduced-motion关闭无障碍要求控制 chip右上角「Clear」按钮默认opacity: 0hover 时显示。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」单文件 HTMLbackdrop-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/convertconvert/route.ts 调用loadSkill(templateId)从磁盘读取 SKILL 的 body指令正文再调用assemblePrompt({ body, content, format })拼接成最终提示词assemblePromptshared.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 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点击查看免费下载相关推荐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），仅供参考