Menu
Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | frame-macos-notification |
| zh_name | macOS 通知横幅 |
| en_name | macOS Notification Banner |
| emoji | 🔔 |
| description | Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. |
| zh_description | 拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告 |
| en_description | Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers. |
| 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":"Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「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- 前缀。A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "给这份 deck 做演讲体检" or "PPT 渲染质检". If all you want is one beautiful template page with no outline and no checkup, a rendering skill alone is enough.
A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.
Open Design's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
Open Design's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.
Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.