Saltar al contenido
Marketplace

frame-macos-notification

de nexu-io

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

Resumen

SKILL.mdLeída en 53231d4

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

Archivos 3 archivos

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add nexu-io/open-design --skill frame-macos-notification

Más de nexu-io

  • ui-ux-pro-maxnexu-ioCatalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.5,200 instalaciones en skills.sh0
  • frontend-designnexu-ioCreate distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.4,600 instalaciones en skills.sh0
  • web-design-guidelinesnexu-ioReview UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.3,700 instalaciones en skills.sh0
  • creative-directornexu-ioAI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.3,200 instalaciones en skills.sh0
  • design-briefnexu-ioParse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".3,200 instalaciones en skills.sh0
Todas las skills de nexu-io