Skip to content
Get packs

macOS Notification Banner

Creates realistic macOS-style notification banners for video overlays and product teasers

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent can turn your announcement or message into a single-file HTML design that looks like a macOS Big Sur notification banner, with a frosted-glass background, an app icon, a bold title and a short body. It is meant for overlaying in the corner of a 1920×1080 video or producing a 480×120 image for a product teaser or social post. The skill gives the agent visual rules (sizes, shadows, fonts, optional stacking and slide-in animation) so the output stays consistent.

Great for

  • Marketers making short product-launch videos who want a native-looking notification overlay
  • Designers who need a quick, editable HTML banner mockup
  • Creators adding a 'you got a message' style callout to tutorials or social images

Skip it if

  • Real notifications or anything meant to deceive viewers into thinking a real app sent a message, since the output is a fake UI mockup
  • Brand-sensitive work using Apple's trademarked look without checking usage rules, as the skill copies Apple's visual style

Try asking

  • “Turn my launch announcement into a macOS notification banner for a 1920×1080 video corner overlay”
  • “Make a 480×120 notification-style banner saying 'New feature: dark mode is here' for my product teaser”
  • “Create a dark-mode frosted-glass notification with the app name Acme and a two-line body about our update”
Step-by-step guide: how to use macOS Notification BannerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    frame-macos-notification.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frame-macos-notification.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frame-macos-notification.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent real title and body text; the skill asks for user-provided content and avoids placeholder text
  • Ask for dark mode when using it over video, since the skill recommends it for overlays
  • Check that backdrop-filter renders in your target browser; the skill notes Safari needs the -webkit- prefix

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.