Frame Macos Notification

Name: Frame Macos Notification
Author: nexu-io

nexu-io/open-design

1.6k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

frame-macos-notification is an open-design skill for macOS notification banner marketing frame visuals.

About

The frame-macos-notification skill from open-design creates macOS notification banner style marketing frames following open-design prototype web desktop templates. It uses bilingual zh and en naming metadata and HTML preview entry patterns like other open-design frames. Agents preserve visual signatures and use real notification copy instead of placeholder text. Use when developers need macOS-style notification mockups for product marketing or social visuals.

macOS notification banner open-design frame template.
Bilingual zh-CN and en metadata for template naming.
Prototype web desktop marketing scenario with HTML preview.
Real content requirement without lorem ipsum placeholders.
Part of nexu-io open-design frame library.

Frame Macos Notification by the numbers

1,613 all-time installs (skills.sh)
+125 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #224 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: MEDIUM risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

frame-macos-notification capabilities & compatibility

Capabilities: macos notification banner frame template · open design html preview integration · real copy enforcement without placeholders · bilingual template metadata support
Use cases: marketing · ui design

From the docs

What frame-macos-notification says it does

macOS Notification Banner

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill frame-macos-notification

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/frame-macos-notification.svg)](https://skillselion.com/skills/nexu-io/open-design/frame-macos-notification)

Installs	1.6k
repo stars	★ 82k
Security audit	2 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

How do I create a macOS notification banner marketing frame with open-design templates?

Render macOS notification banner frames using open-design template specs for marketing visuals.

Who is it for?

Marketers and developers creating macOS notification style promotional visuals.

Skip if: Skip for implementing real macOS notification APIs in app code.

When should I use this skill?

User requests macOS notification banner frame or open-design notification mockup.

What you get

Styled macOS notification banner frame with real copy following open-design signatures.

macOS notification banner frame
Video-ready overlay asset

By the numbers

Featured score of 41 in the open-design catalog
Supports 1920×1080 video and 480×120 banner aspect dimensions

Files

SKILL.mdMarkdownGitHub ↗

【模板: macOS 通知横幅】【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。

【画布】两种用法:

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

【横幅结构】

外框: 圆角 14px (macOS Big Sur 标准), 480×120 (或更长 480×180 含正文), 12-16px 内边距。
背景: frosted glass 效果 — background: 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) (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)。

【内容】

左侧: App icon (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, 不用外链图片)。
中间:
顶部 row: App 名 (SF Pro 13px, weight 600) + now 或具体时间 (12px, opacity 0.6) — 两端对齐。
标题 (15px, weight 600, 1 行截断)。
正文 (13px, weight 400, 1-2 行截断, line-height 1.35)。
右侧 (可选): action button "Open" 或 "Reply" (capsule, 浅灰底)。

【字体】

主: SF Pro Text → fallback Inter / system-ui; 中文用 PingFang SC / Noto Sans SC。

【可选附加】

多条通知堆叠: 第一条在前, 后面 2 条向后向下递缩 (scale 0.96 + opacity 0.6 + translateY)。
入场动效: 从屏幕外右侧滑入 transform: translateX(110%)→0, 200ms ease-out; 可被 prefers-reduced-motion 关闭。
右上角控制 chip "Clear" (hover 显示, opacity 默认 0)。

【设计细节】

light mode 背景白磨砂, dark mode (推荐 video) 几乎黑磨砂。
icon 不能用外链 emoji 图片, 用 unicode emoji 或 CSS 绘制几何。
必须用用户提供的内容; 标题 + 正文清晰来自用户输入。
单文件 HTML, 注意 backdrop-filter Safari 需要 -webkit- 前缀。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>macOS Notification · 转换完成</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  body {
    font-family: 'Inter','Noto Sans SC','PingFang SC',system-ui,sans-serif;
    background:
      linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%),
      radial-gradient(circle at 80% 20%, rgba(255,200,150,0.3) 0%, transparent 50%);
    background-blend-mode: screen;
    min-height: 100vh;
  }
  .frost {
    background: rgba(28,28,30,0.78);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    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);
  }
  @keyframes slideIn { from { transform: translateX(120%); opacity:0 } to { transform: translateX(0); opacity:1 } }
  .notif-1 { animation: slideIn .4s ease-out; }
  .notif-2 { transform: translateY(-12px) scale(0.96); opacity: 0.7; }
  .notif-3 { transform: translateY(-24px) scale(0.92); opacity: 0.4; }
</style>
</head>
<body class="flex flex-col items-end justify-start gap-3 p-12 text-white">
  <!-- top stacked notifs -->
  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-3">
    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#1DB954,#0d7a35)">🎵</div>
    <div class="flex-1 min-w-0">
      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Spotify</span><span class="text-[11px] opacity-60">2m ago</span></div>
      <div class="text-[12.5px] truncate opacity-80">Now Playing — Lo-Fi Essentials</div>
    </div>
  </div>
  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-2">
    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#0f0f12,#2a2a35)">⌘</div>
    <div class="flex-1 min-w-0">
      <div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Cursor</span><span class="text-[11px] opacity-60">1m ago</span></div>
      <div class="text-[12.5px] truncate opacity-80">同步完成 · 8 个文件已上传</div>
    </div>
  </div>
  <!-- main, in-focus notif -->
  <div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-1">
    <div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl shrink-0" style="background:linear-gradient(135deg,#ff7849,#d97757)">H</div>
    <div class="flex-1 min-w-0">
      <div class="flex items-center justify-between">
        <span class="text-[13px] font-semibold">HTML Anything</span>
        <span class="text-[11px] opacity-60">now</span>
      </div>
      <div class="text-[14px] font-semibold leading-tight mt-0.5">转换完成 · 杂志风网页 PPT</div>
      <div class="text-[12.5px] opacity-80 leading-snug mt-0.5">31.2 KB · 12 帧 · 已在右侧预览面板渲染。点击复制为公众号 / 推特格式。</div>
    </div>
    <button class="text-[11px] font-semibold px-2.5 py-1 rounded-full ml-1 shrink-0" style="background:rgba(255,255,255,0.12)">Open</button>
  </div>
</body>
</html>