frame-macos-notification
Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
Profile →npx skills add nexu-io/open-design --skill frame-macos-notification --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
【模板: 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` 关闭。 -
What does the frame-macos-notification skill do?
Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
How do I install it?
Run `npx skills add nexu-io/open-design --skill frame-macos-notification --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.