首页 / 全部技能 / 设计 / frame-light-leak-cinema
设计 · nexu-io/html-anything

frame-light-leak-cinema

胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡

L1 基础 · 登记来源即可V1 已固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE;GitHub API spdx_id=Apache-2.0)Commit 553ed98c28
管控等级描述 skill 的能力与建议配套的管控措施,不代表质量或安全认证,也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同,请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者,使用风险由使用者自行承担。

1实现原理 · 为什么它能做到

这个 skill 不是可执行程序,而是注入给本机 coding-agent CLI 的一段提示词:宿主取 SKILL.md 正文,前面压一段全站共享设计指令、后面接用户内容,拼成一条 prompt 交给已登录的 agent,再把 agent 的 stdout 当 HTML 取回。

next/src/lib/templates/shared.ts
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
拼装模板 = 共享指令 → skill 正文 → 输入格式 → 用户内容;web 端 /api/convert 走同一函数:prompt = assemblePrompt({ body: skill.body, content, format });

共享指令层(不属于任何单个 skill,但每个模板都被它压着)把输出钉成『自包含单文件 HTML』,并明令禁止 agent 使用 Write/Edit/Bash 等文件系统工具,HTML 直接以对话正文流式输出。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
这是本批 skill 能力边界的来源:产出物只是文本,落盘与渲染由宿主前端负责;该禁令是 prompt 软约束,不是沙箱硬隔离。

SKILL.md 之外还有一条『内容驱动数量』覆盖规则:模板里写的任何页数/帧数/卡片数一律视为参考下限,实际数量由用户内容决定——防止 agent 用模板数字压缩用户内容。

next/src/lib/templates/shared.ts
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
对 frame-* 单帧模板尤其关键:它把模板里的版面描述定性为『可复用版面池』而非产量上限。

加载约定是『一个 skill = 一个文件夹』:SKILL.md(YAML frontmatter 供选择器 + 正文即模板 prompt),可选 example.md(样本输入)与 example.html(可直接打开的预览样张);新增模板只需加目录,不改 TS 代码。

next/src/lib/templates/loader.ts
* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker
loader 的 loadSkillFromDir 只读这三类文件,没有其它资产装载通道——第二遍据此核对本 skill 的资产可达性。

选择链路(CLI 侧)是三级漏斗:关键词强信号(每命中 1 词 2 分,阈值 3)→ 退化为 tags/scenario 打分 → 仍无把握就把用户内容前 800 字交给本地 agent 做一句话分类。

cli/src/skills-matcher.ts
const CONFIDENCE_THRESHOLD = 3;
AI 兜底的 prompt 原文:const prompt = `请用一句话(不超过15个字)描述以下内容最像什么类型的文档,只需回答类型名称:

预览链路独立于生成:/api/templates/<id>/preview 把 example.html 原样以 text/html 返回给 iframe;前端 iframe 用 sandbox="allow-scripts allow-same-origin"。

next/src/components/preview-pane.tsx
sandbox="allow-scripts allow-same-origin"
路由注释:* Returns the skill's `example.html` verbatim so it can be loaded into an(宿主侧取舍:allow-scripts + allow-same-origin 组合下,预览页脚本可自行摘掉 sandbox)。

画布是这套模板的辨识点:推荐 2.39:1 letterbox(1920×800,上下黑边各 140px),也支持全幅 16:9(1920×1080)。

next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
aspect_hint: "2.39:1 letterbox (1920×800) 或 16:9 (1920×1080)"
2.39:1 letterbox 是本模板最强的构图识别点。

胶片漏光用 2-3 个大 radial-gradient 椭圆 + 1 条底部 linear-gradient 叠出来,颜色限定暖橙/桃/玫红/暗黄,并明确『不要冷蓝』——用色彩温度而不是滤镜来立胶片感。

next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
- **胶片漏光 (Light Leak)**: 2-3 个大 `radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)` + 1 个底部 `linear-gradient(to top, #d97757 0%, transparent 30%)`; 颜色取暖橙 / 桃 / 玫红 / 暗黄, **不要冷蓝**。
用色彩温度(禁冷蓝)而不是通用滤镜立胶片感。

颗粒用全屏 SVG turbulence noise(opacity 14%、mix-blend-mode overlay)实现,并提供 data-URI 版 feTurbulence 写法;另有可选 feDisplacementMap 模拟胶片摆动(标注慎用)。

next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
- **35mm Grain**: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, `mix-blend-mode: overlay`; 也可用 `background-image: url("data:image/svg+xml,...feTurbulence...")`。
颗粒用 SVG turbulence + overlay,可 data-URI 内联。

胶片物理细节补全:胶片划痕(1-2px 竖向白线、不规则间距)与胶片齿孔(letterbox 黑边内等距小白方块用 repeating-linear-gradient)。

next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
example_desc: "2.39:1 letterbox + 衬线斜体大字 + 胶片齿孔"
划痕与齿孔把后期细节做成版面构件。

文字与色数双向约束:衬线大字(Source Serif Pro / Playfair / EB Garamond)5-8vw italic + 暖白;颜色绝不超过 4 个色相;中文因 Noto Serif SC 无 italic,改用 regular + 加大字距。

next/src/lib/templates/skills/frame-light-leak-cinema/SKILL.md
- 中文: `Noto Serif SC` italic 不存在 → 用 `Noto Serif SC` regular + 字距加大。
色相上限 + 中文 italic 处理,都是防止风格崩坏的具体约束。

2核心能力

012.39:1 letterbox(1920×800,上下 140px 黑边)与 16:9 双画布
02多层 radial-gradient 漏光(暖橙/桃/玫红/暗黄,禁冷蓝)
0335mm 胶片颗粒(SVG turbulence + overlay,opacity 14%)
04胶片划痕与齿孔装饰
05入场曝光动效(brightness 0.3→normal,800ms)+ 漏光 12s 周期漂移
06色相上限(≤4 个)与字体栈锁定
07中文衬线处理:Noto Serif SC 无 italic → regular + 字距
08仪表化文案位:角落 caption(REEL 03 · CH I · 1985)+ 底部 timecode/地点/日期
09选择器关键词:light leak / cinema / 电影感 / 漏光 / 胶片

3外部依赖

KindDependency / Endpoint
networkGoogle Fonts(EB Garamond / Source Serif Pro / IBM Plex Mono / Noto Serif SC,示例页实际引用)
networkTailwind Play CDN(共享指令强制;示例页亦引用)
networkhyperframes 目录页(frontmatter 出处标注,非运行时请求)

4管控建议与判定依据

建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据(文件路径与关键语句摘要)
  • SKILL.md: 纯提示词指令与规则文本,无脚本执行与外部影响
审计说明: 。判级对象是本 skill 自身目录(口径:照 SKILL.md 执行后实际会发生什么):SKILL.md 为纯指令文本,随附 example.md/example.html 是样本与预览样张,目录内无脚本、无运行时网络调用、无凭证读取、无 agent 侧文件写入;SKILL.md 也未点名任何外部生成/服务后端(对照 orange 先例 ai-image-generation / seedance:后者把素材送外部生成后端并消耗账号额度;本模板不产生素材外发)。不影响档位的说明项:目录内 example.html 会外链 cdn.tailwindcss.com 与 fonts.googleapis.com(批4 口径:example.html 外链属产物示例,不判级);共享指令层同样要求生成物在 head 里 CDN 引 Tailwind 与 Google Fonts(- 在 \`<head>\` 中通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。),那是宿主壳层行为。宿主背景(不计入档位,见 verdict.risks):预览 iframe sandbox="allow-scripts allow-same-origin";宿主以全权模式拉起 agent("bypassPermissions", / "--yolo",)。另注:SKILL.md 明令不引外部图片(漏光/颗粒均用 CSS + data-URI SVG 生成);目录内无脚本、无凭证、无写盘。

5第二遍独立确认

  • [ok] 画布/漏光/颗粒规格 — 重读 SKILL.md【画布】【背景】【文字】三段,逐字复核 2.39:1、140px、opacity 14%、overlay 等数值。
  • [ok] 『不要冷蓝』约束 — SKILL.md 原文:颜色取暖橙 / 桃 / 玫红 / 暗黄, **不要冷蓝**。与 JSON 引用一致。
  • [ok] 『无外链图片』结论 — 示例页 URL 扫描仅命中 fonts.googleapis.com 与 cdn.tailwindcss.com,无图片资源域;颗粒为 data-URI SVG。
  • [ok] 中文 italic 处理 — SKILL.md 原文:中文: `Noto Serif SC` italic 不存在 → 用 `Noto Serif SC` regular + 字距加大。,引用逐字通过。
  • [ok] 安全面 — 目录内 3 个文件无自写脚本、无凭证、无写盘、无表单外发。
  • [ok] meta 元数据 — GitHub API 实查 stars=8827、pushed_at=2026-09-15T03:36:24Z、license Apache-2.0。
  • [unlocatable] 安装量 — 无公开安装量数据源,installs=null。

6结论

  • 2.39:1 letterbox 画布 + 140px 黑边的组合直接给出电影宽银幕的构图框,比 16:9 更像『胶片截图』。
  • 胶片质感靠色彩温度与物理细节(漏光色相限制、划痕、齿孔)建立,而不是靠一层通用滤镜。
  • 把中文衬线的真实坑写进模板(Noto Serif SC 无 italic → regular + 字距),中文标题不会因为假斜体变形。
  • 动效克制且有降级:入场曝光 800ms、漏光 12s 漂移,prefers-reduced-motion 可关。
  • 适合: 适合纪录片/个人短片章节卡、影像作品片头、以及需要『胶片质感』的封面帧;做视频开场单帧、后期里当 title card 底板都合适。
    不适合: 不适合 9:16 竖版短视频(模板未覆盖竖屏画布);不适合需要大量文字信息的场景(大字号衬线 + letterbox 会挤压信息密度);不适合追求现代扁平 UI 风格的项目。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload frame-light-leak-cinema.tar.gz
    sha256: b36d67728ab9f7bb…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.