★ FEATURED ARTICLE 人工智能AI Agent代码智能体开发工具【免费下载链接】stagewiseThe Open Source Agentic IDE. Create and orchestrate coding agents, show app previews and run git workflows. Use your favorite models across all providers.项目地址https://gitcode.com/gh_mirrors/st/stagewise点击查看免费下载导读在 Stagewise 开源仓库内置的 Remotion 视频生成插件中howto-layouts.md是一份面向 Agent 的风格指南写作规范它定义了场景布局Layout文档必须包含哪些信息从元素清单、位置关系到入场/退场转场再到多变体策略。本文以该文档为骨架结合SKILL.md、howto.md、howto-elements.md与transitions.md、timing.md等源码规则文件完整还原布局定义应写什么、为什么这么写并给出可直接落地的 Markdown 模板、参数说明与实现示例帮助你在自己的视频项目中把一个场景长什么样写成机器可读、Agent 可直接执行的结构化规格。一、布局定义在风格指南体系中的位置在 Stagewise 的 Remotion 技能skill体系中风格指南Styleguide被强制以技能形式存放在工作区.stagewise/skills/{STYLEGUIDE-SKILL-NAME}目录中见 howto.md。其标准目录结构为my-video-styleguide ├─ layouts │ ├─ hero-slide.md │ ├─ person-with-name-overlay.md │ └─ video-demo-slide-text-left.md ├─ storyboard-templates │ ├─ feature-launch.md │ └─ extended-product-demo.md ├─ elements │ ├─ logo.md │ └─ mascot.md ├─ DESIGN.md └─ SKILL.md其中layouts目录存放的就是本篇文章要讲的场景布局文档。它与另外三份文档的关系是layouts定义单个 Remotion 序列sequence看起来是什么样——内容、排列、入场/出场转场属于一屏级规格storyboard-templates定义多个场景以什么顺序组成一个视频属于一片级规格见 howto-storyboard-templates.mdelements定义可复用的视觉部件logo、吉祥物、遮罩、渐变图属于一物级规格见 howto-elements.mdDESIGN.md定义设计系统级 token颜色、字体、间距、圆角等是所有布局的底层数值来源见 howto-write-design-md.md。布局文档的编写时机由SKILL.md强制约定在Spec video阶段Agent 为每个序列使用风格指南中的布局定义如果缺少某个布局就必须先按howto-layouts.md的结构创建新布局先写布局规格再写代码一旦用户提出布局/模板修改请求也要先更新风格指南定义再改代码。这保证了Storyboard 始终是结构的唯一事实来源详见 SKILL.md。二、布局定义必须覆盖的三个维度howto-layouts.md开宗明义一份合格的布局定义必须包含以下三大部分——用哪些元素、元素之间的相对位置关系、如何转到其他布局。维度一元素清单Elements每个布局都要说清楚这一屏用了哪些元素并对每个元素逐项声明以下属性属性含义示例元素类型Type文本、视频、Demo 组件等text、video、demo-component、image、logo尺寸 / 变体 / 颜色Size, Variant, Color引用 DESIGN.md 中的 token 或具体数值h1、variant: monochrome、{colors.accent}入场/出场动画与转场Enter/Exit Animations/Transitions明确用哪种 easing、时长、transitionEasing.out入场、fade()15 帧序列内的移动Moving during sequence元素在场景持续期间的位置变化从右往左横移、缩放、位移可选还是必选Optional or mandatory该元素能否被省略optional/mandatory位置Position绝对/相对定位、到边框的距离absolute距右边缘 50px缩放与截断行为Resizing Truncation behavior空间不足时如何缩放或截断文本单行截断加省略号、等比缩放维度二元素之间的相对位置原文档强调必须定义场景的中心点是什么What is center point of the scene整个场景如何移动How does the scene move。这里的中心点指视觉重心例如人物讲解场景中人物面部是中心标题覆盖层围绕它排布产品 Demo 场景中屏幕是中心说明文字贴在左侧。而场景如何移动则指整屏的运动方式——是整体平移如滑入滑出、镜头推拉缩放还是保持静止只让内部元素动。这两点决定了布局在视频中的镜头感是布局区别于静态排版稿的关键。维度三到其他布局的转场每个布局都必须声明它与相邻布局之间的转场方式允许多个入场/出场变体Multiple variants for enter and exit possible明确每种变体何时使用Define when to use which variant。例如同一套产品截图 左侧说明文字布局可以定义两种出场方式exit-a: slide left用于连续讲解、保持叙事连续性、exit-b: fade blur用于章节收尾、进入 outro。何时用哪种必须在布局文档里写清楚而不是留给 Agent 现场发挥。三、布局文档的推荐结构可直接套用结合 howto-elements.md 的写法风格facts、短句、数字、可重复措辞、微型示例一份合格的layouts/xxx.md可以组织为# hero-slide: 产品发布 Hero 页 ## 用途 - 视频第 1 屏必选 - 也用于 outro 最后一屏可选去掉按钮 ## 元素清单 | 元素 | 类型 | 尺寸/变体/颜色 | 位置 | 入场 | 出场 | 序列内移动 | 可选性 | 缩放/截断 | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | 标题 | text | h1, {typography.h1} | 绝对距顶 20%居中 | Easing.out, 45 帧 | Easing.in, 30 帧 | 无 | mandatory | 最长 2 行超长字号 0.9x | | Logo | logo | variantmonochrome, 60px | 绝对右下角距边 50px | fade 20 帧 | fade 20 帧 | 无 | optional | 不缩放始终等宽比 | | 主视觉 | video | 100% 宽, 铺满背景 | 相对absolute fill | 无 | slide left 15 帧 | 从 1.05x 缩放到 1x | mandatory | 裁切 16:9 | ## 场景中心点与整体移动 - 中心点标题文本垂直中心x 轴居中 - 整屏移动入场时整屏自下方 40px 上移至最终位置之后静止 ## 转场 - 入场变体 A默认fade blur translate见 transitions.md - 入场变体 B用于接续前一场景slide from-left20 帧保持叙事连续性 - 出场变体 A默认slide to-left20 帧 - 出场变体 B章节收尾/outrofade blur30 帧关键纪律用表格承载可复制的数值用短句承载判断规则何时用变体 A、何时用 B。这与 howto.md 要求的压缩式写作一致——Guide 必须压缩成 facts numbers避免长段落散文。四、把布局描述转译为 Remotion 实现布局文档的价值在于它能被直接翻译成 Remotion 代码。以下是几组与布局定义强相关的实现要点均可在 SKILL.md 的规则文件索引中找到对应源码级说明。4.1 元素入场/出场动画只用 Remotion 原生 API规则文件 animations.md 明确所有动画必须使用useCurrentFrame()禁止 CSS transition、CSS animation 与 Tailwind 动画类名会导致渲染错误。时间统一用秒数乘以fpsimport { useCurrentFrame, useVideoConfig, interpolate, Easing } from remotion; export const FadeIn () { const frame useCurrentFrame(); const { fps } useVideoConfig(); const opacity interpolate(frame, [0, 2 * fps], [0, 1], { extrapolateRight: clamp, extrapolateLeft: clamp, easing: Easing.bezier(0.16, 1, 0.3, 1), }); return div style{{ opacity }}Hello World!/div; };4.2 缓动曲线选择进入用 Easing.out退出用 Easing.intiming.md 给出了与布局入场/出场直接对应的规则入场enter用Easing.out——起速快、落位稳观感自然出场exit用Easing.in——起速慢、加速离去如果设计稿给出了具体曲线优先用单个Easing.bezier(...)而非叠加预设曲线它等价于 CSScubic-bezier(x1,y1,x2,y2)Web 端 timing 可以直接搬过来。timing.md 还提供了三条可直接复制的曲线// 1. 锐利 UI 入场强 ease-out、无过冲 const enter interpolate(frame, [0, 45], [0, 1], { easing: Easing.bezier(0.16, 1, 0.3, 1), extrapolateLeft: clamp, extrapolateRight: clamp, }); // 2. 编辑部式慢淡入对称 ease-in-out const progress interpolate(frame, [0, 90], [0, 1], { easing: Easing.bezier(0.45, 0, 0.55, 1), extrapolateLeft: clamp, extrapolateRight: clamp, }); // 3. 俏皮过冲控制点 y 1先越界再回弹谨慎使用 const pop interpolate(frame, [0, 30], [0, 1], { easing: Easing.bezier(0.34, 1.56, 0.64, 1), extrapolateLeft: clamp, extrapolateRight: clamp, });技巧当多个属性共享同一套 timing 时先算一个归一化进度0→1再让所有属性从它派生实现timing 与 mapping 分离详见 timing.md。4.3 场景间转场Transition 与 Overlay布局文档中声明的到其他布局的转场在实现层面对应 transitions.md 的TransitionSeriesTransitionsTransitionSeries.Transition两个场景在转场期间同时播放因此会缩短时间线OverlaysTransitionSeries.Overlay在切点上方渲染一层效果不缩短时间线如 light leaks。import { TransitionSeries, linearTiming } from remotion/transitions; import { fade } from remotion/transitions/fade; TransitionSeries TransitionSeries.Sequence durationInFrames{60}SceneA //TransitionSeries.Sequence TransitionSeries.Transition presentation{fade()} timing{linearTiming({ durationInFrames: 15 })} / TransitionSeries.Sequence durationInFrames{60}SceneB //TransitionSeries.Sequence /TransitionSeries;转场类型可从remotion/transitions/*子模块导入fade、slide支持from-left/from-right/from-top/from-bottom、wipe、flip、clockWipetiming 可选linearTiming()与springTiming()。计算总时长时要注意两段各 60 帧、中间 15 帧转场总长为60 60 - 15 105帧而非 120 帧。4.4 序列内移动与元素出现时机Sequence / Series布局中序列内移动元素出现时机对应 sequencing.md 的Sequence/Series。要点用Sequence from{...} durationInFrames{...}控制元素在时间线上的出现窗口from建议写为1 * fps这种秒数形式总是为Sequence加premountFor提前加载组件避免卡帧Sequence from{1 * fps} durationInFrames{2 * fps} premountFor{1 * fps}Title //Sequence多个元素顺序播放且无重叠时用Series需要重叠时用负offset进入Sequence后useCurrentFrame()返回的是局部帧从 0 开始嵌套Sequence可实现更复杂的时间编排。五、写布局时的三条纪律先规格后代码创建或更新布局时先按本文结构写布局定义再写组件代码用户要求改动时同样先改风格指南再改代码见 SKILL.md。元素级复用与参数化可复用的布局应独占一个文件放进layouts/真正一次性使用的场景可以留在局部。布局中引用的 logo、吉祥物等元素优先复用elements/中已定义的组件并给出className、variant等参数说明参考 howto-elements.md 的LogoCombo示例。用 token 而非裸值颜色、字体、间距一律引用 DESIGN.md 中的 token如{colors.accent}布局文档只写用哪个 token具体数值收敛在 DESIGN.md保证全局风格改动只需改一处。六、用一帧渲染快速校验布局布局写好、代码实现后可用 SKILL.md 提供的一帧渲染命令快速检查排版、颜色与 timing 是否符合布局定义npx remotion still [composition-id] --scale0.25 --frame30在 30fps 下--frame30即 1 秒处--frame从 0 开始计数。对纯重构或已在 Studio 中充分预览的场景可跳过此步涉及多屏布局转换时建议逐帧抽查入场、停留、出场三个关键帧。总结howto-layouts.md虽然只是一份不到 20 行的规范清单但它把一个 Remotion 场景拆解成了可写、可读、可执行的结构化规格元素清单类型、尺寸、动画、位置、可选性、截断规则、元素间相对关系中心点、整屏移动、以及到其他布局的多变体转场。配合 Stagewise 风格指南体系中的SKILL.md流程约束、transitions.md与timing.md的实现规则任何 Agent 都能据此写出风格一致、可复用的视频场景并保证风格指南先行、代码随后的正确工作顺序。赞分享人工智能AI Agent代码智能体开发工具【免费下载链接】stagewiseThe Open Source Agentic IDE. Create and orchestrate coding agents, show app previews and run git workflows. Use your favorite models across all providers.项目地址https://gitcode.com/gh_mirrors/st/stagewise点击查看免费下载相关推荐Stagewise Remotion 风格指南可复用元素Elements的定义规范与实操指南Stagewise Remotion 风格指南可复用元素Elements的定义规范与实操指南 导读 本指南讲解如何在 Stagewise 的 Remoti人工智能AI Agent代码智能体开发工具mdx-deck 幻灯片布局Layouts完全指南自定义模板与内置布局实战mdx deck 幻灯片布局Layouts完全指南自定义模板与内置布局实战 导读 本文聚焦 mdx deck 的 幻灯片布局Layouts 机制如何开发工具前端vue-grid-layout 响应式预定义布局responsive-layouts实战指南vue grid layout 响应式预定义布局responsive layouts实战指南 本文基于仓库中 website/docs/guide/08 r前端UI组件上一篇Bytebase 预定义角色统一重构方案从 IAM 管理器到 Store 层的权限体系治理下一篇SurfSense 主 Agent 的 Gemini 适配提示词深入解析 provider_hints 设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
