cinetic
您正在执导一部短片,而非制作一个网页。画面、文案和声音是由一个时间线文件驱动的统一系统,只有经过渲染、测量和批评之后才算完成。
- 引擎。 默认使用 Remotion 4.0.529(React,帧驱动)。备选方案是 HyperFrames 0.8.79(HTML 加上暂停的 GSAP 时间线)。工艺与引擎无关;第 7 节列出了每个引擎不同的规则。
- 数字。 这里的每个数字都是经过发布作品验证的默认值:当您有明确的理由时,可以偏离的起点。它不是自然法则。
- 品牌。 当用户提供品牌(颜色、字体、Logo、素材、风格)时,品牌优先。审美默认值涵盖您必须自行构思的部分。
- 路径。 诸如
scripts/render.sh这样的路径在技能根目录以及电影项目中均可使用,因为scripts/new-film.sh会将每个脚本复制到项目中。除brand-svg.ts(由brand-kit.sh调用)外,每个脚本都打印--help。 - 工作示例。
references/worked-example.md以 Tessel 为例,这是一段 33 秒、1920×1080、60 fps 的产品发布片,展示了每条规则的实际应用,包括其中的错误。在您制作第一部电影之前,请先阅读一遍。
标准
目标是制作一部让人们愿意观看两次的电影:产品拥有的一个创意,用画面讲述,每一帧都经过精心选择,没有填充空间的多余内容。
- 实质优于打磨。 展示这个产品所做的具体、巧妙的事情,那些较简单的产品做不到的事情。围绕一个普通主张的完美动画仍然比不上一个粗糙但让观众觉得“哦,这很聪明”的电影。
- 独特的外观。 每个品牌都从它的名称、产品和个性中衍生出一套视觉语言,且严格遵守下面的硬性禁用列表。克制意味着没有装饰;并不意味着一成不变的极简风格。
- 超清晰且流畅。 简洁、现代的帧,富有创意和编舞。每个动作都以 60 fps 的速度缓入、有重量感且流畅:没有抖动、跳跃,也没有用特效来替代创意。
- 视觉化,而非旁白。 静音时也能理解创意;文字只是确认画面已经传达的信息。
- 重量与静止。 动作有质量,在节拍上到达,然后静止,这样快速的瞬间才能落地。
- 让画面感觉更好的声音: 每一个音符都能在画面中找到原因。
- 克制胜过装饰。 有疑问时,删除。
- 证据,而非印象。 下面的流程之所以存在,是因为在编辑器或 Studio 中无法判断这些内容:您只有在观看实际渲染并测量后才知道。
硬性禁用列表
当您设计外观时,以下内容永远不要出现。它们是生成内容最明显的标志,而此技能的存在就是为了制作看起来不像生成物的电影。lint-film.mjs 会检查令牌和样式是否包含它们,批评者也会检查帧。
-
文字:
- 标题上方的眉题或导语标签;
- 堆叠的标语,以及“Introducing…”;
- 文字墙,以及随机的填充文本:装饰性的等宽字幕、虚假的指标、没人需要的标签、Lorem ipsum。
屏幕上的每个字都必须有价值。
-
字体: 衬线字体,以及斜体或伪斜体样式,包括模拟斜体的倾斜。使用一种干净、现代的 sans-serif 字体,如果产品需要,再加上一种用于代码或数字的等宽字体。
-
颜色:
- 橙色、琥珀色、米色、奶油色、茶色或沙色,作为强调色、纸张底色或辉光;
- 霓虹色:非常明亮、饱和的强调色、辉光、发光和光晕;
- 紫色、紫罗兰色或靛蓝色,以及紫色到蓝色或任何多色调的渐变;
- 玻璃态效果。
-
装饰:
- 表情符号和库存图标;
- 代表“AI”的闪光、粒子、五彩纸屑、镜头光晕和代码雨;
- 任何非落地元素的弹性过度。
剩下的是丰富的:油墨和纸张(浅色或深色,中性或冷色调),一个来自禁止色系之外(红色、绿色、青色、蓝色、黄色)的、有含义的强调色,一个 sans-serif 字体,以及超清晰、流畅、缓入、有重量感、带运动模糊、无抖动的动画。创造力投入到创意、装置和编排中,而不是效果上。
如果用户提供的品牌包含这些元素之一(他们的衬线字标,他们的橙色),品牌优先,因为这是他们的身份,而非默认值。将其记录在 BRIEF.md 中,以便批评者不会标记它,并用 // cinetic:brand-supplied <what> 标记设置它的行,以便 lint 接受它们。
1. 格式和默认值
首先选择一行。它决定了长度、密度和要交付的文件列表。每种格式的说明在 references/formats.md 中。
| 格式 | 长度 | fps | 网格 (BPM) | 故事节拍 | 屏幕文字数 | 声音 | 交付物 |
|---|---|---|---|---|---|---|---|
| 发布片 / 预告片 | 20–45 秒 | 60 | 120 | 每 30 秒 8–10 个 | 总计 ≤ 20–35 个 | 完整配乐 + 音效 | 16:9 母版,9:16 和 1:1 重新布局,海报,如果需要则创建品牌工具包 |
| 产品 / 功能视频 | 8–30 秒 | 60 | 100–120 | 每个能力 8–10 秒 | ≤ 15 | 轻背景 + UI 音效 | 母版, 海报 |
| 功能循环 | 4–15 秒, 完整小节 | 60 (GIF 25) | 任意;完整小节 | 3–5 | ≤ 8, 静音可读 | 可选 | MP4, WebM, GIF, 无缝衔接 |
| Logo 开场 | 3–8 秒 | 60 | 120 | 2–4 | 名称 + ≤ 4 | 一个调校过的 + 尾部 | MP4, ProRes 4444 alphas (保持和清除), 海报, 如果需要则创建品牌工具包 |
| UI 导览 | 20–90 秒 | 60 | 90–110 | 每 2–4 小节 1 章 | 每段字幕 ≤ 6 | 背景 + UI 音效 | 母版, SRT 字幕 |
只要 UI、文本或摄像机在移动,就使用 60 fps。在 30 fps 下,缓慢的漂移会明显步进,快速的移动会产生频闪,而 24 fps 对 UI 来说永远不合适。GIF 是唯一的例外:从 60 fps 的母版以 25 fps(或 50 fps)导出,因为 GIF 帧延迟是以百分之一秒为单位的,30 fps 播放会快 11%。
2. 五大法则
- 一个创意,针对这个产品。 能够用一句话概括电影,并且证据展示了这个产品做了那些更简单或显而易见的版本做不到的事情。克制适用于装饰和文案,但绝不适用于产品的智能性:如果功能很聪明,电影就要展示这个聪明的部分。原因: 观众带走一个东西,而一个如果对竞争对手或更笨的功能也同样成立的电影,不会给他们任何可以带走的东西。
- 一个叙事装置。 一个物体、形状或颜色贯穿每个镜头,并且在剪切时不会消失。在发布片中,它理想情况下会在最后演变成 Logo;在功能循环或产品视频中,它是产品作用的单位(卡片、行、文件)。找到这个产品拥有的物体。一个裸点、线条或块是懒惰的默认值,也是这个技能自身示例的外观。原因: 它使电影具有连续性,让电影在静音时也能阅读,而拥有的物体是使电影无疑属于这个品牌的关键。
- 一个强调色,一个含义。 强调色是表示一个意思的单一令牌,例如“此刻”、“新”或“你的”。要谨慎使用(约占像素的 ≤ 8%),并且最多让它充满画面一次。原因: 有含义的颜色不需要文字就能被理解,而到处使用的颜色则毫无意义。
- 一个统一的运动系统。 使用一些命名的曲线和弹簧,每个都有明确的理由,并且从
timeline.ts中获取每个帧号。原因: 一致的运动本身就是品牌运动,而临时添加的缓动函数看起来像是生成物。 - 通过测量验证。 只有当渲染的像素和解码的音频通过脚本和一轮批评后,电影才算完成。原因: Studio 播放会隐藏爆音、鬼影帧、同步偏移和成品文件会显示的色彩偏移。
3. 工作流程
每一步都写入一个文件,每个关口都是一个您实际运行的检查。内联工作。子代理仅用于批评(第 8 节),因为并行构建帧所花费的时间多于节省的时间。
第 0 步:接收 → BRIEF.md
- 如果简报已经说明了产品、信息和长度,则推断其他所有内容并写下您的假设。
- 如果没有,最多问 3 个问题:用一句话说明产品、格式和长度,以及电影将在哪里展示。其他所有内容从第 1 节获取。
- 选择引擎:
- 默认使用 Remotion。
- 如果用户已有 HyperFrames 项目,想要 HTML/GSAP,或需要由变量驱动的
--batch渲染,则使用 HyperFrames。
- 将硬性禁用列表(上方)复制到
BRIEF.md中,以及任何品牌提供的例外。批评者稍后会被逐字提示此文件,因此它也是 QA 合同。 - 搭建项目框架:
bash <skill>/scripts/new-film.sh films/<name> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]。传递--link-modules <dir>/node_modules以重用现有安装,而不是运行npm install。 - 关口:
BRIEF.md有一个规格行,例如1920x1080@60, 30s, 120BPM, audio: synthesized。
第 1 步:概念 → TREATMENT.md
现在阅读 references/concept-and-story.md。
- 从具体内容开始,而不是风格。写下:
- 名称的含义或暗示(它通常会直接给出 Logo 和装置);
- 功能的非显而易见的行为,完成句子“与显而易见的版本不同,它……”;
- 产品自身的对象(它的行、卡片、读数和状态)。
- 通过不同的视角写出 3 个概念:
- (a) 产品自身的动词或隐喻的字面体现;
- (b) 观看者的痛点可视化;
- (c) 一个形式上的装置:一个传递对象,一个首尾呼应,一个连续的摄像机运动,或一个成为产品的容器。
- 抛弃任何其中道具可能出现在另一个产品电影中的概念。它不是你的。
- 为您选择的概念填写
assets/TREATMENT.md:- 一个 Logline;
- 故事弧线:钩子(深入问题,在 1 秒内感受到)→ 转折 → 证据(1–2 个能力)→ 承诺 → 定版;
- 装置路径,逐个镜头;
- 一个包含节拍 | 时间 | 画面 | 文案 | 声音的节拍表;
- 完整的文案及其字数;
- 最后一帧。
- 运行删除测试。移除演示节拍,价值主张应该仍然可读。移除价值节拍;如果电影仍然“有效”,那它就是一个功能巡览。
- 运行特异性测试。电影是否同样适用于一个更简单的产品,例如一个平均分配而不是逐项列出的,或者一个普通列表而不是排名列表?如果是,则证据未能充分展示产品;展示困难的部分。
- 运行功能词测试。静音观看时,陌生人会使用简报中对该功能的词汇(“连续”、“拆分”)吗?如果一个巧妙的装置使其被误解为其他东西,则保留功能的熟悉形式,让装置来装饰它。
- 关口:
- Logline 不超过 15 个字;
- 特异性测试通过,答案已写下;
- 字数在第 1 节的预算内;
- 每行不超过 5 个词,每个镜头不超过 2 行文字;
- 装置出现在每个节拍行中。
第 2 步:品牌和风格帧 → src/brand/
阅读 references/brand-and-color.md 和 references/copy-and-type.md 的字体部分。
-
启动器的色板、字体、Logo 和演示名称是标记为
// cinetic:placeholder的临时替代品,lint-film.mjs会报告错误,直到所有标记被移除。应用用户的品牌,或为这部电影发明一个,然后删除标记。保持启动器外观的电影看起来与其他所有用其制作的电影一样。 -
个性优先。 为品牌写三个形容词,然后从这些词推导出选择。这个映射在
references/brand-and-color.md第 2 节:- 字体:从
@fontsource-variable/*中为此品牌选择 sans-serif 字体,并使用node scripts/add-font.mjs <name>进行封装(与共享的node_modules一起使用安全);Geist 只是启动器的临时替代品; - 粗细和大小写;
- 舞台(浅色或深色:开发工具或火系名称的品牌通常需要深色),中性或冷色调,以及来自允许色系的强调色色调;
- 运动特性,从干脆到从容。
一个平静的笔记应用和一个快速的 CI 工具不应共享外观。
- 字体:从
-
编写
src/brand/tokens.ts(python3 scripts/palette.py --accent '#…' --stage dark构建中性色,检查对比度,并拒绝禁止的色相):- 颜色:一个墨水色,一个纸张色,2–4 个中性色,以及一个带注释含义的强调色;
- 字体:一个系列,2 种粗细,如果需要再加上一种等宽字体;
- 一个字体比例尺;
- 每个角色的一个字间距值。
-
在确定一个方案之前先探索 Logo。
- 绘制 6–10 个方向,每个来自不同的来源:名称的含义、字母形式、产品自身的对象、创意的隐喻,以及纯粹的几何构造。
- 将它们一起渲染在一张纸上并查看它(
MarkSheet仍在references/brand-and-color.md第 4 节中)。 - 拒绝任何可能属于其他十个初创公司的方向,包括“几何块 + 强调点”系列,这是这个技能自身示例的词汇。
- 运行误读测试。以 64 像素显示 Logo 半秒钟。如果它首先被读作一个常见符号(减号、表情符号、汉堡菜单图标、挂锁、播放按钮、加号),则拒绝它或更改它直到不这样读。
- 在一个 100 单位的网格上构建
src/brand/Mark.tsx中的获胜方案,网格间隙至少 8 个单位,以便在缩小时保持清晰。
-
一个具有特色的色板,在禁用列表内。 从名称和产品的世界中派生(山坡给出松树、苔藓和石板;铸造厂给出木炭、煤烟和炽热的红色),而不是从框架默认值派生。当名称的世界是火热时,橙色被禁止,所以使用炽热(在真正炭黑色上发光的深红色)或白热,永远不要使用普通的开发工具蓝色:颜色必须体现名称。蓝灰色近黑色舞台是标准的开发工具深色主题(
palette.py有说明),在开发工具中,红色 UI 标签会被读作错误;将红色用于品牌自身的事物。- 框架蓝(
#3B82F6/#2563EB系列)和纯灰色读作“默认”。 - 将中性色向世界色调倾斜,使用凉爽的绿灰色或蓝板岩色;深色舞台可以是松木黑或墨蓝海军而非
#000。 references/brand-and-color.md第 8–10 节有工作的色板。
- 框架蓝(
-
设置 lo...
[由于原文被截断,翻译在此处对应的位置截断。完整版应继续翻译所有后续内容。]