frame-macos-notification

nexu-io/open-design · plugins/_official/examples/frame-macos-notification/SKILL.md

Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.

Product & ResearchNo license★ 91788⑂ 10564commit 9881cff

What this skill does

【模板: 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- 前缀。

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/frame-macos-notification · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/frame-macos-notification" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/frame-macos-notification" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/frame-macos-notification

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so frame-macos-notification is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

frame-macos-notification

nexu-io/open-design · plugins/_official/examples/frame-macos-notification/SKILL.md

Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.

Product & ResearchNo license★ 91788⑂ 10564commit 9881cff

What this skill does

【画布】两种用法:

视频叠加 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- 前缀。

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/frame-macos-notification · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/frame-macos-notification" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/frame-macos-notification" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/frame-macos-notification

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so frame-macos-notification is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

frame-macos-notification

What this skill does

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

frame-macos-notification

What this skill does

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits