Remotion 生态 — 统一技能架构 是做什么的？
范围
这是一个集成层，将 91 个独立技能转化为一个连贯的视频制作管道。它不替代任何技能——它提供连接它们所需的路由、数据流和编排模式。
以下每个技能都可以独立使用。此生态文档描述了在构建端到端 Remotion 视频系统时它们如何组合在一起。
十大类别
remotion-ecosystem/
├── 01-core-video/ ← 渲染引擎 + 视频策略
│ ├── remotion-video-pro (脚手架、动画、批量渲染)
│ ├── marketing-video (制作方案选择)
│ ├── video-generation (AI 视频创建)
│ └── video-understand (视频分析)
│
├── 02-data-ingestion/ ← 视频数据的内容源
│ ├── firecrawl-scrape (JS 渲染页面提取)
│ ├── firecrawl-crawl (批量站点抓取)
│ ├── spider (站点扫描 + 安全审计)
│ ├── web-reader (页面元数据 + 内容)
│ ├── web-search (实时搜索)
│ └── browserbase-fetch (轻量级 URL 抓取)
│
├── 03-browser-automation/ ← 受保护内容的认证与交互
│ ├── browser-cdp (Chrome 会话复用)
│ ├── agent-browser (有头浏览器自动化)
│ └── browserbase-autobrowse (自改进浏览循环)
│
├── 04-ai-intelligence/ ← AI 推理 + 模型编排
│ ├── think (基于 Gemini 的多框架推理)
│ ├── council-of-five (5 角色并行辩论)
│ ├── amazon-bedrock (Claude/Llama/Nova 模型调用)
│ ├── LLM (聊天补全)
│ └── VLM (视觉语言理解)
│
├── 05-content-design/ ← 视觉资产 + 动态设计
│ ├── charts (数据可视化)
│ ├── image-generation (AI 图像创建)
│ ├── image-edit (AI 图像编辑)
│ ├── ui-ux-pro-max (设计系统 + UI 推理)
│ ├── anthropic-frontend-design (独特界面)
│ └── web-shader-extractor (视觉效果提取)
│
├── 06-monitoring-security/ ← 可观测性 + 保护
│ ├── sentry-ai-monitoring (LLM 调用追踪 + Token 计数)
│ ├── sentry-nextjs-sdk (Next.js 错误 + 性能监控)
│ ├── audit-analyzer (系统审计)
│ ├── diagnose (调试 + 诊断)
│ └── mcp-spy (MCP 流量调试)
│
├── 07-marketing-strategy/ ← 增长 + 实验
│ ├── marketing-ab-testing (假设 + 卡方显著性)
│ ├── marketing-launch (5 阶段启动框架)
│ ├── marketing-mode (增长营销编排)
│ └── content-strategy (内容规划)
│
├── 08-devops-deploy/ ← 基础设施 + CI/CD
│ ├── aws-agents-deploy (Railway/Vercel/Lambda 部署)
│ ├── amazon-bedrock (AWS AI 模型部署)
│ ├── vercel (Vercel 部署)
│ ├── deployment-manager (多平台部署)
│ ├── github (CI/CD + 仓库管理)
│ └── fullstack-dev (Next.js 全栈开发)
│
├── 09-document-output/ ← 基于视频数据的报告与交付件
│ ├── docx (Word 文档)
│ ├── pdf (PDF 生成)
│ ├── ppt / pptx (演示文稿)
│ ├── xlsx (电子表格)
│ └── infographic-gen (信息图)
│
└── 10-agent-systems/ ← 代理编排 + 记忆
├── agent-roles (专用代理角色)
├── superpowers (规范优先 + 子代理委派)
├── proactive-agent (自主自我改进)
├── self-improving-agent (错误记录 + 学习)
├── persistent-memory (跨会话记忆)
└── context-compressor (上下文窗口优化)
管道架构
Remotion 生态遵循 6 阶段管道：
[1. 采集] → [2. 思考] → [3. 设计] → [4. 渲染] → [5. 测试] → [6. 部署]
┌──────────────────────────────────────────────────────────────────┐
│ 第 1 阶段：采集 — 数据采集 (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ 抓取竞争对手页面 │
│ browser-cdp ──────→ 提取认证后的内容 │
│ spider ───────────→ 扫描产品页面以获取数据 │
│ web-search ────────→ 收集市场情报 │
│ web-reader ────────→ 提取文章内容 │
│ │
│ 输出: { 产品, 竞争对手, 推荐语, 定价 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 第 2 阶段：思考 — AI 智能 (04-ai-intelligence) │
│ │
│ think ─────────────→ 基于第一性原理分析数据 │
│ council-of-five ───→ 5 角色就视频方案进行辩论 │
│ amazon-bedrock ────→ 生成脚本/文案/故事板 │
│ LLM ────────────────→ 精炼信息和行动号召 │
│ │
│ 输出: { 脚本, 故事板, 文案变体, 场景计划 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 第 3 阶段：设计 — 内容 + 视觉 (05-content-design) │
│ │
│ image-generation ──→ 主视觉图像、产品展示图 │
│ charts ─────────────→ 视频用数据可视化 │
│ ui-ux-pro-max ─────→ 布局 + 颜色 + 排版系统 │
│ web-shader-extractor → 从参考站点提取视觉效果 │
│ │
│ 输出: { 图像, 图表, 配色方案, 动态规范 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 第 4 阶段：渲染 — 核心视频 (01-core-video) │
│ │
│ remotion-video-pro → 将 React 组件组合为帧 │
│ marketing-video ────→ 选择制作方案 │
│ video-generation ──→ AI 生成的 B-roll 素材 │
│ video-understand ──→ 分析参考视频 │
│ │
│ 输出: { MP4 渲染, 变体合成 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 第 5 阶段：测试 — 监控 + A/B (06 + 07) │
│ │
│ marketing-ab-testing → 变体的卡方显著性检验 │
│ sentry-ai-monitoring → 追踪生成过程中的 LLM 调用 │
│ audit-analyzer ─────→ 对渲染资产进行安全扫描 │
│ diagnose ────────────→ 调试渲染失败 │
│ │
│ 输出: { 测试结果, 显著性分数, 错误报告 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 第 6 阶段：部署 — DevOps + 营销 (08 + 07) │
│ │
│ aws-agents-deploy ─→ 部署到 Lambda/Railway │
│ marketing-launch ───→ 5 阶段产品启动 │
│ vercel ──────────────→ Webhook 服务托管 │
│ fullstack-dev ───────→ 用于渲染管理的 Next.js 仪表盘 │
│ │
│ 输出: { 在线渲染, Webhook 端点, 启动活动 } │
└──────────────────────────────────────────────────────────────────┘
集成路线
路线 A：竞争对手情报视频
spider (扫描竞争对手站点)
→ firecrawl-scrape (提取产品页面)
→ amazon-bedrock (分析竞争格局)
→ council-of-five (辩论视频角度)
→ charts (创建对比可视化)
→ remotion-video-pro (渲染竞争对手对比视频)
→ marketing-ab-testing (A/B 测试视频变体)
→ aws-agents-deploy (部署到 Lambda)
路线 B：产品发布视频活动
marketing-launch (规划 5 阶段发布)
→ web-search (收集市场数据)
→ think (基于第一性原理的信息策略)
→ amazon-bedrock (生成视频脚本)
→ image-generation (创建主视觉图像)
→ ui-ux-pro-max (设计视觉系统)
→ remotion-video-pro (渲染发布视频)
→ video-generation (AI B-roll 素材)
→ sentry-ai-monitoring (追踪所有 AI 调用)
→ aws-agents-deploy (部署管道)
→ marketing-ab-testing (测试钩子变体)
路线 C：数据驱动的个性化视频
firecrawl-crawl (批量提取客户数据源)
→ browser-cdp (提取认证后的 CRM 数据)
→ amazon-bedrock (为每位收件人个性化视频文案)
→ charts (生成个性化数据可视化)
→ remotion-video-pro (使用个性化属性批量渲染)
→ sentry-ai-monitoring (监控批量 LLM Token 使用情况)
→ aws-agents-deploy (Lambda 批量渲染)
→ docx/xlsx (从活动生成 ROI 报告)
路线 D：内容复用管道
video-understand (分析源视频)
→ browserbase-autobrowse (收集参考内容)
→ think (规划复用策略)
→ firecrawl-scrape (提取博客内容作为参考)
→ marketing-video (选择短视频与长视频方案)
→ image-generation (创建缩略图变体)
→ remotion-video-pro (渲染特定平台的版本)
→ marketing-launch (协调多平台分发)
路线 E：规模化 A/B 测试视频变体
marketing-ab-testing (设计假设 + 变体)
→ council-of-five (辩论哪些变体要测试)
→ amazon-bedrock (生成变体文案/脚本)
→ ui-ux-pro-max (设计变体视觉系统)
→ remotion-video-pro (渲染 A/B 合成)
→ sentry-ai-monitoring (追踪生成成本)
→ marketing-launch (向受众部署测试)
→ charts (可视化测试结果)
→ pdf (生成测试报告)
横切关注点
安全 (06-monitoring-security)
每个管道阶段都应包含：
- sentry-ai-monitoring: 追踪所有 LLM 调用 (Token 数、延迟、成本)
- sentry-nextjs-sdk: 监控 Webhook 服务健康状态
- audit-analyzer: 对已部署基础设施进行定期安全扫描
- mcp-spy: 在开发中调试 MCP 工具集成
记忆 (10-agent-systems)
针对重复性视频生产的跨会话连续性：
- persistent-memory: 存储品牌指南、配色方案、过往活动
- context-compressor: 在运行复杂管道时优化上下文窗口
- self-improving-agent: 从渲染失败和 A/B 测试结果中学习
质量 (01-core-video)
在每次渲染中强制执行 remotion-video-pro 黄金法则：
- 基于帧的确定性 (不适用 Math.random)
- 使用弹簧动画而非线性动画
- 在每个场景组件上使用 React.memo
- 对所有属性进行 Zod 模式验证
- 预提交验证钩子
快速参考 — 技能与管道阶段对应表
| 技能 | 主要阶段 | 次要用途 |
|---|---|---|
| remotion-video-pro | 4. 渲染 | 5. 测试 (验证) |
| firecrawl-scrape | 1. 采集 | 6. 部署 (验证页面) |
| firecrawl-crawl | 1. 采集 | 3. 设计 (参考内容) |
| spider | 1. 采集 | 6. 部署 (安全扫描) |
| browser-cdp | 1. 采集 | 3. 设计 (认证内容) |
| browserbase-fetch | 1. 采集 | — |
| browserbase-autobrowse | 1. 采集 | 2. 思考 (研究) |
| think | 2. 思考 | 5. 测试 (调试分析) |
| council-of-five | 2. 思考 | 7. 营销 (策略) |
| amazon-bedrock | 2. 思考 | 4. 渲染 (AI 生成) |
| LLM | 2. 思考 | — |
| VLM | 2. 思考 | 4. 渲染 (场景分析) |
| charts | 3. 设计 | 9. 输出 (报告) |
| image-generation | 3. 设计 | 4. 渲染 (资产) |
| ui-ux-pro-max | 3. 设计 | 2. 思考 (布局推理) |
| marketing-ab-testing | 5. 测试 | 7. 营销 (增长) |
| marketing-launch | 6. 部署 | 7. 营销 (活动) |
| sentry-ai-monitoring | 5. 测试 | 6. 部署 (生产监控) |
| aws-agents-deploy | 6. 部署 | — |
| fullstack-dev | 6. 部署 | 3. 设计 (仪表盘) |
| docx/pdf/xlsx | 9. 输出 | 7. 营销 (报告) |
| agent-roles | 10. 系统 | 2. 思考 (委派) |
| superpowers | 10. 系统 | — |