1实现原理 · 为什么它能做到
拟真度来自一串写死的 macOS 数值：圆角 14px、磨砂 rgba(245,245,247,0.78) + backdrop-filter blur(40px) saturate(180%)、1px 边框 + 顶部高光 + 双层阴影，全部是可直接照抄的参数。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。
注：模板给的不是「像 macOS」的形容词，而是一张数值表——模型只要抄参数就能得到 Big Sur 观感，这也是它不需要任何截图素材的原因。
app icon 用纯 CSS gradient + unicode emoji/monogram 画，正文显式禁止外链图片。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。
注：示例中三个 icon 分别是 linear-gradient(#1DB954→#0d7a35)、(#0f0f12→#2a2a35)、(#ff7849→#d97757) + emoji/monogram，零图片请求。
入场滑入动效与无障碍兜底成对写明（200ms ease-out，可被 prefers-reduced-motion 关闭）。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。
注：两条同时出现是「视觉不牺牲可用性」的写法，属该批模板里细节纪律较好的样本。
模板本体就是 prompt：SKILL.md 正文经 loader 读出后与共享前言、用户内容拼装，交给本机 agent CLI 执行。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：运行时不吃模板目录里的代码：/api/convert 只收 {agent, templateId, content}，用 loadSkill(templateId) 取 SKILL.md 正文当 prompt 主体，再交给本机已登录的 agent CLI；HTML 由 stdout 流回前端。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：文件系统里的 skill 只是文本：loader 逐个目录读 SKILL.md，frontmatter 抽成 picker 元数据、正文作为 body 返回；本模板目录内没有任何模块被 import 或执行。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
注：共享前言在模板正文之前注入，规定「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」——所以本模板里的版式清单是「可复用版式池」，不是页数/帧数上限。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：前言明令禁用文件系统工具、要求纯 HTML 从回复正文流式输出，落盘由前端负责——skill 侧因此没有写盘行为。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
注：目录里的 example.html 是随仓库分发的黄金样本，预览路由直接读盘返回（无构建、无编译），既是质量基线也是详情页素材。
2核心能力
01磨砂玻璃通知横幅（light/dark 双配色）
02CSS 绘制的 app icon（gradient + emoji/monogram，禁外链图片）
03多通知堆叠递缩（scale 0.96/0.92 + opacity 递降）
04右侧 action button（Open/Reply 胶囊）
05双画布用法：1920×1080 角标叠加 / 480×120 独立 banner
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 示例与规范存在可照抄的漂移（420px vs 480px、400ms vs 200ms） — 模型会同时看到正文与 example.html；若要严格 480×120，需在用户内容里点明，否则可能学到示例口径。
- 「拟真」依赖 backdrop-filter，旧浏览器/无 -webkit- 时降级为半透明纯色 — 正文已提示 Safari 需 `-webkit-` 前缀，但 Chromium 旧版与部分导出管线（如截图工具）仍可能不渲染模糊，届时观感与 macOS 有差距。
- 产物示例引 Tailwind CDN 与 Google Fonts 外链（宿主壳前言要求） — 离线场景需自行内联 CSS/字体；这与正文「不用外链图片」不冲突，但用户须知道字体仍走网络。
🟢 绿色（风险提醒：绿色，放心使用）。判级对象＝skill 自身目录：目录内出现的 URL 仅 https://cdn.tailwindcss.com、https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap、https://hyperframes.heygen.com/catalog —— 全部在 example.html（产物示例）或 frontmatter 出处标注里，SKILL.md 正文无一处要求运行期外发。目录内只有 SKILL.md、example.html、example.md，零脚本、零可执行代码、零网络端点、零凭证读取、零写盘指令——照 SKILL.md 执行的结果是宿主模型输出一段 HTML 文本，不含任何外发或落盘动作。宿主壳与产物使用侧行为不作为档位依据，只记入 verdict.risks：shared.ts 前言要求产物引 Tailwind CDN(https://cdn.tailwindcss.com) 与 Google Fonts、runtime 会 spawn 本机已登录的 agent CLI（envFor 透传 process.env）、预览 iframe 为 sandbox="allow-scripts allow-same-origin"。
5第二遍独立确认
- [discrepancy] 规范↔示例：横幅尺寸 — 正文写 `480×120 (或更长 480×180 含正文)`，示例实际是 w-[420px] p-3 的三张 420px 宽横幅（含标题 + 双行正文后高度超出 120px）——示例未按自身规范出图，模型同时看到两份口径。
- [discrepancy] 规范↔示例：入场动效时长 — 正文写 `200ms ease-out`，示例是 `animation: slideIn .4s ease-out`（400ms）。
- [ok] 规范↔示例：磨砂/图标/堆叠/按钮 — rgba(28,28,30,0.78) + backdrop-filter blur(40px) saturate(180%)、-webkit- 前缀、CSS gradient 图标、scale 0.96/0.92 堆叠、Open 胶囊按钮均在 example.html 命中，与正文一致。
- [ok] example.md 与 example.html 一致性 — example.md 的 App/Title/Body/Time 与二级通知（Cursor/Spotify）逐条对应示例中的三张横幅。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html、example.md；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内 URL：https://cdn.tailwindcss.com、https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap、https://hyperframes.heygen.com/catalog（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
- [ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。
6结论
适合：产品发布预告、视频角落贴片、社媒通知样式配图；需要「一眼就是 macOS」的拟真度且不想带图片资源时最合适。配合 html-anything 的视频/导出链路用时，模板正文给版式、模型只填 App 名/标题/正文。
不适合：需要真通知系统联动或可点击交互的场景（产物是静态视觉稿）；A4/打印场景（画布是 16:9 或横幅）；要求绝对离线零外链且不自行替换 CDN 引用的场合。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 frame-macos-notification.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf9ec98ded8bf2d96…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE 文件为 Apache License Version 2.0；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。