Claude MarketplacesSubmit
nexu-io avatar

Frame Macos Notification

nexu-io/open-design

Renders macOS Big Sur style notification banners with frosted glass backgrounds, app icons, and title/body text. Built for video overlays or product launch teasers. The template nails the authentic look: 14px rounded corners, backdrop blur with saturation boost, proper shadows, and SF Pro typography. Icons are CSS-based gradients with emoji, no external images. Ships with light and dark modes, optional slide-in animation, and can either output a standalone 480×120 banner or overlay onto 1920×1080 video with transparency. The whole thing is a single HTML file with webkit prefixes for Safari. If you need a notification screenshot that doesn't look fake, this is it.

skills.sh installs
2.7K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill frame-macos-notification --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 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。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Category
Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatarsocial-x-post-cardnexu-io/open-designRealistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.2.7Kskills.sh installs
2nexu-io avatarsocial-spotify-cardnexu-io/open-designSpotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.2.7Kskills.sh installs
3dylantarre avatarmobile-touchdylantarre/animation-principlesUse when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.2.4Kskills.sh installs
4nexu-io avatarredesign-existing-projectsnexu-io/open-designUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without bre2Kskills.sh installs
5nexu-io avatarimage-to-codenexu-io/open-designElite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then impl2Kskills.sh installs
6dylantarre avatareducator-teacherdylantarre/animation-principlesUse when creating educational content, explaining concepts through animation, or when teaching animation principles to students.690skills.sh installs