Menü
拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
推特金句 / 数据卡, 适合配推文
小红书风格知识卡片, 多张联排可滑动浏览
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
| name | frame-macos-notification |
| zh_name | macOS 通知横幅 |
| en_name | 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_id | sample-frame-macos-notification |
| example_name | macOS 通知 · 新功能发布 |
| example_format | markdown |
| example_tagline | Big Sur 磨砂玻璃 banner |
| example_desc | App icon + 标题 + 双行正文, 视频角落叠加用 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · macos-notification |
| od | {"mode":"video","surface":"video","scenario":"video","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: macOS 通知横幅】 【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。
【画布】两种用法:
【横幅结构】
background: rgba(245,245,247,0.78) + backdrop-filter: blur(40px) saturate(180%); 暗色版 rgba(28,28,30,0.78)。rgba(0,0,0,0.06) (light) / rgba(255,255,255,0.08) (dark); 顶部加 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)。【内容】
now 或具体时间 (12px, opacity 0.6) — 两端对齐。【字体】
SF Pro Text → fallback Inter / system-ui; 中文用 PingFang SC / Noto Sans SC。【可选附加】
transform: translateX(110%)→0, 200ms ease-out; 可被 prefers-reduced-motion 关闭。【设计细节】
backdrop-filter Safari 需要 -webkit- 前缀。