url-to-motion-design

URL 转动态设计

有人欣赏的一部影片，变成了 Fil 的动态场景库中的新场景：沿用相同的视觉风格和动态创意，使用 Fil 自己的措辞，不留原品牌的痕迹。整个流程已于 2026 年 11 月 5 日端到端完整运行一次（一支在 X 上发布的 3 分钟宣传片 → 九个场景，其中四个获评 8/10；呈现在画布上、作为放映页面以及 MP4）；这项技能就是修复了其中陷阱的完整流程。

路径：<skill> 是此文件夹，<repo> 是 facet-studio 检出目录，<run> 是运行文件夹（<repo>/qa/<slug>/，未跟踪）。

1. 获取素材

node <skill>/scripts/fetch-source.mjs "<url>" <run>/source

X 帖子通过 api.fxtwitter.com 获取（帖子的原视频和文本）；YouTube 和 Vimeo 通过 yt-dlp 获取；直接链接则照常处理。 阅读 source.json（文本、作者、时长），了解影片内容。

2. 找出每个镜头，选出最好的 5 到 10 个

node <skill>/scripts/shots.mjs scan <run>/source/source.mp4 <run>/scan

阅读 <run>/scan/sheets/ 中每张 1-fps 图表（1fps_<start>.jpg 的第 k 个缩略图对应第 start+k 秒），以及与它们放在一起的 cuts.txt。挑选：

• 仅限动态图形：动态文字、图表、UI、数据、粒子、拼贴。跳过人物讲话和普通实拍画面。
• 不要重复（所有者说：“场景应不可重复”）：每种只选一个。两个镜头若使用相同的视觉元素（白色和深色节点图、两个粒子球体、两个照片拼贴），就保留更出色的那个。风格相同但创意不同（例如塔和网格）的镜头可以都保留。
• 每个镜头 5 到 10 秒，以实际剪辑点为界。少于 5 秒的镜头不要。较长片段中可能藏有平滑转场：边界不明确时，查看 0.2 秒切片（ffmpeg -ss <t> -t 2.4 -i src -vf "fps=5,scale=320:-1,tile=6x2" -frames:v 1 x.jpg）。
• 最好的 5 到 10 个，按制作水准以及创意迁移到 Fil 世界的适配度排序。 编写 picks.json（[{id, name, a, b, hero, what}]；id 简短并带有分节前缀，例如 pg-tower），然后：

node <skill>/scripts/shots.mjs pick <run>/source/source.mp4 <run>/picks.json <run>

查看 overview.jpg 和每张英雄帧静图：如果某帧正处于转场中（两条字幕交叉淡入淡出、运动模糊、单词只替换了一半），就换个时间点。通过 SendUserFile 发送总览和静图。

如果对方要求先看截图，请在此处停止。 开始构建前先询问：构建需要数小时的 Agent，而不是花费额度，但由对方决定。

3. 设置运行环境

• 根据 references/builder-brief.md 编写 <run>/BRIEF.md：填写分节名称（使用朴素的风格名称，绝不使用来源品牌），用自己的话描述风格，为每个场景指定一个字体系列，并分别填写场景的 id、时长（镜头时长，5 到 8 秒）、信息类型（功能、数字、陈述），以及一个将镜头动态效果融入 Fil 世界的初步创意，且只能使用真实事实。
• 启动实验环境（references/lab.md）：为 lab/server.mjs 添加 launch.json 条目，运行 preview_start，对 scripts/render.mjs 做冒烟测试。仅使用应用内浏览器。
• 文件夹：<run>/scenes/、<run>/out/、<run>/keep/、<run>/judges/。

4. 使用辅助 Agent 构建

在后台启动三个通用辅助 Agent，每个负责 2 到 4 个场景，按底色分组（浅色数据、浅色产品、深色）。要求每个 Agent 阅读 <run>/BRIEF.md 及其中列出的所有内容，只编辑各自的文件，并为每个场景报告一行。它们工作期间，让运行器保持运行（参见 lab.md）：否则时间就会耗在这里。

5. 盲评、修复、重复

python3 <skill>/scripts/panel.py setup <run> <tag> <id,id,…>     # sheets + two anchors, shuffled
# two fresh general-purpose agents, each: read judges/<tag>/JUDGE.md, Read every sheet, write judges/<tag>/judgeN.jsonl, read nothing else
python3 <skill>/scripts/panel.py tally <run> <tag>

• 助手汇报后，立即评审其场景；不要等所有助手都完成。将每个已评版本复制到 keep/<id>-<tag>.html（以及对应的样式表）， 以免后续修改，并检查助手汇报后是否又编辑过（cmp）。
• 8 分，通过。 将其保存为 keep/<id>-pass-<tag>.html，并告诉对应助手以后绝对不要再碰它。
• 低于 8 分：逐字转发评审意见，加上你自己的一句判断和修复方案（references/seven-to-eight.md）。怪布局之前， 先亲自查看样式表；有一轮就因为误读了样式表中的单元格高度而白费了。
• 分数更低的版本作废：将较好的版本恢复为基础版本。如果连续两轮的意见都指出创意本身有问题，就换个创意，但保持相同风格。大约 6 个版本都评到 7 分后，就停止并询问负责人（第 19 轮时，他们选择了“就保持 7 分”）。
• 评审小组的分数会有大约 1 分的浮动；评分基准可以看出这次评审有多严格。

6. 放到画布上

references/publish.md：创建能容纳所有内容的空白区域，每个场景各放一个 Code/动态效果节点，名称中注明分数并附上完整评审意见；页面由低成本助手撰写并核对字符数；未达到 8 分的场景采用评审得分最高的版本；最后添加一行画布日志。 免费：绝不使用 generate。

7. 快速展示

主动准备：放映页面（scripts/screening.mjs → 在 localhost 上测试 → Artifact），以及带声音的真实 MP4（scripts/video.mjs，制作 1 分钟场景约需 12 分钟）。负责人两次提出“给我看视频”：第二次仅有实时页面还不够，必须提供视频文件。

全程遵守的规则

• 只借鉴风格，不抄袭内容。 只能借鉴视觉风格、配色、字体感觉、镜头和动态效果语言。绝不使用来源中的品牌、产品、Logo、文字、人物、照片、合作伙伴 Logo、宣传说法或完全相同的布局。Fil 的立方体（直接取自 public/favicon.svg）是唯一的 Logo。来源片段仅供参考，绝不发布。
• 只使用关于 Fil 的真实信息（references/scene-contract.md，Words）。
• 门槛是由两位全新盲评者评出 8 分，取较低分；并如实说明不足之处。
• 记录评审结果：每条评审意见都要作为一行写入实验室的 scores.jsonl。
• 产品没有变化，因此 facet-studio 中不需要版本号、更新日志或提交；技能本身的变更提交到 ~/.claude/skills 和 MengTo/Skills。

报告

用一张表列出：场景、评审者、画布上的内容（通过，或最佳版本及其不足）、画布链接、放映链接、视频文件。 然后说明不足之处以及如何改进（通常需要新创意，而不是润色）。