{"id":"f6786f43-79c2-4d8d-b1ff-09d34535a7d7","shortId":"RXSQfc","kind":"skill","title":"frame-logo-outro","tagline":"Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕","description":"【模板: Logo 收尾帧 (Logo Outro)】\n【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。\n\n【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。\n\n【布局】\n- **中心 Logo**: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。\n  - 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。\n  - 入场完成后, 整个 logo 加 glow bloom: `filter: drop-shadow(0 0 24px <accent>40)`; 同时一道 shimmer `mask-image` 横扫 logo (500ms)。\n- **品牌名**: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。\n- **Tagline**: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。\n- **底部 CTA + 元数据**: 双行底部 row, 例如 `htmlanything.dev · @htmlanything · 2026`, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。\n\n【调色 — 4 选 1, 不混用】\n- 🌌 **Midnight Indigo** — bg `#08090c`, accent `#7c5cff` (霓虹紫蓝 glow)。\n- 🌅 **Solar Amber** — bg `#0e0a08`, accent `#ffb547` (暖琥珀)。\n- 🌿 **Forest Mint** — bg `#0a1410`, accent `#5fb38a` (薄荷绿)。\n- ⚪ **Bone & Ink** — bg `#f1efea`, accent `#0a0a0b` (无 neon, 走 editorial 风, glow 改成阴影)。\n\n【设计细节】\n- **绝不**: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。\n- 入场动画用 `@keyframes` + `animation-delay`; 可被 `prefers-reduced-motion` 关闭。\n- 字体: 西文 `Inter Tight` / `SF Pro Display` / `Manrope`; 中文 `Noto Sans SC` weight 700。\n- 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback \"HTML Anything\" / \"Anything → beautiful HTML\"。\n- 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。\n- 顶部可选 5px ribbon (accent 色) 增加品牌识别。","tags":["frame","logo","outro","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-frame-logo-outro","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-logo-outro","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,564 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.371Z","embedding":null,"createdAt":"2026-05-15T12:50:30.329Z","updatedAt":"2026-05-18T18:50:14.371Z","lastSeenAt":"2026-05-18T18:50:14.371Z","tsv":"'-0.02':121 '-28':138 '-72':114 '-8':57,105 '0':72,89,90 '0.16':162 '0.4':166 '0.7':143 '08090c':39,177 '0a0a0b':202 '0a1410':193 '0e0':185 '1':73,172 '1.0':70 '1.2':77 '1.4':69,132 '1.8':146 '100px':66 '1080':37 '11px':157 '1920':36 '2026':156 '24':137 '24px':91 '4':56,170 '40':92 '400':141 '48':113 '500ms':100 '5fb38a':195 '5px':264 '6':104 '700':117,245 '7c5cff':179 '80ms':75 'a08':186 'accent':178,187,194,201,266 'amber':183 'anim':224 'animation-delay':223 'anyth':252,253 'beauti':254 'bg':176,184,192,199 'bloom':8,25,84,131 'bone':197 'css':51,217 'cta':28,149 'delay':225 'display':112,238 'drop':87 'drop-shadow':86 'editori':206 'em':122,163 'f1efea':200 'fade':127,144 'fade-up':126 'fallback':250 'ffb547':188 'filter':85 'forest':190 'frame':2 'frame-logo-outro':1 'freez':259 'glow':7,24,83,181,208 'gradient':45 'hairlin':62,167 'html':251,255,257 'htmlanyth':155 'htmlanything.dev':154 'hyperfram':31 'imag':97 'indigo':175 'ink':198 'inspir':29 'inter':108,234 'keyfram':222 'letter':119,160 'letter-spac':118,159 'logo':3,5,14,16,22,33,49,81,99,102,130,213,215 'logo-outro':32 'loop':261 'manrop':239 'mask':96 'mask-imag':95 'midnight':174 'mint':191 'motion':230 'neon':204 'noto':241 'opac':71,142,165 'outro':4,17,34 'prefer':228 'prefers-reduced-mot':227 'pro':111,237 'px':115,139 'radial':44 'radial-gradi':43 'reduc':229 'reveal':20 'ribbon':265 'row':152 'san':242 'sc':243 'scale':68 'sf':110,236 'shadow':88 'shimmer':94 'skill' 'skill-frame-logo-outro' 'solar':182 'source-nexu-io' 'space':120,161 'svg':53,219 'taglin':9,26,135,247 'tight':109,235 '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' 'typewrit':124 'uppercas':158 'vignett':42 'weight':116,140,244 '三角':61 '上浮':27 '下方':103 '不同方向':67 '不混用':173 '不要':260 '个几何块':58 '中心':48 '中文':240 '位置':106 '例如':153 '元数据':150 '入场':123 '入场动画':64 '入场动画用':221 '入场完成后':79 '关闭':231 '内联':52,218 '几何绘制':220 '分块拼装':23 '分块组装入场':6 '分隔':168 '加':82 '加微妙':41 '单文件':256 '双行底部':151 '可被':226 '同时一道':93 '品牌名':101 '品牌名下方一行':136 '品牌闭幕':12 '图片':214 '圆':59 '增加品牌识别':268 '大字':107 '字体':232 '布局':47 '帧':21 '底部':148 '开始':134 '必须用用户提供的品牌名':246 '必须用纯':216 '总时长':76 '意图':18 '或品牌深色背景':40 '揭示':10 '收尾帧':15 '改成阴影':209 '整个':80 '整个动画完成后':258 '方':60 '无':203 '暖琥珀':189 '模板':13 '横扫':98 '每个块从屏幕外滑入':65 '用':50 '用外链':212 '由':55 '画布':35 '组成':63 '绘制':54 '绝不':211 '色':267 '若没有':248 '薄荷绿':196 '西文':233 '视频结尾的品牌':19 '让中心更亮':46 '设计细节':210 '调色':169 '走':205 '跑':249 '这是视频结尾帧':262 '适合视频片尾':11 '选':171 '错峰':74 '霓虹紫蓝':180 '顶部可选':263 '颜色':164 '风':207 '黑色':38","prices":[{"id":"c9bf2560-dd11-488f-b031-d22541a7cb0e","listingId":"f6786f43-79c2-4d8d-b1ff-09d34535a7d7","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.329Z"}],"sources":[{"listingId":"f6786f43-79c2-4d8d-b1ff-09d34535a7d7","source":"github","sourceId":"nexu-io/open-design/frame-logo-outro","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-logo-outro","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:30.329Z","lastSeenAt":"2026-05-18T18:50:14.371Z"}],"details":{"listingId":"f6786f43-79c2-4d8d-b1ff-09d34535a7d7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-logo-outro","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":"1b71de2ce41d93c9e6e320a13f11f5d820c3feb4","skill_md_path":"skills/frame-logo-outro/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-logo-outro"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-logo-outro","description":"Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-logo-outro"},"updatedAt":"2026-05-18T18:50:14.371Z"}}