用配置文件节省 AI Token:Remotion 视频效果开发实战

今天分享:使用ai工具的时候,如何节省token。 文章以 remotion 工具为例,进行讲解。 这个节省token方法的核心理念 —— 通过加载配置项或者读取文件目录的方式,动态地获取素材,避免更换素材之后,依然借助ai产出内容,进而引起token的浪费。 请看下面的案例。 图片铺满效果 提示词如下: 请用remotion框架,实现一个视频效果: 1、项目中有一个 public/images 文件夹,它是图片库,里面有多张图片(jpg、png等格式),它们尺寸不相同。你需要读取这个目录,遍历一下图片的数量,并把图片放在画布上。 2、图片的位置随机地散落在画面上,角度也是随机倾斜的。要保证随机性,每次启动工作台的时候,图片的位置都是不相同的。 3、视频中,这些图片从小到大出现,有弹出来那种感觉,然后,会很有弹性的晃动一下。 4、画面上展示的图片,请按照图片的原尺寸,进行适当缩小,放在画面上。 按照上述提示词生成的remotion代码,会优先加载images文件夹中的图片。 即便更换图片、增删图片,也没有关系。 remotion工作台启动的时候,会重新加载images文件夹中的图片。 这样就不会因调整素材而重复使用ai,达到节省token的目的。 进度条 提示词如下: 请帮我实现一个进度条效果。 配色:深蓝色科技感。 章节名称放在对应进度的上方。 进度条上,不同的章节,有分隔线隔开。 请创建一个ini文件,我会把进度条的时间,放在这个配置文件中,配置文件中会给出帧率、章节标题、起始时间(分:秒),结束时间(分:秒)格式如下: fps=30 [chapters] 1=开场介绍,00:00,00:35 2=主要话题,00:35,00:47 3=详细说明,00:47,01:28 4=总结,01:28,01:50 按照上述提示词生成的remotion代码,会先读取ini文件中的内容。 根据具体配置,例如:篇章标题、起始时间、终止时间……动态地制作出进度条效果。 避免每次制作新的进度条,仍需要问ai的不利情况,节省token的使用。 开源链接 以上视频效果,已开源至 github 平台。请点击项目链接,自行浏览。 以上就是本期分享,可以根据自身需求,并参考一下提示词的写法,写出自己想要的提示词。

2026年6月26日 · 高勉

Remotion完全指南:用React代码生成视频的前端框架教程

今天的文章,分享一下remotion工具。 以下是文字内容,也请参考视频演示。 1、remotion 是什么 remotion 不是 ai 工具,不是 ai 大模型。 它是一个代码开发的框架,借助H5、 CSS、Canvas、SVG、WebGL 等前端技术,将图形、文字、图片等元素,通过浏览器渲染出来,让用户看到动态效果,最后,再把这些动态效果,转化为视频。 即便 ai 技术消失了,remotion 仍然可以做出视频。 2、remotion 项目介绍 保证系统安装的 node 版本 >= 20。 找到一个空文件夹,用命令行终端打开。 在命令行终端执行,如下指令: npx create-video@latest 如果出现报错,请在命令行输入以下指令,配置代理 $env:HTTP_PROXY="http://127.0.0.1:代理端口" $env:HTTPS_PROXY="http://127.0.0.1:代理段口" 所有选项选择默认即可。 使用 vscode 打开项目。 输入: npm i 下载三方库。 npm run dev 打开 remotion studio 工作站。 remotion项目中的文件夹对应关系如下: 文件夹 对应工具 .agent / .agents VS Code Copilot Agent / 通用 agent 配置 .claude Claude Code(Anthropic) .cline Cline(VS Code 插件) .codex OpenAI Codex CLI .cursor Cursor(AI IDE) .windsurf Windsurf(Codeium 的 AI IDE) .continue Continue(VS Code 插件) .gemini Gemini CLI(Google) .roo Roo Code(VS Code 插件) .trae Trae(字节跳动 AI IDE) .goose Goose(Block/Square) .openhands OpenHands(原 OpenDevin) .kiro Kiro(AWS) .qwen 通义千问相关工具 .mcpjam MCP(Model Context Protocol)相关工具 .factory Factory .crush / .pi / .pochi 等 其他 AI 编程工具 其它目录: ...

2026年6月5日 · 高勉