frame-macos-notification

Original：🇨🇳 Chinese

Translated

Realistic macOS notification banner + app icon + title & content, suitable for video overlay / product launch announcements

3installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design frame-macos-notification

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: macOS Notification Banner】【Purpose】Render an announcement / message / alert into a macOS Big Sur+ style notification banner, suitable for video corner overlay, product launch announcements, and social media graphics. Inspired by hyperframes macos-notification.

【Canvas】Two usage scenarios:

Video overlay: 1920×1080, notification placed at the top-right corner with transparent surroundings.
Standalone banner: 480×120, output centered.

【Banner Structure】

Outer frame: 14px rounded corners (macOS Big Sur standard), 480×120 (or longer 480×180 including content), 12-16px padding.

Background: frosted glass effect —

background: rgba(245,245,247,0.78)

+

backdrop-filter: blur(40px) saturate(180%)

; dark version uses

rgba(28,28,30,0.78)

.

Border: 1px
```
rgba(0,0,0,0.06)
```
(light mode) /
```
rgba(255,255,255,0.08)
```
(dark mode); add a 1px bright highlight
```
rgba(255,255,255,0.5)
```
at the top.

Shadow:

0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)

.

【Content】

Left side: App icon (44×44, 10px rounded corners, CSS gradient + 1 emoji or monogram letter, no external images allowed).
Middle section:
- Top row: App name (SF Pro 13px, weight 600) +
```
now
```
  or specific time (12px, opacity 0.6) — justified alignment.
- Title (15px, weight 600, single-line truncation).
- Content (13px, weight 400, 1-2 line truncation, line-height 1.35).
Right side (optional): action button "Open" or "Reply" (capsule shape, light gray background).

【Fonts】

Primary:

SF Pro Text

→ fallback to

Inter

/

system-ui

; for Chinese, use

PingFang SC

/

Noto Sans SC

.

【Optional Add-ons】

Multiple notification stacking: The first one is on top, the next two are scaled down and shifted backward/downward (scale 0.96 + opacity 0.6 + translateY).
Entrance animation: Slide in from outside the right edge of the screen
```
transform: translateX(110%)→0
```
, 200ms ease-out; can be disabled by
```
prefers-reduced-motion
```
.
Top-right control chip "Clear" (shows on hover, default opacity 0).

【Design Details】

Light mode: white frosted glass background; dark mode (recommended for videos): almost black frosted glass background.
Icons cannot use external emoji images; use unicode emojis or CSS-drawn shapes.
Must use user-provided content; title + content should clearly come from user input.
Single-file HTML; note that
```
backdrop-filter
```
requires the
```
-webkit-
```
prefix for Safari.

frame-macos-notification

NPX Install

Tags

SKILL.md Content (Chinese)