SuperAPI AI 工具集

frame-macos-notification

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:把一段公告、消息或提示渲染成 macOS Big Sur+ 风格的通知横幅,适合视频角落叠加、产品发布预告、社媒图。

画布:视频叠加用 1920×1080,通知放右上角、周围透明;单独 banner 用 480×120 居中输出。

横幅结构:外框圆角 14px,480×120(或含正文的 480×180),内边距 12-16px;背景为磨砂玻璃效果,亮色 rgba(245,245,247,0.78) 配 backdrop-filter: blur(40px) saturate(180%),暗色 rgba(28,28,30,0.78);边框亮色 1px rgba(0,0,0,0.06)、暗色 rgba(255,255,255,0.08),顶部加 1px 亮 highlight;阴影 0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)。

内容:左侧为 44×44 圆角 10px 应用图标,用 CSS 渐变加 emoji 或 monogram 字母,不用外链图片;中间为应用名(SF Pro 13px、600)加 now 或时间(12px、opacity 0.6),标题 15px、600、单行截断,正文 13px、400、1-2 行截断、line-height 1.35;右侧可选 Open 或 Reply 胶囊按钮。字体主用 SF Pro Text,回退 Inter/system-ui,中文用 PingFang SC/Noto Sans SC。

可选附加:多条通知堆叠(首条在前,后两条 scale 0.96、opacity 0.6、translateY);入场动效从右侧滑入 translateX(110%)→0,200ms ease-out,可被 prefers-reduced-motion 关闭;右上角 Clear 控制 chip 默认 opacity 0、hover 显示。

限制:内容必须来自用户输入;图标禁止外链图片;单文件 HTML,backdrop-filter 在 Safari 需 -webkit- 前缀。其余安装或运行方式暂未提供。