{"id":"0323dff0-1e52-447e-a1e6-e57a2d48fea3","shortId":"s7mTsW","kind":"skill","title":"frame-liquid-bg-hero","tagline":"WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报","description":"【模板: 流体背景 Hero】\n【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。\n\n【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。\n\n【流体背景 — 3 种实现, 按用户偏好选】\n1. **CSS 多层 radial-gradient 错位呼吸** (最稳, 默认推荐):\n   - 3-5 个大椭圆 `radial-gradient(...)`, 颜色取自调色板。\n   - 每个椭圆套 `@keyframes` 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 `mix-blend-mode: screen` 或 `overlay`。\n   - 顶层加 1 层 `backdrop-filter: blur(80px)` 让边缘更糊。\n2. **Canvas + simple perlin noise** (中阶):\n   - 80 行 inline JS, 用 `requestAnimationFrame` 画 metaballs 或 simplex noise field。\n   - 性能允许时启用, `prefers-reduced-motion` 时降回静态截图。\n3. **WebGL fragment shader** (高阶, 慎用):\n   - 用 jsdelivr CDN 引 `regl` 或 inline plain WebGL。\n   - shader 写 domain-warp noise; 单个 quad, 一个 uniform `u_time`。\n\n【顶层文字层】\n- 居中或左下: 一句巨型金句 (5-7vw, 衬线或粗 sans), 字体: `Source Serif Pro` / `Inter Tight` / `Manrope Black`。\n- 文字色用 paper white `#fafaf8` 或 ink, 取决于背景明暗; 加 `mix-blend-mode: difference` 让它在任何流体颜色上都可读。\n- 副标 (小 sans, opacity 0.7) 一行。\n- 底部可选 CTA chip 或 hairline + 元数据 row。\n\n【调色 — 4 选 1, 不要彩虹】\n- 🌅 **Solar Peach** — `#ffb18a` + `#f78b4c` + `#d97757`, 暖橙桃。\n- 🌊 **Ocean Aqua** — `#5ac8fa` + `#0a84ff` + `#1e3a8a`, 海蓝。\n- 🌌 **Aurora Violet** — `#a78bfa` + `#7c5cff` + `#1e1b4b`, 极光紫。\n- 🌿 **Forest Mint** — `#86efac` + `#34d399` + `#065f46`, 苔森林。\n\n【设计细节】\n- 严禁: 多色彩虹 (>4 个色相)、PowerPoint 渐变、霓虹荧光叠加。\n- 字体: 中文用 `Noto Serif SC` (display) / `Noto Sans SC` (副标)。\n- 严禁外链图片; 全部 CSS + SVG + 可选 canvas。\n- 必须用用户提供的金句 / 标题; 如果用户输入是数据 → 提炼一句 ≤ 18 字的金句。\n- 单文件 HTML, 可被 `prefers-reduced-motion` 关动效。","tags":["frame","liquid","hero","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-frame-liquid-bg-hero","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-liquid-bg-hero","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,563 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.287Z","embedding":null,"createdAt":"2026-05-15T12:50:30.237Z","updatedAt":"2026-05-18T18:50:14.287Z","lastSeenAt":"2026-05-18T18:50:14.287Z","tsv":"'-14':76 '-5':61 '-7':151 '0.7':181 '065f46':219 '0a84ff':204 '1':51,88,193 '1080':39,42 '18':249 '1920':38,43 '1e1':212 '1e3':205 '2':96 '3':48,60,120 '34d399':218 '4':191,224 '5':150 '5ac8fa':203 '7c5cff':211 '8':75 '80':102 '80px':94 '86efac':217 'a78bfa':210 'a8a':206 'aqua':202 'aurora':208 'b4b':213 'backdrop':91 'backdrop-filt':90 'background':36 'bg':4 'black':162 'blend':82,173 'blur':93 'canva':27,97,244 'cdn':128 'chip':185 'css':26,52,241 'cta':184 'd97757':199 'differ':175 'display':234 'domain':138 'domain-warp':137 'f78b4c':198 'fafaf8':166 'ffb18a':197 'field':113 'filter':92 'forest':215 'fragment':122 'frame':2 'frame-liquid-bg-hero':1 'gradient':56,65 'hairlin':187 'hero':5,11,15,21 'html':252 'hue':72 'hue-rot':71 'hyperfram':32 'ink':168 'inlin':104,132 'inspir':30 'inter':159 'js':105 'jsdelivr':127 'keyfram':68 'land':10,19 'liquid':3,35 'manrop':161 'metabal':109 'mint':216 'mix':81,172 'mix-blend-mod':80,171 'mode':83,174 'motion':118,257 'nois':100,112,140 'noto':231,235 'ocean':201 'opac':180 'overlay':86 'paper':164 'peach':196 'perlin':99 'plain':133 'powerpoint':226 'prefer':116,255 'prefers-reduced-mot':115,254 'pro':158 'quad':142 'radial':55,64 'radial-gradi':54,63 'reduc':117,256 'regl':130 'requestanimationfram':107 'rotat':73 'row':189 'saa':18 'san':154,179,236 'sc':233,237 'scale':70 'screen':84 'serif':157,232 'shader':123,135 'simpl':98 'simplex':111 'skill' 'skill-frame-liquid-bg-hero' 'solar':195 'sourc':156 'source-nexu-io' 'svg':242 'tight':160 'time':146 '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' 'u':145 'uniform':144 'vfx':34 'vfx-liquid-background':33 'violet':209 'vw':152 'warp':139 'webgl':6,23,121,134 'white':165 '一个':143 '一句巨型金句':149 '一行':182 '不要彩虹':194 '严禁':222 '严禁外链图片':239 '个大椭圆':62 '个色相':225 '中文用':230 '中阶':101 '二选一':45 '但用':25 '元数据':188 '全部':240 '关动效':258 '写':136 '副标':177,238 '加':170 '单个':141 '单文件':251 '取决于背景明暗':169 '可作为视频片头帧':17 '可被':253 '可选':243 '周期':74 '多层':53 '多色彩虹':223 '如果用户输入是数据':247 '字体':155,229 '字的金句':250 '小':178 '层':89 '居中或左下':148 '平移':69 '底部可选':183 '引':129 '必须用用户提供的金句':245 '性能允许时启用':114 '意图':16 '慎用':125 '或':41,85,110,131,167,186 '按用户偏好选':50 '提炼一句':248 '整个画面叠':79 '文字色用':163 '时降回静态截图':119 '暖橙桃':200 '最稳':58 '极光紫':214 '标题':246 '模板':13 '横':40 '每个椭圆套':67 '流体感':24 '流体背景':14,47 '海报':12 '海报底图':22 '海蓝':207 '渐变':227 '用':106,126 '画':108 '画布':37 '确保单文件可双击打开':29 '种实现':49 '竖':44 '背景占满':46 '苔森林':220 '行':103 '衬线或粗':153 '让它在任何流体颜色上都可读':176 '让边缘更糊':95 '设计细节':221 '调色':190 '退化绘制':28 '适合视频片头':9 '选':192 '错位呼吸':57 '错峰':78 '霓虹荧光叠加':228 '顶层加':87 '顶层文字层':147 '顶部':20 '顶部叠加金句':8 '颜色取自调色板':66 '风流体置换背景':7 '高阶':124 '默认推荐':59","prices":[{"id":"a1978bfb-44a3-48a1-92dd-0383a2c6c637","listingId":"0323dff0-1e52-447e-a1e6-e57a2d48fea3","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.237Z"}],"sources":[{"listingId":"0323dff0-1e52-447e-a1e6-e57a2d48fea3","source":"github","sourceId":"nexu-io/open-design/frame-liquid-bg-hero","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-liquid-bg-hero","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:30.237Z","lastSeenAt":"2026-05-18T18:50:14.287Z"}],"details":{"listingId":"0323dff0-1e52-447e-a1e6-e57a2d48fea3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-liquid-bg-hero","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":"28fa8c1f2cd3a75b0ef5384590e3a6a7f29682dd","skill_md_path":"skills/frame-liquid-bg-hero/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-liquid-bg-hero"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-liquid-bg-hero","description":"WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-liquid-bg-hero"},"updatedAt":"2026-05-18T18:50:14.287Z"}}