{"id":"29a9951c-971e-4ce4-b8ec-325f6f24d203","shortId":"Rqt2VN","kind":"skill","title":"frame-macos-notification","tagline":"拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告","description":"【模板: macOS 通知横幅】\n【意图】把一段公告 / 消息 / 提示渲染成 macOS Big Sur+ 风格的通知横幅, 适合视频角落叠加、产品发布预告、社媒图。Inspired by hyperframes macos-notification。\n\n【画布】两种用法:\n- 视频叠加 1920×1080, 通知放右上角, 周围透明。\n- 单独 banner 480×120, 居中输出。\n\n【横幅结构】\n- 外框: 圆角 14px (macOS Big Sur 标准), 480×120 (或更长 480×180 含正文), 12-16px 内边距。\n- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。\n- 边框: 1px `rgba(0,0,0,0.06)` (light) / `rgba(255,255,255,0.08)` (dark); 顶部加 1px 亮 highlight `rgba(255,255,255,0.5)`。\n- 阴影: `0 10px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08)`。\n\n【内容】\n- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。\n- 中间:\n  - 顶部 row: App 名 (SF Pro 13px, weight 600) + `now` 或具体时间 (12px, opacity 0.6) — 两端对齐。\n  - 标题 (15px, weight 600, 1 行截断)。\n  - 正文 (13px, weight 400, 1-2 行截断, line-height 1.35)。\n- 右侧 (可选): action button \"Open\" 或 \"Reply\" (capsule, 浅灰底)。\n\n【字体】\n- 主: `SF Pro Text` → fallback `Inter` / `system-ui`; 中文用 `PingFang SC` / `Noto Sans SC`。\n\n【可选附加】\n- 多条通知堆叠: 第一条在前, 后面 2 条向后向下递缩 (scale 0.96 + opacity 0.6 + translateY)。\n- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。\n- 右上角控制 chip \"Clear\" (hover 显示, opacity 默认 0)。\n\n【设计细节】\n- light mode 背景白磨砂, dark mode (推荐 video) 几乎黑磨砂。\n- icon 不能用外链 emoji 图片, 用 unicode emoji 或 CSS 绘制几何。\n- 必须用用户提供的内容; 标题 + 正文清晰来自用户输入。\n- 单文件 HTML, 注意 `backdrop-filter` Safari 需要 `-webkit-` 前缀。","tags":["frame","macos","notification","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-frame-macos-notification","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/frame-macos-notification","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,451 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:14.460Z","embedding":null,"createdAt":"2026-05-15T12:50:30.437Z","updatedAt":"2026-05-18T18:50:14.460Z","lastSeenAt":"2026-05-18T18:50:14.460Z","tsv":"'-16':63 '-2':173 '0':92,93,94,113,117,118,119,121,125,126,127,220,238 '0.06':95 '0.08':101,128 '0.18':120 '0.5':111 '0.6':160,213 '0.78':75,88 '0.96':211 '1':139,166,172 '1.35':178 '1080':40 '10px':114,136 '110':219 '12':62 '120':46,57 '12px':158 '13px':153,169 '14px':51 '15px':163 '180':60,82 '1920':39 '1px':90,104 '2':208 '200ms':221 '245':72,73 '247':74 '255':98,99,100,108,109,110 '28':85,86 '2px':122 '30':87 '400':171 '40px':80,115 '44':133,134 '480':45,56,59 '600':155,165 '6px':123 'action':181 'app':9,131,149 'backdrop':77,265 'backdrop-filt':76,264 'background':70 'banner':8,44 'big':24,53 'blur':79 'button':182 'capsul':186 'chip':232 'clear':233 'css':137,256 'dark':102,243 'eas':223 'ease-out':222 'emoji':141,250,254 'fallback':193 'filter':78,266 'frame':2 'frame-macos-notif':1 'frost':67 'glass':68 'gradient':138 'height':177 'highlight':106 'hover':234 'html':262 'hyperfram':32 'icon':10,132,248 'inspir':30 'inter':194 'light':96,240 'line':176 'line-height':175 'maco':3,6,17,23,34,52 'macos-notif':33 'mode':241,244 'monogram':143 'motion':229 'notif':4,35 'noto':201 'opac':159,212,236 'open':183 'overlay':14 'pingfang':199 'prefer':227 'prefers-reduced-mot':226 'pro':152,191 'px':64 'reduc':228 'repli':185 'rgba':71,84,91,97,107,116,124 'row':148 'safari':267 'san':202 'satur':81 'sc':200,203 'scale':210 'sf':151,190 'skill' 'skill-frame-macos-notification' 'source-nexu-io' 'sur':25,54 'system':196 'system-ui':195 'text':192 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'transform':217 'translatex':218 'translatey':214 'ui':197 'unicod':253 'video':13,246 'webkit':269 'weight':154,164,170 '不用外链图片':145 '不能用外链':249 '两种用法':37 '两端对齐':161 '个':140 '中文用':198 '中间':146 '主':189 '产品发布预告':15,28 '亮':105 '从屏幕外右侧滑入':216 '入场动效':215 '关闭':230 '内容':129 '内边距':65 '几乎黑磨砂':247 '前缀':270 '单文件':261 '单独':43 '可被':225 '可选':180 '可选附加':204 '右上角控制':231 '右侧':179 '名':150 '后面':207 '含正文':61 '周围透明':42 '图片':251 '圆角':50,135 '外框':49 '多条通知堆叠':205 '字体':188 '字母':144 '居中输出':47 '左侧':130 '必须用用户提供的内容':258 '意图':19 '或':142,184,255 '或具体时间':157 '或更长':58 '把一段公告':20 '拟真':5 '推荐':245 '提示渲染成':22 '效果':69 '显示':235 '暗色版':83 '条向后向下递缩':209 '标准':55 '标题':162,259 '标题正文':11 '模板':16 '横幅结构':48 '正文':168 '正文清晰来自用户输入':260 '注意':263 '浅灰底':187 '消息':21 '用':252 '画布':36 '社媒图':29 '第一条在前':206 '绘制几何':257 '背景':66 '背景白磨砂':242 '行截断':167,174 '视频叠加':38 '设计细节':239 '边框':89 '适合':12 '适合视频角落叠加':27 '通知':7 '通知放右上角':41 '通知横幅':18 '阴影':112 '需要':268 '顶部':147 '顶部加':103 '风格的通知横幅':26 '默认':237","prices":[{"id":"4f113e44-aaf9-4909-a887-1401ede780ef","listingId":"29a9951c-971e-4ce4-b8ec-325f6f24d203","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:30.437Z"}],"sources":[{"listingId":"29a9951c-971e-4ce4-b8ec-325f6f24d203","source":"github","sourceId":"nexu-io/open-design/frame-macos-notification","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-macos-notification","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:30.437Z","lastSeenAt":"2026-05-18T18:50:14.460Z"}],"details":{"listingId":"29a9951c-971e-4ce4-b8ec-325f6f24d203","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-macos-notification","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"f8e8225c50d6fe97447d58ace41f0367efdde633","skill_md_path":"skills/frame-macos-notification/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-macos-notification"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-macos-notification","description":"拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-macos-notification"},"updatedAt":"2026-05-18T18:50:14.460Z"}}