Remotion Ecosystem — 統一技能架構
範疇
這是一個整合層，將 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 生態系統遵循一個六階段管線：
[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 (選擇短格式 vs 長格式方式)
→ 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)
- 使用 Spring 動畫而非線性
- 在每個場景元件上使用 React.memo
- 對所有屬性進行 Zod schema 驗證
- 提交前驗證鉤子
快速參考 — 技能與管線階段對照
| 技能 | 主要階段 | 次要用途 |
|---|---|---|
| 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. 系統 | — |