1、Skill 简介
这是一个自动化视频重建 Skill：给 SOLO 一段 TouchDesigner 数据可视化视频 + 一份内容文档，它能完成"逐帧分析原视频 → 生成 Remotion React 工程 → 用文档内容填充所有面板 → 输出可渲染的 MP4"。适合需要将视觉原型快速转化为可编程视频的创作者、数据可视化工程师和内容制作者。
最终产物是一个包含 5 个 Phase、35+ 个面板、5 种动效文字、带背景音乐和音频的完整 Remotion 工程（1920×1080, 30fps, 900帧/30秒），一键 npx remotion render 即可出片。
2、使用场景
为什么做它？
我有一个 TouchDesigner 做的数据可视化视频（效果很酷但不可复现），手头有一篇《宁夏美食高级综述报告》（18 种美食、12 种风味化合物、跨学科分析），想把这俩东西合在一起——用原视频的视觉语言来讲述报告内容。手工翻做的话需要：
逐帧分析 30 秒视频的每个面板位置、动效参数、切换节奏
手动写 React 组件、调 CSS、对齐 1920×1080 坐标
反复渲染→看效果→微调（每次渲染要等十几分钟）
用 SOLO 之后，整个过程变成"丢视频 + 丢文档 + 说需求"，SOLO 自动完成分析、生成、迭代修复。
能省掉什么？
手工做 SOLO 做
逐帧分析面板位置/动效 自动从视频中推断
手写 React 组件和动画 自动生成 Phase1-5 完整代码
调试帧范围/重叠 bug 自检修复循环
手填 18 种美食数据 从 md 文档自动映射
3、创作过程
第一轮：从视频到工程骨架
输入：上传原视频（grids × Visions by @orkhan）
关键提示词：
Plain Text
1
分析这个视频并生成 Remotion 工程
SOLO 生成了初版工程，但效果跟原视频差异较大——它最初把视频误判为"噪声网格"风格。于是我重新上传视频并选择"改进现有工程"模式。
第二轮：像素级重建
关键提示词（经过多轮迭代后收敛到这段话最有效）：
Plain Text
1
2
3
4
5
6
7
8
9
这是一个典型的 TouchDesigner 数据可视化/艺术数据集解析界面视频：
- Phase1: 系统初始化，4-6 个面板从屏幕边缘滑入
- Phase2: 节点网络并行展开，面板数量增加到 8-10 个
- Phase3: 全面板数据流，硬切图像替换，TSV 极速滚动
- Phase4: Blob 对象提取与语义化标签
- Phase5: 自然语言描述与收尾减速
风格：工业冷色调、等宽字体、无弹性动效（linear/ease-out）、绝对黑色背景
面板动效：EaseOut 缓出滑入、0.15s stagger、硬切图像切换（无渐变）
这轮之后，工程已经非常接近原视频。
第三轮：内容填充 + 文字动效
上传 宁夏美食高级综述报告.md，要求：
Plain Text
1
2
3
4
5
6
7
8
将 md 里的内容填入所有空白的面板里
面板间隙加入数据流动效变化
加入 5 种动效文字：
- 可微变量字体（font-variation-settings 弹性插值）
- 滚动驱动揭示（逐字符 ease-out 从下方滑入）
- 波浪文字（正弦波 + HSL 色彩流动）
- 弹性脉冲文字（独立字符 spring 弹跳）
- 数据流文字（水平滚动 Cycle）
第四轮：自检修复循环（最关键的环节）
这是这个 Skill 最特别的能力——SOLO 会自己发现问题并修复。我只需说"自检修复问题"，它就会：
读取全部 Phase 文件逐行审计
输出问题清单（帧越界、面板重叠、空白区域、类型错误）
自动修复 → 编译 → 渲染验证
再来一轮自检
经过 5 轮自检修复，从最初的 25+ 个 BUG 降到 0：
轮次 发现问题数 主要问题
第1轮 25 个 帧越界、类型错误、条件渲染死代码
第2轮 3 BUG + 空白区域 Phase3 面板重叠、Phase1/5 大面积空白
第3轮 5 个 Phase3 新面板与旧面板重复、CSS transition 无效
第4轮 2 个 未使用导入、死代码数据导出
第5轮 0 个 全绿 
改进建议迭代也很有用——我说"你还有哪些修改意见"，SOLO 从视觉质量、动效丰富度、代码架构等角度给了 12 项建议，我选了 11 项执行。
4、使用步骤
前置准备
安装 Remotion：npx create-video@latest
准备一个描述视频布局/动效的说明（或直接上传参考视频）
准备要填充的内容文档
Step 1：丢参考视频 + 描述需求
Plain Text
1
分析这个视频并生成 Remotion 工程
如有 md 文档，一并上传。
Step 2：迭代细化
Plain Text
1
2
修改标准：不规则非对称布局，4-6 个面板大小各异，随时间动态变化
面板动效按照原视频的方式自然运动
Step 3：填充内容 + 加入动效
Plain Text
1
将 md 里的内容填入所有空白面板，加入数据流动效变化和动效文字
Step 4：自检修复（可多次执行）
Plain Text
1
自检修复问题，并对空缺文字的面板补全文字信息，加入动效
Step 5：改进建议 + 执行
Plain Text
1
你还有哪些修改意见
选择要执行的改进项。
Step 6：渲染出片
Plain Text
1
2
cd touchdesigner-grids-remotion
npx remotion render TouchDesignerVisionsWithAudio out/vision.mp4 --codec h264 --crf 18
5、效果展示
最终成果
工程文件：20 个活跃文件（5 Phase + 11 组件 + 2 数据 + Main + Index）
面板总数：35+ 个（分布在 5 个 Phase 中）
动效文字：5 种（VariableFontText / ScrollRevealText / WaveText / PulseText / DataFlowText）
数据流动效：DataFlowParticles（彩色拖尾粒子）、FlowLine（8 点拖尾光线）、ScanLine（扫描线）、AnimatedGrid（脉动背景网格）
内容来源：18 种宁夏美食 + 12 种风味化合物 + 15 条语义描述 + 96 行 Python 代码
背景音频：dialogue.mp3（自动加载）
输出：1920×1080, 30fps, 900 帧（30 秒）, H.264 mp4
5 个 Phase 概览
Phase 时间 帧 面板数 特点
P1 系统初始化 0-4s 0-119 8 REPORT_META 闪现 → 面板逐个滑入
P2 节点网络 4-11s 120-329 8 NodeGraph 脉冲节点 + MosaicWall 576 格
P3 全面板流 11-17s 330-509 9 动态布局变化 + 条件渲染切换
P4 Blob 提取 17-23s 510-689 7 BlobViewer 入场/出场 + 缩略图条
P5 语义解析 23-30s 690-899 8 全屏减速 1→0.05 + 渐暗收尾
视频文件
最新渲染版本 v13：28 MB，全帧无错误
视频外链可通过网盘/视频平台上传后附上。
6、Skill 链接
GitHub / 工程文件：位于工作目录 touchdesigner-grids-remotion/，可打包分享
渲染视频：out/visions_v13.mp4（28 MB）
7、总结与思考
最满意的地方
自检修复循环是这个 Skill 最大的亮点。传统视频制作中，“面板重叠了 5px”"这段文字在 3 秒后会被截断"这类问题需要反复渲染后肉眼检查，而 SOLO 可以逐行审计代码、计算坐标、预测帧行为，比人工检查快一个数量级。
效率提升
对比维度 手工 SOLO
原视频逐帧分析 30-60 分钟 3-5 分钟
工程代码编写 4-8 小时 10-15 分钟
调试修复（5 轮） 2-4 小时 每轮 2-5 分钟
总计 约 1-2 天 约 40 分钟
后续优化方向
把从视频到工程的过程进一步自动化（视频帧提取 → OCR/布局检测 → 骨架代码）
加入更多组件模板（雷达图、热力图、3D 场景），让数据可视化面板更丰富
MosaicWall（576 张图片同时渲染）是性能瓶颈，需要改为 canvas 绘制
希望得到的反馈
是否还有其他视频类型（VJ 素材、信息图表、产品 Demo）可以走同样的"分析→重建→填充内容"流程？
Phase 交替时的过渡效果还有什么更自然的做法？
用 SOLO 创作，总共对话约 30 轮交互，从空白工程到渲染出片。