{"id":"61dc0879-068b-4c0e-a653-c96d44e9db35","shortId":"29d5TV","kind":"skill","title":"frame-light-leak-cinema","tagline":"胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡","description":"【模板: 胶片漏光电影帧】\n【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。\n\n【画布】\n- **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。\n- 或 16:9: 1920×1080, 无 letterbox。\n\n【背景】\n- 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。\n- **胶片漏光 (Light Leak)**: 2-3 个大 `radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)` + 1 个底部 `linear-gradient(to top, #d97757 0%, transparent 30%)`; 颜色取暖橙 / 桃 / 玫红 / 暗黄, **不要冷蓝**。\n- **35mm Grain**: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, `mix-blend-mode: overlay`; 也可用 `background-image: url(\"data:image/svg+xml,...feTurbulence...\")`。\n- 可选: 1 道 `feDisplacementMap` 模拟胶片摆动 (慎用)。\n\n【文字】\n- 中央或左下: 大字衬线 (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; 颜色暖白 `#f5e9d6` 或 cream。\n- 副标 (24-28px) 一行, opacity 0.7, 同样衬线。\n- 角落 caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): \"REEL 03 · CH I · 1985\"。\n- 底部 timecode + 拍摄地 + 日期 (mono, opacity 0.4)。\n\n【可选附加】\n- \"胶片划痕\": 几条 1-2px 竖向白线, opacity 0.2, 不规则间距 (用 `box-shadow` 多重 inset 或多个 `<div>`)。\n- \"胶片齿孔\": letterbox 黑边内, 等距小白方块 (CSS repeating-linear-gradient)。\n- 入场动效: 整画面从 underexposed (brightness 0.3) → normal, 800ms 内; 漏光位置缓慢漂移 12s 一个周期。\n\n【设计细节】\n- 颜色绝不超过 4 个色相 (深背景 + 2 个暖漏光色 + 文字 cream)。\n- 严禁: 蓝紫漏光 (违反胶片质感)、emoji、霓虹色、几何 dashboard 装饰。\n- 中文: `Noto Serif SC` italic 不存在 → 用 `Noto Serif SC` regular + 字距加大。\n- 必须用用户提供的标题; 自动估算合理\"年份 / 章节 / 地点\" 元数据 (但来源用户内容)。\n- 单文件 HTML, 用 `prefers-reduced-motion` 关动效。","tags":["frame","light","leak","cinema","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-frame-light-leak-cinema","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-light-leak-cinema","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,509 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.206Z","embedding":null,"createdAt":"2026-05-15T12:50:30.147Z","updatedAt":"2026-05-18T18:50:14.206Z","lastSeenAt":"2026-05-18T18:50:14.206Z","tsv":"'-11':160 '-2':181 '-28':147 '-3':67 '-8':136 '0':77,88 '0.18':157 '0.2':185 '0.3':207 '0.4':176 '0.5':164 '0.7':151 '000':40 '03':166 '0a1410':54 '0d0e1a':56 '1':33,80,120,180 '10':159 '1080':45 '12s':212 '14':104 '140px':39 '16':8,42 '1920':36,44 '1985':169 '1a0d08':52 '2':66,219 '2.39':32 '24':146 '30':90 '35mm':21,96 '4':216 '5':135 '50':79 '500':139 '800':37 '800ms':209 '9':9,43 'background':112 'background-imag':111 'blend':107 'box':189 'box-shadow':188 'bright':206 'caption':154 'ch':167 'cinema':5 'cream':144,222 'css':58,198 'd97757':87 'dashboard':229 'data':115 'display':132 'eb':133 'ellips':72 'em':158 'emoji':226 'f5e9d6':142 'fedisplacementmap':122 'feturbul':118 'ffb547':76 'frame':2 'frame-light-leak-cinema':1 'garamond':134 'gradient':59,71,84,202 'grain':97 'html':251 'hyperfram':27 'imag':113 'image/svg':116 'inset':192 'inspir':25 'ital':140,235 'leak':4,30,65 'letterbox':10,34,47,195 'letterspac':156 'light':3,29,64 'light-leak':28 'linear':83,201 'linear-gradi':82 'mix':106 'mix-blend-mod':105 'mode':108 'mono':162,174 'motion':256 'nois':101 'normal':208 'noto':232,238 'opac':103,150,163,175,184 'overlay':109 'playfair':131 'prefer':254 'prefers-reduced-mot':253 'pro':130 'px':148,161,182 'radial':70 'radial-gradi':69 'reduc':255 'reel':165 'regular':241 'repeat':200 'repeating-linear-gradi':199 'right':75 'sc':234,240 'serif':129,233,239 'shadow':190 'skill' 'skill-frame-light-leak-cinema' 'sourc':128 'source-nexu-io' 'svg':99 'timecod':171 'top':74,86 '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' 'transpar':78,89 'turbul':100 'underexpos':205 'uppercas':155 'url':114 'vw':137 'weight':138 'xml':117 '一个周期':213 '一行':149 '上下黑边各':38 '不存在':236 '不要冷蓝':95 '不规则间距':186 '严禁':223 '个人短片':18 '个大':68 '个底部':81 '个暖漏光色':220 '个色相':217 '中央或左下':126 '中文':231 '也可用':110 '但来源用户内容':249 '元数据':248 '入场动效':203 '全屏覆盖':98 '关动效':257 '内':210 '几何':228 '几条':179 '副标':145 '单文件':250 '古典胶片质感':24 '可选':119 '可选附加':177 '同样衬线':152 '图层':102 '地点':247 '墨绿':53 '多重':191 '大字衬线':127 '字距加大':242 '室内':61 '室外':62 '年份':245 '底层':49 '底部':170 '必须用用户提供的标题':243 '意图':16 '慎用':124 '或':41,143 '或场景描绘':57 '或多个':193 '拍摄地':172 '推荐':35 '整画面从':204 '文字':125,221 '无':46 '日期':173 '暖橙漏光':20 '暗黄':94 '桃':92 '模拟天空':60 '模拟胶片摆动':123 '模板':14 '深暖色':50 '深红棕':51 '深背景':218 '漏光位置缓慢漂移':211 '玫红':93 '用':187,237,252 '电影感开场':12 '画布':31 '竖向白线':183 '章节':246 '章节卡':13 '等距小白方块':197 '纪录片':17 '背景':48 '胶片划痕':178 '胶片漏光':6,63 '胶片漏光电影帧':15 '胶片齿孔':194 '自动估算合理':244 '蓝紫':55 '蓝紫漏光':224 '衬线大字':11,23 '装饰':230 '视频章节卡的开场单帧':19 '角落':153 '设计细节':214 '违反胶片质感':225 '道':121 '霓虹色':227 '颗粒':22 '颗粒噪点':7 '颜色取暖橙':91 '颜色暖白':141 '颜色绝不超过':215 '黑边内':196","prices":[{"id":"5a18701e-b3a4-4fe5-ab02-c97058eda7eb","listingId":"61dc0879-068b-4c0e-a653-c96d44e9db35","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.147Z"}],"sources":[{"listingId":"61dc0879-068b-4c0e-a653-c96d44e9db35","source":"github","sourceId":"nexu-io/open-design/frame-light-leak-cinema","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-light-leak-cinema","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:30.147Z","lastSeenAt":"2026-05-18T18:50:14.206Z"}],"details":{"listingId":"61dc0879-068b-4c0e-a653-c96d44e9db35","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-light-leak-cinema","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":"e50791c8caa443f07e5395022b3817a8fc6709b8","skill_md_path":"skills/frame-light-leak-cinema/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-light-leak-cinema"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-light-leak-cinema","description":"胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-light-leak-cinema"},"updatedAt":"2026-05-18T18:50:14.206Z"}}