Marketing Studio 代理

技能來自 ara.so — 行銷技能集合。

Marketing Studio 是專為 Claude Code 設計的代理驅動影片渲染引擎。在您的產品倉庫中執行 /marketing 即可產生完整的發佈資產套件：3D 標誌展示、螢幕錄製的產品示範、附有旁白/音樂的發佈影片、各平台適配的社交片段，以及 OG 資產。所有渲染工作都在一個中央引擎倉庫中使用 Remotion、Blender、Playwright 和 ElevenLabs 完成。

安裝

# 複製引擎倉庫
git clone https://github.com/ucsandman/marketing-studio.git
cd marketing-studio

# 安裝依賴
cd studio && npm install && cd ..

# 配置（可選：Blender 路徑、ElevenLabs API 金鑰）
cp .env.example .env

# 將技能安裝到 Claude Code
node scripts/install-skills.mjs

# 驗證工具鏈
python launch.py --check

安裝腳本會將技能複製到 ~/.claude/skills 並將它們連結到您克隆的引擎路徑。

核心工作流程

`/marketing` 命令

在您的產品倉庫中：

claude
> /marketing

這會執行完整管線：

品牌引導 – 從您的設計系統中推導品牌標記（或提示您輸入）
標誌展示 – 在 Remotion 中合成的 3D Blender 動畫
產品示範 – Playwright 捕捉您運行的應用程式並帶有鏡頭縮放
發佈影片 – 結合示範、標誌和文案的 30-90 秒主打影片
音軌 – ElevenLabs 旁白和與影片同步的配樂
社交片段 – 各平台專用的剪輯（X、LinkedIn、TikTok）
OG 資產 – 靜態圖片、動態循環、README GIF

獨立技能

單獨執行任何資產類型：

> /logo-reveal
> /product-demo
> /launch-video
> /audio-track
> /social-clip
> /og-assets

品牌配置

品牌定義在 brands/<id>.json 中：

{
  "id": "myproduct",
  "name": "MyProduct",
  "tagline": "更快交付，更少故障",
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#8b5cf6",
    "accent": "#f59e0b",
    "background": "#000000",
    "foreground": "#ffffff",
    "muted": "#6b7280",
    "success": "#10b981",
    "warning": "#f59e0b",
    "error": "#ef4444",
    "text": "#f9fafb",
    "textMuted": "#9ca3af",
    "border": "#374151",
    "surface": "#111827"
  },
  "fonts": {
    "heading": "Inter",
    "body": "Inter",
    "mono": "JetBrains Mono"
  },
  "voice": {
    "tone": "自信、技術性、不廢話",
    "avoid": ["AI 垃圾內容", "遊戲規則改變者", "革命性"]
  }
}

在 studio/src/lib/brand.ts 中註冊品牌：

import { z } from 'zod';

export const BrandSchema = z.object({
  id: z.string(),
  name: z.string(),
  tagline: z.string(),
  colors: z.object({
    primary: z.string(),
    secondary: z.string(),
    accent: z.string(),
    // ... 全部 13 種顏色
  }),
  fonts: z.object({
    heading: z.string(),
    body: z.string(),
    mono: z.string(),
  }),
  voice: z.object({
    tone: z.string(),
    avoid: z.array(z.string()),
  }),
});

export type Brand = z.infer<typeof BrandSchema>;

export function getBrand(brandId: string): Brand {
  const brandData = require(`../../brands/${brandId}.json`);
  return BrandSchema.parse(brandData);
}

在 studio/src/brands/<id>Mark.tsx 中新增標誌標記元件：

import React from 'react';

export const MyProductMark: React.FC<{
  size?: number;
  color?: string;
}> = ({ size = 100, color = '#3b82f6' }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill={color} />
    </svg>
  );
};

手動渲染

Remotion 命令

直接渲染任何合成項目：

cd studio

# 標誌展示
npx remotion render LogoReveal ../out/myproduct/logo.mp4 \
  --props='{"brandId":"myproduct","cta":"觀看發佈"}'

# 產品示範
npx remotion render ProductDemo ../out/myproduct/demo.mp4 \
  --props='{"brandId":"myproduct","captureVideo":"../assets/captures/demo.mp4"}'

# 發佈影片
npx remotion render LaunchVideo ../out/myproduct/launch.mp4 \
  --props='{"brandId":"myproduct","demoVideo":"../out/myproduct/demo.mp4","script":["鉤子","問題","解決方案"]}'

# 社交片段
npx remotion render SocialClip ../out/myproduct/social-x.mp4 \
  --props='{"brandId":"myproduct","platform":"x","feature":"即時同步"}'

# 動態 OG
npx remotion render AnimatedOG ../out/myproduct/og.mp4 \
  --props='{"brandId":"myproduct"}'

輸入腳本

捕捉產品示範

cd feeders/capture
node capture.mjs \
  --url http://localhost:3000 \
  --output ../../assets/captures/demo.mp4 \
  --brand myproduct \
  --script zoom-dashboard,click-feature,pan-results

渲染 Blender 標誌

cd feeders/blender
python render_logo.py \
  --brand myproduct \
  --output ../../assets/blender/logo-frames/ \
  --style draw-on

生成音訊

cd feeders/audio
node generate.mjs \
  --script "在數天內交付您的產品，而非數月" \
  --voice-id "ELEVENLABS_VOICE_ID" \
  --output ../../assets/audio/voiceover.mp3

node generate.mjs \
  --type music \
  --mood energetic \
  --duration 60 \
  --output ../../assets/audio/music.mp3

在 .env 中設定 ELEVENLABS_API_KEY。

屬性建構器

透過建構器腳本產生渲染屬性：

# 建置發佈影片屬性
node scripts/build-launch-props.mjs \
  --brand myproduct \
  --demo-video ./assets/captures/demo.mp4 \
  --script "鉤子行" "問題陳述" "解決方案示範" \
  --output ./props/launch-myproduct.json

# 建置社交片段屬性
node scripts/build-social-props.mjs \
  --brand myproduct \
  --platform x \
  --feature "即時協作" \
  --output ./props/social-x-myproduct.json

屬性檔案為 JSON：

{
  "brandId": "myproduct",
  "demoVideo": "./assets/captures/demo.mp4",
  "logoRevealVideo": "./out/myproduct/logo.mp4",
  "script": [
    {"type": "hook", "text": "在數天內交付，而非數月", "duration": 3},
    {"type": "problem", "text": "行銷資產需要數週", "duration": 4},
    {"type": "solution", "text": "一個命令，完整套件", "duration": 5}
  ],
  "voiceover": "./assets/audio/voiceover.mp3",
  "music": "./assets/audio/music.mp3"
}

環境變數

# .env
BLENDER_PATH=/Applications/Blender.app/Contents/MacOS/Blender
ELEVENLABS_API_KEY=your_api_key_here
COMFYUI_URL=http://localhost:8188

所有變數皆為可選；輸入腳本在沒有它們時會優雅降級。

驗證與測試

# 完整工具鏈健康檢查
python launch.py --check

# 渲染每個合成項目的第 0 幀（冒煙測試）
node scripts/smoke.mjs

# 品牌結構驗證
cd studio && npm test

# 啟動 Remotion Studio 進行互動預覽
python launch.py

關鍵模式

失敗時恢復

管線會將執行清單寫入 .marketing-run.json：

{
  "brand": "myproduct",
  "timestamp": "2026-07-10T12:00:00Z",
  "completed": ["logo-reveal", "product-demo"],
  "current": "launch-video",
  "props": {
    "logoRevealVideo": "./out/myproduct/logo.mp4",
    "demoVideo": "./out/myproduct/demo.mp4"
  }
}

重新執行 /marketing 會從最後一個未完成的步驟繼續。

鏡頭縮放數學

產品示範捕捉使用測量過的緩動函數以達到專業的縮放效果：

// studio/src/lib/camera.ts
export function calculateZoom(
  frame: number,
  duration: number,
  startScale: number = 1,
  endScale: number = 1.2
): number {
  const progress = frame / duration;
  const eased = 1 - Math.pow(1 - progress, 3); // 立方緩出
  return startScale + (endScale - startScale) * eased;
}

無縫循環規則

動態 OG 循環必須在相同的幀上開始和結束：

// studio/src/compositions/AnimatedOG.tsx
export const AnimatedOG: React.FC<{brandId: string}> = ({brandId}) => {
  const frame = useCurrentFrame();
  const {durationInFrames} = useVideoConfig();
  const brand = getBrand(brandId);
  
  // 標準化為 [0, 1) 以實現無縫循環
  const progress = (frame % durationInFrames) / durationInFrames;
  const rotation = progress * 360;
  
  return (
    <AbsoluteFill style={{backgroundColor: brand.colors.background}}>
      <div style={{transform: `rotate(${rotation}deg)`}}>
        {/* 標誌標記 */}
      </div>
    </AbsoluteFill>
  );
};

平台專用的社交片段

各平台的長寬比和安全區域：

// studio/src/compositions/SocialClip.tsx
const PLATFORM_SPECS = {
  x: { width: 1280, height: 720, safeZone: 0.1 },
  linkedin: { width: 1280, height: 720, safeZone: 0.1 },
  tiktok: { width: 1080, height: 1920, safeZone: 0.15 },
  instagram: { width: 1080, height: 1920, safeZone: 0.12 },
};

export const SocialClip: React.FC<{
  brandId: string;
  platform: keyof typeof PLATFORM_SPECS;
  feature: string;
}> = ({brandId, platform, feature}) => {
  const spec = PLATFORM_SPECS[platform];
  const safeWidth = spec.width * (1 - 2 * spec.safeZone);
  
  return (
    <AbsoluteFill style={{width: spec.width, height: spec.height}}>
      {/* 內容 */}
    </AbsoluteFill>
  );
};

疑難排解

找不到 Blender

錯誤：在 /Applications/Blender.app 找不到 Blender 可執行檔

在 .env 中設定 BLENDER_PATH 或跳過 3D 標誌展示（管線會降級為 2D）。

ElevenLabs 速率限制

錯誤：429 太多請求

音訊生成為可選。如果 API 失敗，管線會在不含旁白的情況下渲染影片。

Playwright 捕捉超時

錯誤：頁面未在 30 秒內載入

確保您的開發伺服器正在正確的連接埠上執行。捕捉腳本會等待 networkidle 狀態。

Remotion 記憶體錯誤

錯誤：JavaScript 堆疊記憶體不足

設定 Node 記憶體限制：

export NODE_OPTIONS="--max-old-space-size=8192"
npx remotion render ...

品牌結構驗證失敗

錯誤：無效的品牌 JSON

執行 cd studio && npm test 以查看結構違規。需要全部 13 種顏色、3 種字型和語音規則。

檔案結構

marketing-studio/
├── brands/              # 每個產品的品牌標記（JSON）
├── studio/              # Remotion 專案（所有合成項目）
│   ├── src/
│   │   ├── compositions/
│   │   │   ├── LogoReveal.tsx
│   │   │   ├── ProductDemo.tsx
│   │   │   ├── LaunchVideo.tsx
│   │   │   ├── SocialClip.tsx
│   │   │   └── AnimatedOG.tsx
│   │   ├── brands/      # 標誌標記元件
│   │   └── lib/
│   │       ├── brand.ts
│   │       └── camera.ts
├── feeders/
│   ├── blender/         # 無頭 Blender 場景
│   ├── capture/         # Playwright 錄製器
│   ├── audio/           # ElevenLabs 客戶端
│   └── comfy/           # ComfyUI 客戶端（可選）
├── skills/              # Claude Code 技能
│   ├── marketing.md
│   ├── logo-reveal.md
│   ├── product-demo.md
│   └── ...
├── scripts/
│   ├── install-skills.mjs
│   ├── build-launch-props.mjs
│   ├── build-social-props.mjs
│   └── smoke.mjs
├── props/               # 產生的渲染屬性（JSON）
├── assets/              # 捕捉、音訊、Blender 幀
├── out/                 # 最終渲染的影片
└── examples/            # 已發佈產品的實際輸出

最佳實踐

在品牌變更後執行冒煙測試：node scripts/smoke.mjs 可在完整渲染前捕捉結構錯誤
使用屬性建構器：永遠不要手動編輯屬性 JSON；請使用 scripts/build-*-props.mjs
在 UI 工作最後再錄製示範：在 /product-demo 之前先執行 /polish 和 /frontend-verify
在畫面鎖定後再配樂：在發佈影片腳本最終確定之前，不要產生旁白
在 /marketing 之前先在本地測試：執行獨立技能（/logo-reveal、/product-demo）來除錯品牌標記
保留執行清單：在執行期間不要刪除 .marketing-run.json（以便啟用恢復功能）

reason-machines/marketing-skills

marketing-skills 是什麼？

在你喜歡的 AI 中提問

說明文件

Marketing Studio 代理

安裝

核心工作流程

`/marketing` 命令

獨立技能

品牌配置

手動渲染

Remotion 命令

輸入腳本

捕捉產品示範

渲染 Blender 標誌

生成音訊

屬性建構器

環境變數

驗證與測試

關鍵模式

失敗時恢復

鏡頭縮放數學

無縫循環規則

平台專用的社交片段

疑難排解

找不到 Blender

ElevenLabs 速率限制

Playwright 捕捉超時

Remotion 記憶體錯誤

品牌結構驗證失敗

檔案結構

最佳實踐

相關技能

相關技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

在你喜歡的 AI 中提問

說明文件

Marketing Studio 代理

安裝

核心工作流程

/marketing 命令

獨立技能

品牌配置

手動渲染

Remotion 命令

輸入腳本

捕捉產品示範

渲染 Blender 標誌

生成音訊

屬性建構器

環境變數

驗證與測試

關鍵模式

失敗時恢復

鏡頭縮放數學

無縫循環規則

平台專用的社交片段

疑難排解

找不到 Blender

ElevenLabs 速率限制

Playwright 捕捉超時

Remotion 記憶體錯誤

品牌結構驗證失敗

檔案結構

最佳實踐

相關技能

相關技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

`/marketing` 命令