企业官网建设流程全解析

这个月开始，我自己做短视频再也不是打开剪辑软件一条轨道一条轨道地拖了，而是直接开着编辑器让AI帮我写代码，代码一跑，一条成片就出来了。这不是什么未来概念，就是已经把很多内容团队跑通的流程。核心拼图有两块，一个是Remotion——用React和TypeScript做视频的框架，另一个是最近AI编程圈特别火的Agent Skills——把专业技能封装给AI代理，让它在你的项目里不是信口开河，而是真正懂行地帮你写代码。这篇我不讲虚的，直接把我从零跑通“AI写代码生成视频”的完整链路、踩过的坑、以及为什么这条路线值得内容团队和开发者重点关注，全部摊开聊。

1. 先搞懂Remotion到底是个什么东西

1.1 用写网页的方式写视频

Remotion是一个基于React的编程式视频生成框架。你写一个React组件，它把这个组件的每一帧渲染成图片，然后把图片序列编码成视频文件。理解它就一个关键点：视频不再是时间轴上的一堆素材，而是组件的状态随着帧号变化的结果。

具体来说，一个Remotion项目里，你定义一个Composition，指定这个视频的尺寸（比如1920x1080）、帧率（30fps或60fps）、总帧数（比如150帧对应5秒钟）。然后你的组件里有一个特殊的方法叫useCurrentFrame()，它返回当前渲染到了第几帧。组件里所有内容——文字位置、颜色、透明度、条状图高度——都由这一帧的数值经过计算得到。

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from "remotion"; export const MyVideo = () => { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); // 前1秒完成透明度从0到1的渐入，后1秒从1到0渐出 const opacity = interpolate(frame, [0, fps, durationInFrames - fps, durationInFrames], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); return ( <AbsoluteFill style={{ backgroundColor: "#111", justifyContent: "center", alignItems: "center" }}> <div style={{ opacity, color: "#fff", fontSize: 80, fontFamily: "sans-serif" }}> 第 {frame} 帧 </div> </AbsoluteFill> ); };

这段代码的意思就是：每一帧重新渲染整个页面，帧号不同，画面里的文字和透明度就不同。Remotion底层调用Chromium来做这个渲染，所以你在网页上能做到的任何视觉效果——CSS动画、Canvas绘图、WebGL、SVG路径动画——在Remotion里基本都能做，而且最终输出是高清视频文件。

我当时第一次理解这个逻辑的时候，脑子里蹦出来的类比是翻页动画：网页就是每一页的画纸，frame就是页码，浏览器把每一页快速翻过去，就成了一条视频。

1.2 代码做视频，优势到底是什么

有人会问，我用剪映拖块也能做视频，为什么要写代码？我聊一下我用代码做过几条片子之后的真实感受，这个优势是跨维度的。

第一是可版本管理。视频项目的所有状态都在代码里，git diff能显示出你改了哪个动画参数、哪个文案。团队协作也不会再出现“改了第三版终稿V5”这种地狱命名。需求变更直接改数字，不用重新去时间轴上找关键帧。

第二是组件复用。你花一晚上写了一个动态图表组件，以后任何需要图表镜头的视频直接引入就行。我做过一个数字增长动画组件，参数只要传起始值、结束值、时长，自动生成一个带缓动的计数器动画。这东西在剪映里每次都得手动调关键帧，在Remotion里就是一行<Counter from={0} to={100000} />。

第三是自动化。代码是可以用程序调用的。比如你有100条电商数据，想生成100条不同的产品介绍视频，传统剪法是一个模板套素材，但Remotion可以直接跑批量渲染脚本，循环生成100个MP4。这个能力对做矩阵号、做个性化营销内容的人来说，价值是几何级数的。

第四是精确到帧的控制。传统剪辑软件里，关键帧动画调起来很痛苦，但在Remotion里，动画的每一个中间状态都由数学函数精确决定，缓动曲线、时间偏移、叠加，全都可以精确控制。

我不否认传统剪辑软件在剪辑、调色、多轨道混剪这些方面依然不可替代，但如果你做的是数据叙事、产品发布、课程讲解、营销素材这类偏设计感和信息表达的内容，Remotion的效率和可控性真的高一个量级。

2. Agent Skills：AI从“聊天助手”变成“行业熟手”的关键一跃

2.1 普通AI对话和Agent Skills的差别在哪

如果你用普通聊天模型让它“帮我用Remotion写一个视频”，它确实能写出代码，但你会发现几个问题：它给的API可能已经过时，它不知道Remotion里不能用setTimeout来做延时，它也不知道字体加载要配合delayRender和continueRender，跑起来就是一串报错。原因不是模型不够聪明，而是它缺乏对特定工具“内行人才知道”的深度知识。

Agent Skills解决的正是这个问题。它本质上是一个预先打包好的“专业技能模块”，里面包含了某个领域的关键知识、操作流程、注意事项和工具调用方法。你可以把它理解成一个老师的“教案”——不只是知识的罗列，还包括课堂节奏、典型错误示范和纠偏策略。当AI被赋予一个Skill之后，它处理该领域问题的水平会从“略懂”变成“熟手”。

以写Remotion视频为例，一个合格的“Remotion技能包”至少应该包含下面这些内容：

• Remotion 4.x的API清单和正确的引入方式，而不是让AI凭记忆里的老版本API编代码
• 核心心法：所有动画必须基于frame派生，不允许用setInterval、requestAnimationFrame等网页端定时器
• 资源加载的规范写法：字体、图片、音频加载要用delayRender()+continueRender()配合，否则渲染会卡死或黑屏
• 明确禁止的操作：不要直接访问window和document，因为渲染环境是服务端浏览器
• 典型报错速查：比如“渲染卡住99%”大概率是资源加载没有正确通知Remotion

当AI带着这样的技能包来写代码，它生成的东西就不是“看起来像能跑”的代码，而是“真正能直接跑”的代码。这个体验差别，用过一次就回不去了。

2.2 为什么“会写代码”不等于“能做出成品”

很多朋友低估了一个真相：写代码只是生产力的一小部分，知道怎么写不出错才是大头。大模型训练数据里塞满了GitHub代码，它们“会写”几乎所有主流语言的语法，但在具体项目中，真正决定你能不能交付的是那些文档里查不到的环境知识。

举个例子，我用Remotion做了一条包含中文字幕的视频。本地开发服务器预览一切正常，一到服务器渲染就变成方块字。排查了半天才发现，服务器上的Chromium默认没有中文字体，必须在项目里显式加载一个中文字体文件，或者用staticFile()引入字体资源。这种问题，普通AI靠纯文本提示词基本救不回来，但如果你把“中文字体加载方案”写进技能包，AI会在生成字幕组件时自动带上字体加载的代码，从源头规避。

再比如Remotion的版本差异。3.x时代用<Sequence>的方式嵌套时间线，4.x做了不少接口调整。AI如果不绑定文档，很容易写出一堆老代码。但你给它喂了“与4.x API对照”的技能参考资料，它就会规范地写。版本绑定的重要性，程序员都懂，但AI对话里很少有人主动强调。

所以Agent Skills真正的价值，是把“我认为它应该知道的知识”从模型外部注入进去，让它在动手前就有了正确的心智模型。这比反复调prompt、把错误截图给它看，效率高了不知道多少倍。

3. 实操：用Remotion加Agent Skills跑通一条数据可视化视频

3.1 环境准备：几分钟搭好基础工程

如果你的机器上还没有Node.js 18以上版本，先装Node。然后安装FFmpeg，Remotion底层渲染MP4需要它。FFmpeg的安装方式我建议直接去官网下载对应系统的静态编译版，然后配置到PATH环境变量里，省得出一堆奇怪的解码错误。

接下来用官方CLI初始化项目：

npx create-video@latest my-video-project

这个交互式命令会问你选哪个模板，我建议新手直接选“Blank”空白模板，避免自带模板干扰理解。项目结构里核心的入口文件是src/index.ts，它负责注册你的Composition列表：

import { Composition } from "remotion"; import { MyVideo } from "./MyVideo"; export const RemotionRoot = () => { return ( <Composition id="MyVideo" component={MyVideo} durationInFrames={150} fps={30} width={1920} height={1080} /> ); };

想预览效果就运行：

npm run dev

它会打开Remotion Studio，一个可视化的预览界面，还能拖动时间轴逐帧看效果。这是我非常推荐的方式：先逐帧确认动画没问题，再进行最终渲染，别直接闷头渲染，否则一条5秒的片子渲染一分钟，发现问题来回折腾很浪费时间。

3.2 配置一个Remotion专属的Agent Skill

这里我要展开讲怎么配置Agent Skill。你不需要把这个技能包做得特别庞大，重点是精准，把Remotion生态里“高频踩坑+最佳实践”写成AI能直接利用的结构化文档。

目录结构大概长这样：

remotion-assets/ skill.md references/ animation-patterns.md asset-loading.md debugging-cheatsheet.md

skill.md里的内容，除了描述这个技能是干什么的，最重要的部分是“生成代码前必须遵循的规则”。我把最关键的三条规则列在这里，你可以直接抄：

• 规则1：动画进度只能用frame和interpolate计算，禁止在组件内部使用setInterval或async副作用来驱动界面变化。
• 规则2：凡需要加载外部资源（字体、图片、音频、数据），必须在组件开始时调用delayRender()，在资源加载完成后调用continueRender()，否则渲染进程会误判为空闲直接结束。
• 规则3：不要使用浏览器API（如localStorage、navigator），渲染环境没有真实浏览器完整能力，凡是拿不到的对象一律写成“读取失败给默认值”的健壮模式。

然后再把动画缓动函数、图表组件写法、字幕条样式这些案例代码作为参考文档放在references目录里。配置好之后，你向AI下发任务时，它就知道自己是一个“Remotion资深视频工程师”，知道写代码时优先考虑可渲染性，而不是只追求代码好看。

有人觉得这些规则自己写也行，确实，但Agent Skills的意义在于：这些规则被固化下来之后，团队里任何一个新同事用AI写视频代码，都不用重新踩一遍坑，这是知识资产的沉淀。

3.3 第一条“AI写”的数据视频：年度销售额柱状图

我的需求是生成一段5秒视频：一个深色背景，左边一个标题“2024年度销售额”，右侧是一个柱状图，柱子从0开始逐帧长高，最后停在某个销售额数字上。

给AI下达需求时，我会把需求写得非常具体，包括尺寸、帧率、总时长、配色倾向、柱状图有几根柱子，以及“动画方向是柱子从底部向上生长”。值得说明的是，写得越具体，AI生成的代码越接近预期。

AI生成的柱状图组件核心逻辑是这样的：

const BAR_HEIGHT = 400; const MAX_VALUE = 120000; export const Bar: React.FC<{ value: number; color: string; label: string }> = ({ value, color, label }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // 动画总长1秒，柱子从0长到目标高度，带一点弹性缓动 const progress = interpolate(frame, [0, fps], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic), }); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: 120 }}> <div style={{ width: 80, height: BAR_HEIGHT * progress * (value / MAX_VALUE), backgroundColor: color, borderRadius: 8 }} /> <div style={{ color: "#fff", marginTop: 12, fontSize: 24 }}>{label}</div> </div> ); };

AI在生成过程中，规则2起了作用——因为柱子高度要跟随数值比例，它主动用了interpolate和Easing，而不是写一个useEffect去改状态，这就是技能包在起作用。如果我不用Agent Skills，通用的AI很可能会写出一个用React状态去驱动动画的组件，在Remotion预览里完全不动，只能返工。

代码写完后，运行渲染命令：

npx remotion render MyVideo out/sales.mp4

一条成片就出来了。整条链路从我提需求到拿到MP4，大概20分钟，其中大部分时间是首次渲染时的缓存构建。这个速度对于传统生产方式来说，基本是降维打击。

4. 生成过程中翻过车的真实经历与排查技巧

4.1 渲染卡在99%半小时不动的元凶

我最早拿Remotion做视频时，最想砸电脑的时刻就是渲染进度卡在99%。后来排查出原因：组件里加载了一张远程图片，但由于网络波动图片没加载完成，而代码里没有调用continueRender()通知Remotion“资源到了，可以继续了”。Remotion会一直等下去，但等的资源永远不来，整个渲染就挂死了。

解决方案就是上面提到的规则2。凡是异步加载，必须配合delayRender()和continueRender()。但如果项目里有很多异步操作，还要注意一一配对，少一个continueRender()同样会卡死。我的排查方法是：如果卡住，先看控制台有没有关于“Render did not finish”的报错，再看代码里有没有遗漏调用的continueRender，最后看是不是字体或图片资源路径不对导致404。

4.2 动画“一动一卡”的掉帧问题

还有一次我做的动画在预览里明显卡顿，尤其是多个元素同时移动的时候。查了代码，发现AI生成时在每个组件里都直接读Math.random()来生成抖动效果。这在浏览器里没问题，但在Remotion的渲染模式里，每一帧都是重新渲染，随机数每次刷新全都不一样，导致运动轨迹完全不稳定，看起来像“发癫”。

正确做法是让“随机”变成“固定的伪随机”：用帧号做种子，生成一个稳定的偏移量。也就是说，视觉上它带随机性，但实际上每一帧的值都是确定的、由帧号推导出来的。凡是做动画，基本原则就是：任何效果都必须由帧号纯函数推导出来，不允许依赖运行时状态或随机数。

这个经验我写进了技能包的调试手册里，以后再遇到类似问题，AI直接就知道怎么规避。

4.3 中文字体变方块的坑

这个我在前文提过，服务端渲染环境没有本机字体库，默认字体渲染中文就是方块。解决方案是下载一个开源中文字体，比如思源黑体，放进public目录，用staticFile()引用，并在组件中构造FontFace对象加载：

const font = new FontFace("SourceHanSansSC", `url(${staticFile("SourceHanSansSC-Regular.otf")})`); await font.load(); (document.fonts as FontFaceSet).add(font);

这个过程必须放在delayRender()和continueRender()之间，确保字体加载完成后再继续渲染。这个问题在本地预览时很可能根本发现不了，因为本机字体系统里有中文字体，一旦部署到服务端就翻车。所以做视频交付时，一定要在干净的渲染环境里做最终验证。

4.4 给AI下需求时常见的三种翻车提问

给AI下需求这件事本身也是一种技能。我见过很多朋友抱怨“AI生成的东西没法用”，其实很多时候是提问方式的问题：

• 不说时长：只说“做一个柱状图视频”，AI就默认了不知道多长的时长，生成的结果要么太短要么太长。必须明确说“5秒，30fps，共150帧”。
• 不说风格和配色要求：AI生成出来的默认蓝色渐变风格可能不是你要的，得先描述清楚“深色背景、强调色橙色、简洁扁平”。
• 不说验收标准：AI不知道“渲染成功”和“画面好看”哪个优先，你需要明确“代码必须能通过Remotion渲染，动画效果只要柱子平滑增长即可”。

把这些验收标准写在任务描述里，AI代码生成质量会稳定很多。

5. 工具链全景：程序化生成和文生视频应该怎么选

5.1 两条技术路线的核心差异

现在说起“AI生成视频”，大部分人第一时间想到的是Sora、可灵、Luma这类文生视频工具——输入一句话描述，它给你生成一段看起来像电影镜头的画面。这些工具的画质和氛围感确实让人惊艳，但目前可控性差也是客观事实。你没法精确告诉它“第三秒的时候要出现一个数字从100跳到200”，它生成了就是一条固定视频，想改细节基本只能重新生成，成本高且不可控。

另一条路线就是我上面讲的程序化生成：用代码定义视频的全部内容。这条路的AI不是直接生成像素，而是生成生成像素的代码。掌控权完全在你手里，任何细节都能改，关键是可以和业务数据联动——数据一更新，视频自动跟着更新。

两条路线不冲突，我在实际内容生产里是这样分工的：

5.2 我的内容生产工作流

我现在做品牌向内容，标准工作流是这样的：环境氛围镜头用文生视频生成，或者直接用素材库里的空镜；而所有需要“信息表达”的画面——增长数据、产品功能点、价格对比、字幕条——全部用Remotion写代码生成。最后在剪辑软件里把这两类素材组合起来。

这套流程已经跑通好几条片子了，效果比纯剪素材或者纯文生视频都稳定。因为文生视频最大的问题不是画质，而是不可控和随机性，一旦涉及商业交付，你不可能接受画面文字乱码这种问题。Remotion这边，AI写代码出错了我能改，改完重新渲染，它的“失败成本”很低，所以适合做严肃交付物。

6. 给内容团队和独立开发者的五条务实建议

如果你看完上面的内容，准备尝试“AI写代码生成视频”这条路线，我基于自己跑通的经验，给你五条务实建议，每条都是我踩过坑换来的。

第一，不要一上来就搭复杂的模板。先做一个10秒内的极简动效，比如“渐变背景+三行文字逐帧入场”，跑通全流程之后再逐步加图表、加音乐、加转场。这样你能尽早理解Remotion的渲染模型——毕竟它和传统网页开发的心智模型差异不小。

第二，重视技能包的持续维护。Agent Skills不是一次配好就一劳永逸的。每踩一个坑，就把解决方案补进技能包。我自己的技能包现在已经积累了几十条约定，包含各种边界情况和奇奇怪怪的渲染报错。这些沉淀下来的经验，才是你区别于别人用AI的核心竞争力。

第三，把动画和业务数据解耦。写任何组件时都尽量保证数据通过props传入，不要写死在组件内部。这样未来接入接口、批量渲染、做中英文多版本时，改动成本就是加一个props的问题。因为这个习惯，我做过一个项目，客户说需要把整个方案改成另一套数据，我只改了数据文件，重新跑了10分钟，整批视频就全部更新了。

第四，音乐和音效不要忽略。Remotion支持音频解析和混音，但音频素材本身还是个独立问题。我现在的做法是：背景音乐走免版权音乐库，音效用程序合成的简单效果——比如数字滚动时的滴答声可以写一个周期函数直接生成音频文件。别小看声音，有没有一条合适的音效，视频质感天差地别。

第五，涉及公开交付的视频，最终渲染必须做一次完整的“干净环境”测试。本地开发能跑通，不代表服务器上能跑通。字体、权限、依赖版本，任何一个在干净环境里都可能暴露问题。我建议你租一台干净的基础云主机做最终渲染验证，至少保障交付物可复现。

7. 再往下走的两个方向

第一条路是模板化。把常做的几个组件——比如企业季度数据汇报、产品上新预告、社媒动态海报——全部封装成带参数的模板，配合AI的技能包，让团队成员用自然语言就能驱动产出。哪怕不懂代码，只要会说“我想做一个5秒的深色背景增长数据视频”，AI就能调取模板生成，这就是把你在技术上的积累变成团队生产力的杠杆。

第二条路是接入实时数据。我在前面提到过的，Remotion代码可以脚本化调用，那更进一步就是让视频内容直接读数据库或API。比如销售看板每天自动生成一条昨晚的销售数据短视频，早上推送到管理群，这一套流程实现起来并不复杂，但对业务的价值是即时且直观的。这一步做完，你会发现“内容生成”这个概念，真的可以变成一种自动运行的体系。

我现在的体会是，这个方向已经不再是程序员自嗨的小玩具，而是在内容生产和营销场景里有真实价值的工程化能力。AI把写代码的门槛压到足够低，Remotion把视频的生产方式从“剪辑”变成“工程”，这两件事几乎在同一年发生，所以它们合起来，就是“每个人都能用代码生成视频”这个判断落地的时间点。工具不会等谁准备好才升级，先用起来的人，脑子里已经多了一套别人还没有的表达方式。