AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载导读本文以 stitch-skills 仓库中 remotion 技能所附的 composition-checklist.md 为核心骨架系统讲解如何用 Remotion 把 Stitch 项目截图编排成带转场、缩放与文字覆盖的 Walkthrough 演示视频。读完你将掌握从项目初始化、素材准备、组件编写、动画配置、预览调试到最终渲染的完整质量关卡并了解每一关背后的仓库源码与脚本实现。该清单是 remotion 技能工作流的质量门禁技能的 SKILL.md 负责告诉 Agent 如何检索 Stitch 屏幕、搭建 Remotion 工程、生成组件并渲染而这份清单负责在每一步交付前逐项自检确保合成结构完整、动画流畅、输出专业。它不是一次性读完就扔的文档而是每次生成 Walkthrough 视频时都要对照执行的完工验收表。一、清单定位为什么需要一份合成检查清单Remotion 是一套用 React 写视频的编程式视频库而 stitch-skills 的 remotion 技能把它的能力与 Google StitchUI 设计平台打通Agent 通过 Stitch MCP 拉取项目中每个屏幕的截图与元数据再在 Remotion 工程里把它们编排为带转场、缩放和文字注释的演示视频。这类多屏幕合成任务最容易在以下环节出错素材缺失或路径写错截图没下载全、public/相对路径对不上组件结构不完整缺ScreenSlide或主合成转场没接上时序计算错误帧率、时长、转场偏移不匹配动画参数不自然spring 阻尼/刚度不合适画面生硬渲染前才发现构建错误。composition-checklist 正是为此设计把整个生产流程切成 13 个自检区块每个区块内有可勾选的验收项从项目搭建一直覆盖到最终成片与可选增强让 Agent 和人类开发者都能在渲染前发现隐患。清单末尾的 Notes 还明确建议每完成一项就把[ ]改为[x]并允许针对具体项目追加自定义检查项。二、阶段一项目初始化与依赖Project Setup清单的第一组勾选项是视频工程的地基Remotion 项目已初始化或已有工程已确认可用依赖已安装remotion/transitions等素材目录已创建public/assets/screens/屏幕清单已创建screens.json对应到 SKILL.md 中的实际操作# 没有现成工程时用官方模板创建空白 TypeScript 工程 npm create videolatest -- --blank # 进入工程后安装转场等核心依赖 cd video npm install remotion/transitions remotion/animated-emoji这里有两个关键约定素材必须放在public/assets/screens/Remotion 的静态资源加载以public/为根清单中imagePath写的是相对public/的路径如assets/screens/home.png这样Img组件才能正确解析screens.json是单一事实来源项目名、视频配置、每屏的标题/描述/尺寸/时长/转场类型全部由它驱动组件代码只负责消费它从而避免在组件里硬编码任何数值——这正是清单Best Practices Verified区块中No hardcoded values的落地方式。仓库 examples/screens.json 给出了黄金标准结构{ projectName: Calculator App, projectId: projects/13534454087919359824, videoConfig: { fps: 30, width: 1920, height: 1080, durationInSeconds: 20 }, screens: [ { id: 1, screenId: 12345, title: Home Screen, description: Main calculator interface with number pad and basic operations, imagePath: assets/screens/home.png, width: 1200, height: 800, duration: 5, transitionType: fade }, { id: 2, screenId: 12346, title: History View, description: View of previous calculations with option to reuse results, imagePath: assets/screens/history.png, width: 1200, height: 800, duration: 4, transitionType: slide } ] }注意清单中的结构比 SKILL.md 里的简版示例更完整除了每屏的duration停留秒数还多了transitionType每屏可单独指定 fade / slide / zoom和videoConfig全局 fps、画幅、总时长。durationInSeconds是参考值实际总帧数通常由组件端按各屏时长累加计算。三、阶段二素材准备Asset Preparation清单要求逐项核对所有 Stitch 截图已下载图片使用有描述性的命名图片尺寸已记录到清单图片已按需优化体积素材路径正确且相对public/书写3.1 下载截图Stitch MCP 的get_screen会返回screenshot.downloadUrl以及可选的htmlCode.downloadUrl、屏幕width/height和标题描述。下载有两种方式直接web_fetch或使用 Bash 调 curl。仓库为此提供了专用脚本 download-stitch-asset.sh./download-stitch-asset.sh https://storage.googleapis.com/... assets/screens/home.png该脚本有两个值得注意的工程细节curl -L -f组合-L跟随重定向Stitch 的签名 URL 常见跳转-f让 HTTP 错误直接失败——防止下载到一张错误页却当成素材保存下载后立即打印文件大小用stat做跨平台取 size 的回退方便 Agent 判断是否拿到了完整的高清图而不是残缺文件失败即清理下载失败时删除残留的OUTPUT_PATH并退出非零码避免脏文件进入public/assets/screens/。3.2 命名与记录描述性命名指按屏幕语义命名如home.png、history.png而非screenshot-1.png尺寸记录到清单指把 Stitch 返回的width/height写进screens.json对应条目供后续等比缩放与文字定位使用。图片优化压缩、选格式则遵循清单 Best Practices 中的原则UI 截图用 PNG照片类用 JPG。四、阶段三组件结构Component Structure清单的核心组件关卡ScreenSlide.tsx已创建Props 接口已定义缩放动画已实现淡入淡出动画已实现文字覆盖已包含WalkthroughComposition.tsx已创建已导入屏幕清单每屏使用Sequence组件屏间转场已配置时序偏移已正确计算4.1 ScreenSlide单屏展示组件按 SKILL.md 的架构约定ScreenSlide.tsx的 props 为imageSrc、title、description、width、height内部用 Remotion 的useCurrentFrame()与spring()实现缩放入场、淡入淡出与文字覆盖默认每屏展示 3~5 秒可在清单中按屏调整。TS 接口化 props 正是清单TypeScript interfaces used for props项的要求。4.2 WalkthroughComposition主合成组件仓库 examples/WalkthroughComposition.tsx 给出了可直接照抄的黄金标准实现它同时回答了清单里Sequence 组件、转场配置、时序偏移三个勾选项import {Composition} from remotion; import {Sequence} from remotion; import {fade} from remotion/transitions/fade; import {slide} from remotion/transitions/slide; import {TransitionSeries} from remotion/transitions; import {ScreenSlide} from ./ScreenSlide; import screensManifest from ../screens.json; // Calculate total duration in frames const calculateDuration () { const totalSeconds screensManifest.screens.reduce( (sum, screen) sum screen.duration, 0 ); return totalSeconds * screensManifest.videoConfig.fps; }; export const WalkthroughComposition: React.FC () { const {fps, width, height} screensManifest.videoConfig; return ( TransitionSeries {screensManifest.screens.map((screen, index) { const durationInFrames screen.duration * fps; // Select transition based on screen config const transition screen.transitionType slide ? slide() : screen.transitionType zoom ? fade() // Can customize with zoom effect : fade(); return ( TransitionSeries.Sequence key{screen.id} durationInFrames{durationInFrames} ScreenSlide imageSrc{screen.imagePath} title{screen.title} description{screen.description} width{screen.width} height{screen.height} / {index screensManifest.screens.length - 1 ( TransitionSeries.Transition presentation{transition} timing{{ durationInFrames: 20, // 20 frames for transition }} / )} /TransitionSeries.Sequence ); })} /TransitionSeries ); };这段代码揭示了清单勾选项背后的三个要点TransitionSeries才是转场的正确载体它来自remotion/transitions与裸Sequence的区别在于能在前后两段之间插入TransitionSeries.Transition实现真正的重叠转场而非生硬切换转场类型由清单数据驱动transitionType为slide用slide()zoom或fade落到fade()注释提示 zoom 可自定义缩放效果完全契合No hardcoded values原则时序偏移的计算公式durationInFrames screen.duration * fps而总时长calculateDuration()累加所有屏幕的秒数再乘 fps——因此清单中remotion.config.ts的 duration 必须与这个计算结果一致否则合成会在结尾出现空帧或截断。示例末尾的RemotionRoot把合成注册进CompositionidWalkthroughComposition、fps/width/height均取自videoConfig这就是阶段四配置检查的依据。五、阶段四合成配置Configuration清单要求核对remotion.config.ts已更新Composition ID 已设置视频尺寸已配置帧率已设置30 或 60 fps时长计算正确视频元数据已设置如适用标题描述Composition ID就是npx remotion render ID时使用的标识符仓库示例固定为WalkthroughComposition尺寸直接复用videoConfig.width/height示例为 1920×1080与 Stitch 屏幕 1200×800 存在比例差需按Maintain aspect ratio原则等比缩放帧率建议 30 或 60 fps——60 fps 尤其用于修复清单Common Issues中的顿挫动画问题时长必须与calculateDuration()的输出一致。元数据标题/描述写入输出文件的标签信息用于发布到 YouTube 等平台时的自动填充属于Final Output阶段Metadata embedded项的前提。六、阶段五动画与转场Animations Transitions清单的质量关卡Spring 动画使用合适配置Damping 值典型 8~15Stiffness 值典型 60~100转场流畅平滑文字覆盖时序正确无突兀、生硬的画面变化6.1 Spring 参数区间Remotion 的spring()是物理弹簧动画两个核心参数的经验区间在清单中被明确定死参数推荐区间作用damping8 ~ 15越大回弹越少、越粘越小越有弹性stiffness60 ~ 100越大运动越快越干脆越小越迟缓SKILL.md 的 Hotspot 示例给出了基准配置{damping: 10, stiffness: 100}可用于缩放强调动画。若画面choppy清单建议升到 60 fps 并重新校准这两个值。6.2 转场与文字时序转场用remotion/transitions的三种效果fade交叉淡入淡出、slide方向性滑入、zoom用 spring 驱动的缩放强调。示例中单次转场占 20 帧约 0.67s 30fps节奏适中。文字覆盖屏幕标题、功能标注、描述文字、进度指示必须与所在屏幕的duration对齐淡入淡出时间要留给读者阅读否则就是清单Text has time to be read项的失败。七、阶段六视觉质量Visual Quality清单的视觉验收项文字任何时刻均可读文字与背景对比度足够字号适配视频分辨率图片无变形宽高比保持这些项的实践依据字号要按最终输出分辨率如 1920×1080而非原始屏幕尺寸设计图片放进合成时若强制拉伸会破坏宽高比应等比缩放或使用object-fit类策略文字叠层应避免与截图内容同色必要时加半透明背景条提升对比度——这与 SKILL.md Best Practices 第 3 条Readable text一一对应。八、阶段七节奏把控Timing清单要求每屏展示时长合适视频总长度合理不过长/过短转场不显得仓促文字有足够阅读时间SKILL.md 的常见模式给出了节奏基准每屏 3~5 秒、转场采用交叉淡入淡出需要强调的屏幕可延长至 5 秒以上示例清单中 Home 与 Scientific 均为 5s其余 4s。清单Consistent timing最佳实践提示除非刻意强调某屏否则保持各屏时长一致。总长度需考虑目标平台习惯如社交媒体短视频应控制在数十秒内示例工程 4 屏合计 20 秒即属合理区间。九、阶段八预览与测试Preview Testing清单的调试关卡在 Remotion Studio 中预览npm run dev拖动时间线检查所有帧确认播放流畅检查渲染错误在多种屏幕尺寸下测试若响应式npm run dev启动 Remotion Studio 浏览器预览是 SKILL.md 执行步骤第三步Preview and Refine的核心Agent 在此实时调整每屏时长、转场平滑度与文字时序。时间线逐帧检查能提前暴露清单 Common Issues 中的模糊图、错位文字与断帧问题——所有问题都应在这个阶段解决而不是留到渲染阶段。十、阶段九渲染与最终输出Rendering Final Output清单的收尾关卡渲染命令已测试且可用输出格式已选择MP4、WebM 等质量设置已配置Codec 已指定推荐 h264最终视频无错误渲染成功视频文件生成成功文件大小合理视频可在播放器中正常播放已包含音频如适用已嵌入元数据如需对应 CLI 渲染方式SKILL.md 执行步骤第四步npx remotion render WalkthroughComposition output.mp4可用优化参数--quality质量档位、--codec h264推荐或h265体积更小但兼容性略低、--concurrency并行渲染加速。选择 MP4 h264 是目前跨平台播放兼容性最好的组合WebM 适合体积敏感的场景。文件大小应在渲染后核验异常巨大通常意味着码率或分辨率设置偏高。音频背景音乐/旁白与元数据标题/描述按需在渲染阶段一并处理。十一、可选增强Optional Enhancements清单的可选加分项全部在 SKILL.md Advanced Features 中有对应实现方案进度指示器显示当前屏位自定义 Logo 或品牌标识背景音乐或音效旁白配音交互热点高亮功能区域片尾行动号召CTA交互热点是其中最具产品演示价值的一项SKILL.md 给出了骨架代码import {interpolate, useCurrentFrame} from remotion; const Hotspot ({x, y, label}) { const frame useCurrentFrame(); const scale spring({ frame, fps: 30, config: {damping: 10, stiffness: 100} }); return ( div style{{ position: absolute, left: x, top: y, transform: scale(${scale}) }} div classNamepulse-ring / span{label}/span /div ); };旁白配音流程为由屏幕描述生成配音脚本 → 文本转语音或录音 → 用 RemotionAudio组件导入 → 让屏幕切换节奏与配音语速对齐。动态文字提取则可下载 Stitch 的htmlCode.downloadUrl解析出标题、按钮、标签等文本自动生成定时文字标注减少手写文案成本。十二、最佳实践与常见问题Best Practices Common Issues12.1 最佳实践验收清单要求最终核对工程规范组件代码模块化、可复用Props 使用 TypeScript 接口无硬编码值一律使用清单/配置代码遵循 Remotion 惯例复杂逻辑添加注释素材组织在清晰的目录结构中这与示例代码直接呼应WalkthroughComposition.tsx里calculateDuration有注释、转场选择逻辑是数据驱动的、目录结构按video/src/、video/public/assets/screens/、根目录screens.json、output.mp4组织完整结构见 SKILL.md 的 File Structure 与 README.md。12.2 常见问题排查清单的Common Issues Checked无模糊图、无文字错位、无动画顿挫、无素材缺失、无构建错误对应到 SKILL.md Troubleshooting 表中的完整解法问题解决方案截图模糊确保下载原图全分辨率检查screenshot.downloadUrl的质量设置文字错位核对屏幕尺寸与合成尺寸一致按实际屏幕尺寸调整文字定位动画顿挫升到 60fps使用带合适阻尼的 spring 配置Remotion 构建失败检查 Node 版本兼容性确认依赖全部安装节奏不对在清单中按屏调整时长在 Remotion Studio 中预览验证素材缺失类问题可从源头避免download-stitch-asset.sh的curl -f失败即删防止坏文件混入构建错误则以npm run build作为最终冒烟测试。十三、如何使用这份清单该清单是 remotion 技能的标准参考资源被 SKILL.md 明确引用为Followresources/composition-checklist.mdfor completeness。使用方式Agent 工作流中remotion 技能执行到组件生成、配置、预览、渲染各步骤时对照清单逐项勾选未通过的项先修复再进入下一阶段人工开发中以[x]标记已完成项按 Notes 建议追加项目专属检查项如特定平台的画幅要求、内部品牌规范并在目标平台YouTube、社交媒体等做最终播放测试作为验收报告渲染完成后把勾选完毕的清单作为交付质量的依据。该技能的整体定位与安装方式可参见 README.mdnpx skills add google-labs-code/stitch-skills --skill remotion --global以及仓库根 README.md 中stitch-build插件的能力矩阵composition-checklist.md与其配套的黄金示例WalkthroughComposition.tsx、screens.json、素材下载脚本download-stitch-asset.sh共同构成了一套清单驱动、示例佐证、脚本兜底的完整视频生产链路。结论这份 checklist 的价值不在于列了多少项而在于它把看起来专业拆解成了可勾选、可验证、可复用的工程标准。从工程初始化到最终成片每一项都有仓库源码或示例作为落地依据照单执行即可稳定产出无模糊、无错位、节奏流畅、渲染零错误的 Stitch Walkthrough 演示视频。赞分享AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载相关推荐tldraw PR Walkthrough 视频管线manifest.json 幻灯片清单格式完整指南tldraw PR Walkthrough 视频管线manifest.json 幻灯片清单格式完整指南 导读 本篇技术指南围绕 tldraw 仓库中 pr w前端UI组件HeyGen 数字人视频与 Remotion 合成集成实战指南OpenMontage remotion-composer 实践HeyGen 数字人视频与 Remotion 合成集成实战指南OpenMontage remotion composer 实践 导读 本文以 OpenMon人工智能AI Agent音视频媒体生成工作流自动化Apache brpc 发版投票检查清单Release Vote Checklist实战指南Apache brpc 发版投票检查清单Release Vote Checklist实战指南 本文以 Apache brpc 仓库 community/re后端RPC框架通信网络上一篇LobeHub 源码级 UX 审计实战以桌面端 Agent「话题」会话视图Topic View为例下一篇10行代码跑通pypdf合并、拆分与加密的实操清单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Stitch + Remotion Walkthrough 视频合成检查清单：composition-checklist 完整解读与实战
AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载导读本文以 stitch-skills 仓库中 remotion 技能所附的 composition-checklist.md 为核心骨架系统讲解如何用 Remotion 把 Stitch 项目截图编排成带转场、缩放与文字覆盖的 Walkthrough 演示视频。读完你将掌握从项目初始化、素材准备、组件编写、动画配置、预览调试到最终渲染的完整质量关卡并了解每一关背后的仓库源码与脚本实现。该清单是 remotion 技能工作流的质量门禁技能的 SKILL.md 负责告诉 Agent 如何检索 Stitch 屏幕、搭建 Remotion 工程、生成组件并渲染而这份清单负责在每一步交付前逐项自检确保合成结构完整、动画流畅、输出专业。它不是一次性读完就扔的文档而是每次生成 Walkthrough 视频时都要对照执行的完工验收表。一、清单定位为什么需要一份合成检查清单Remotion 是一套用 React 写视频的编程式视频库而 stitch-skills 的 remotion 技能把它的能力与 Google StitchUI 设计平台打通Agent 通过 Stitch MCP 拉取项目中每个屏幕的截图与元数据再在 Remotion 工程里把它们编排为带转场、缩放和文字注释的演示视频。这类多屏幕合成任务最容易在以下环节出错素材缺失或路径写错截图没下载全、public/相对路径对不上组件结构不完整缺ScreenSlide或主合成转场没接上时序计算错误帧率、时长、转场偏移不匹配动画参数不自然spring 阻尼/刚度不合适画面生硬渲染前才发现构建错误。composition-checklist 正是为此设计把整个生产流程切成 13 个自检区块每个区块内有可勾选的验收项从项目搭建一直覆盖到最终成片与可选增强让 Agent 和人类开发者都能在渲染前发现隐患。清单末尾的 Notes 还明确建议每完成一项就把[ ]改为[x]并允许针对具体项目追加自定义检查项。二、阶段一项目初始化与依赖Project Setup清单的第一组勾选项是视频工程的地基Remotion 项目已初始化或已有工程已确认可用依赖已安装remotion/transitions等素材目录已创建public/assets/screens/屏幕清单已创建screens.json对应到 SKILL.md 中的实际操作# 没有现成工程时用官方模板创建空白 TypeScript 工程 npm create videolatest -- --blank # 进入工程后安装转场等核心依赖 cd video npm install remotion/transitions remotion/animated-emoji这里有两个关键约定素材必须放在public/assets/screens/Remotion 的静态资源加载以public/为根清单中imagePath写的是相对public/的路径如assets/screens/home.png这样Img组件才能正确解析screens.json是单一事实来源项目名、视频配置、每屏的标题/描述/尺寸/时长/转场类型全部由它驱动组件代码只负责消费它从而避免在组件里硬编码任何数值——这正是清单Best Practices Verified区块中No hardcoded values的落地方式。仓库 examples/screens.json 给出了黄金标准结构{ projectName: Calculator App, projectId: projects/13534454087919359824, videoConfig: { fps: 30, width: 1920, height: 1080, durationInSeconds: 20 }, screens: [ { id: 1, screenId: 12345, title: Home Screen, description: Main calculator interface with number pad and basic operations, imagePath: assets/screens/home.png, width: 1200, height: 800, duration: 5, transitionType: fade }, { id: 2, screenId: 12346, title: History View, description: View of previous calculations with option to reuse results, imagePath: assets/screens/history.png, width: 1200, height: 800, duration: 4, transitionType: slide } ] }注意清单中的结构比 SKILL.md 里的简版示例更完整除了每屏的duration停留秒数还多了transitionType每屏可单独指定 fade / slide / zoom和videoConfig全局 fps、画幅、总时长。durationInSeconds是参考值实际总帧数通常由组件端按各屏时长累加计算。三、阶段二素材准备Asset Preparation清单要求逐项核对所有 Stitch 截图已下载图片使用有描述性的命名图片尺寸已记录到清单图片已按需优化体积素材路径正确且相对public/书写3.1 下载截图Stitch MCP 的get_screen会返回screenshot.downloadUrl以及可选的htmlCode.downloadUrl、屏幕width/height和标题描述。下载有两种方式直接web_fetch或使用 Bash 调 curl。仓库为此提供了专用脚本 download-stitch-asset.sh./download-stitch-asset.sh https://storage.googleapis.com/... assets/screens/home.png该脚本有两个值得注意的工程细节curl -L -f组合-L跟随重定向Stitch 的签名 URL 常见跳转-f让 HTTP 错误直接失败——防止下载到一张错误页却当成素材保存下载后立即打印文件大小用stat做跨平台取 size 的回退方便 Agent 判断是否拿到了完整的高清图而不是残缺文件失败即清理下载失败时删除残留的OUTPUT_PATH并退出非零码避免脏文件进入public/assets/screens/。3.2 命名与记录描述性命名指按屏幕语义命名如home.png、history.png而非screenshot-1.png尺寸记录到清单指把 Stitch 返回的width/height写进screens.json对应条目供后续等比缩放与文字定位使用。图片优化压缩、选格式则遵循清单 Best Practices 中的原则UI 截图用 PNG照片类用 JPG。四、阶段三组件结构Component Structure清单的核心组件关卡ScreenSlide.tsx已创建Props 接口已定义缩放动画已实现淡入淡出动画已实现文字覆盖已包含WalkthroughComposition.tsx已创建已导入屏幕清单每屏使用Sequence组件屏间转场已配置时序偏移已正确计算4.1 ScreenSlide单屏展示组件按 SKILL.md 的架构约定ScreenSlide.tsx的 props 为imageSrc、title、description、width、height内部用 Remotion 的useCurrentFrame()与spring()实现缩放入场、淡入淡出与文字覆盖默认每屏展示 3~5 秒可在清单中按屏调整。TS 接口化 props 正是清单TypeScript interfaces used for props项的要求。4.2 WalkthroughComposition主合成组件仓库 examples/WalkthroughComposition.tsx 给出了可直接照抄的黄金标准实现它同时回答了清单里Sequence 组件、转场配置、时序偏移三个勾选项import {Composition} from remotion; import {Sequence} from remotion; import {fade} from remotion/transitions/fade; import {slide} from remotion/transitions/slide; import {TransitionSeries} from remotion/transitions; import {ScreenSlide} from ./ScreenSlide; import screensManifest from ../screens.json; // Calculate total duration in frames const calculateDuration () { const totalSeconds screensManifest.screens.reduce( (sum, screen) sum screen.duration, 0 ); return totalSeconds * screensManifest.videoConfig.fps; }; export const WalkthroughComposition: React.FC () { const {fps, width, height} screensManifest.videoConfig; return ( TransitionSeries {screensManifest.screens.map((screen, index) { const durationInFrames screen.duration * fps; // Select transition based on screen config const transition screen.transitionType slide ? slide() : screen.transitionType zoom ? fade() // Can customize with zoom effect : fade(); return ( TransitionSeries.Sequence key{screen.id} durationInFrames{durationInFrames} ScreenSlide imageSrc{screen.imagePath} title{screen.title} description{screen.description} width{screen.width} height{screen.height} / {index screensManifest.screens.length - 1 ( TransitionSeries.Transition presentation{transition} timing{{ durationInFrames: 20, // 20 frames for transition }} / )} /TransitionSeries.Sequence ); })} /TransitionSeries ); };这段代码揭示了清单勾选项背后的三个要点TransitionSeries才是转场的正确载体它来自remotion/transitions与裸Sequence的区别在于能在前后两段之间插入TransitionSeries.Transition实现真正的重叠转场而非生硬切换转场类型由清单数据驱动transitionType为slide用slide()zoom或fade落到fade()注释提示 zoom 可自定义缩放效果完全契合No hardcoded values原则时序偏移的计算公式durationInFrames screen.duration * fps而总时长calculateDuration()累加所有屏幕的秒数再乘 fps——因此清单中remotion.config.ts的 duration 必须与这个计算结果一致否则合成会在结尾出现空帧或截断。示例末尾的RemotionRoot把合成注册进CompositionidWalkthroughComposition、fps/width/height均取自videoConfig这就是阶段四配置检查的依据。五、阶段四合成配置Configuration清单要求核对remotion.config.ts已更新Composition ID 已设置视频尺寸已配置帧率已设置30 或 60 fps时长计算正确视频元数据已设置如适用标题描述Composition ID就是npx remotion render ID时使用的标识符仓库示例固定为WalkthroughComposition尺寸直接复用videoConfig.width/height示例为 1920×1080与 Stitch 屏幕 1200×800 存在比例差需按Maintain aspect ratio原则等比缩放帧率建议 30 或 60 fps——60 fps 尤其用于修复清单Common Issues中的顿挫动画问题时长必须与calculateDuration()的输出一致。元数据标题/描述写入输出文件的标签信息用于发布到 YouTube 等平台时的自动填充属于Final Output阶段Metadata embedded项的前提。六、阶段五动画与转场Animations Transitions清单的质量关卡Spring 动画使用合适配置Damping 值典型 8~15Stiffness 值典型 60~100转场流畅平滑文字覆盖时序正确无突兀、生硬的画面变化6.1 Spring 参数区间Remotion 的spring()是物理弹簧动画两个核心参数的经验区间在清单中被明确定死参数推荐区间作用damping8 ~ 15越大回弹越少、越粘越小越有弹性stiffness60 ~ 100越大运动越快越干脆越小越迟缓SKILL.md 的 Hotspot 示例给出了基准配置{damping: 10, stiffness: 100}可用于缩放强调动画。若画面choppy清单建议升到 60 fps 并重新校准这两个值。6.2 转场与文字时序转场用remotion/transitions的三种效果fade交叉淡入淡出、slide方向性滑入、zoom用 spring 驱动的缩放强调。示例中单次转场占 20 帧约 0.67s 30fps节奏适中。文字覆盖屏幕标题、功能标注、描述文字、进度指示必须与所在屏幕的duration对齐淡入淡出时间要留给读者阅读否则就是清单Text has time to be read项的失败。七、阶段六视觉质量Visual Quality清单的视觉验收项文字任何时刻均可读文字与背景对比度足够字号适配视频分辨率图片无变形宽高比保持这些项的实践依据字号要按最终输出分辨率如 1920×1080而非原始屏幕尺寸设计图片放进合成时若强制拉伸会破坏宽高比应等比缩放或使用object-fit类策略文字叠层应避免与截图内容同色必要时加半透明背景条提升对比度——这与 SKILL.md Best Practices 第 3 条Readable text一一对应。八、阶段七节奏把控Timing清单要求每屏展示时长合适视频总长度合理不过长/过短转场不显得仓促文字有足够阅读时间SKILL.md 的常见模式给出了节奏基准每屏 3~5 秒、转场采用交叉淡入淡出需要强调的屏幕可延长至 5 秒以上示例清单中 Home 与 Scientific 均为 5s其余 4s。清单Consistent timing最佳实践提示除非刻意强调某屏否则保持各屏时长一致。总长度需考虑目标平台习惯如社交媒体短视频应控制在数十秒内示例工程 4 屏合计 20 秒即属合理区间。九、阶段八预览与测试Preview Testing清单的调试关卡在 Remotion Studio 中预览npm run dev拖动时间线检查所有帧确认播放流畅检查渲染错误在多种屏幕尺寸下测试若响应式npm run dev启动 Remotion Studio 浏览器预览是 SKILL.md 执行步骤第三步Preview and Refine的核心Agent 在此实时调整每屏时长、转场平滑度与文字时序。时间线逐帧检查能提前暴露清单 Common Issues 中的模糊图、错位文字与断帧问题——所有问题都应在这个阶段解决而不是留到渲染阶段。十、阶段九渲染与最终输出Rendering Final Output清单的收尾关卡渲染命令已测试且可用输出格式已选择MP4、WebM 等质量设置已配置Codec 已指定推荐 h264最终视频无错误渲染成功视频文件生成成功文件大小合理视频可在播放器中正常播放已包含音频如适用已嵌入元数据如需对应 CLI 渲染方式SKILL.md 执行步骤第四步npx remotion render WalkthroughComposition output.mp4可用优化参数--quality质量档位、--codec h264推荐或h265体积更小但兼容性略低、--concurrency并行渲染加速。选择 MP4 h264 是目前跨平台播放兼容性最好的组合WebM 适合体积敏感的场景。文件大小应在渲染后核验异常巨大通常意味着码率或分辨率设置偏高。音频背景音乐/旁白与元数据标题/描述按需在渲染阶段一并处理。十一、可选增强Optional Enhancements清单的可选加分项全部在 SKILL.md Advanced Features 中有对应实现方案进度指示器显示当前屏位自定义 Logo 或品牌标识背景音乐或音效旁白配音交互热点高亮功能区域片尾行动号召CTA交互热点是其中最具产品演示价值的一项SKILL.md 给出了骨架代码import {interpolate, useCurrentFrame} from remotion; const Hotspot ({x, y, label}) { const frame useCurrentFrame(); const scale spring({ frame, fps: 30, config: {damping: 10, stiffness: 100} }); return ( div style{{ position: absolute, left: x, top: y, transform: scale(${scale}) }} div classNamepulse-ring / span{label}/span /div ); };旁白配音流程为由屏幕描述生成配音脚本 → 文本转语音或录音 → 用 RemotionAudio组件导入 → 让屏幕切换节奏与配音语速对齐。动态文字提取则可下载 Stitch 的htmlCode.downloadUrl解析出标题、按钮、标签等文本自动生成定时文字标注减少手写文案成本。十二、最佳实践与常见问题Best Practices Common Issues12.1 最佳实践验收清单要求最终核对工程规范组件代码模块化、可复用Props 使用 TypeScript 接口无硬编码值一律使用清单/配置代码遵循 Remotion 惯例复杂逻辑添加注释素材组织在清晰的目录结构中这与示例代码直接呼应WalkthroughComposition.tsx里calculateDuration有注释、转场选择逻辑是数据驱动的、目录结构按video/src/、video/public/assets/screens/、根目录screens.json、output.mp4组织完整结构见 SKILL.md 的 File Structure 与 README.md。12.2 常见问题排查清单的Common Issues Checked无模糊图、无文字错位、无动画顿挫、无素材缺失、无构建错误对应到 SKILL.md Troubleshooting 表中的完整解法问题解决方案截图模糊确保下载原图全分辨率检查screenshot.downloadUrl的质量设置文字错位核对屏幕尺寸与合成尺寸一致按实际屏幕尺寸调整文字定位动画顿挫升到 60fps使用带合适阻尼的 spring 配置Remotion 构建失败检查 Node 版本兼容性确认依赖全部安装节奏不对在清单中按屏调整时长在 Remotion Studio 中预览验证素材缺失类问题可从源头避免download-stitch-asset.sh的curl -f失败即删防止坏文件混入构建错误则以npm run build作为最终冒烟测试。十三、如何使用这份清单该清单是 remotion 技能的标准参考资源被 SKILL.md 明确引用为Followresources/composition-checklist.mdfor completeness。使用方式Agent 工作流中remotion 技能执行到组件生成、配置、预览、渲染各步骤时对照清单逐项勾选未通过的项先修复再进入下一阶段人工开发中以[x]标记已完成项按 Notes 建议追加项目专属检查项如特定平台的画幅要求、内部品牌规范并在目标平台YouTube、社交媒体等做最终播放测试作为验收报告渲染完成后把勾选完毕的清单作为交付质量的依据。该技能的整体定位与安装方式可参见 README.mdnpx skills add google-labs-code/stitch-skills --skill remotion --global以及仓库根 README.md 中stitch-build插件的能力矩阵composition-checklist.md与其配套的黄金示例WalkthroughComposition.tsx、screens.json、素材下载脚本download-stitch-asset.sh共同构成了一套清单驱动、示例佐证、脚本兜底的完整视频生产链路。结论这份 checklist 的价值不在于列了多少项而在于它把看起来专业拆解成了可勾选、可验证、可复用的工程标准。从工程初始化到最终成片每一项都有仓库源码或示例作为落地依据照单执行即可稳定产出无模糊、无错位、节奏流畅、渲染零错误的 Stitch Walkthrough 演示视频。赞分享AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载相关推荐tldraw PR Walkthrough 视频管线manifest.json 幻灯片清单格式完整指南tldraw PR Walkthrough 视频管线manifest.json 幻灯片清单格式完整指南 导读 本篇技术指南围绕 tldraw 仓库中 pr w前端UI组件HeyGen 数字人视频与 Remotion 合成集成实战指南OpenMontage remotion-composer 实践HeyGen 数字人视频与 Remotion 合成集成实战指南OpenMontage remotion composer 实践 导读 本文以 OpenMon人工智能AI Agent音视频媒体生成工作流自动化Apache brpc 发版投票检查清单Release Vote Checklist实战指南Apache brpc 发版投票检查清单Release Vote Checklist实战指南 本文以 Apache brpc 仓库 community/re后端RPC框架通信网络上一篇LobeHub 源码级 UX 审计实战以桌面端 Agent「话题」会话视图Topic View为例下一篇10行代码跑通pypdf合并、拆分与加密的实操清单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
