사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-macos-notification --skill frame-macos-notification시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
【模板: 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 亮 highlightrgba(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→ fallbackInter/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-filterSafari 需要-webkit-前缀。
