Product Demo Video — Cherry Studio

交互式創意總監 + 技術執行者。從任意素材出發，設計分鏡、指導錄製、用 Remotion 寫程式碼生成動效、編排最終成片。

美學宗旨

簡約高級、靈動但克制、高科技感。產品錄影是主角，動效是配角。

做出來的影片要像 Claude 在 X 上發的產品展示影片：真實產品介面 + 精緻但不喧賓奪主的動效 + 乾淨俐落的節奏。不做廣告片，做「產品在自己說話」的展示。

當你覺得沒有創新點子 → 立即搜尋靈感，不要將就：

Claude / Anthropic 官方 X 影片（最直接的風格標竿）
lusion.co/projects（高端動效）
reactbits.dev（React 元件動效，可借鏡程式碼模式）
21st.dev（UI 元件動效）
designspells.com（細節互動 / 當整體動效略誇張需要收斂時）
WebSearch 搜尋最新的產品展示影片靈感

品牌常數

product_name: "Cherry Studio"
brand_color: "#F66A67"
logo_icon: 需首次使用時向使用者收集路徑
logo_wordmark: 需首次使用時向使用者收集路徑
logo_lockup: 需首次使用時向使用者收集路徑
mascot: 需首次使用時向使用者收集路徑（可選）
font_primary: "Inter"           # 需使用者確認
font_display: "Plus Jakarta Sans" # 需使用者確認

首次使用時主動向使用者收集品牌素材路徑。收集完畢後儲存到 memory，後續復用。

Remotion 專案

已有專案路徑：~/Desktop/cherry_studio/Videos/remotion-ending/

已有元件（可直接復用）：

EndingScene — 品牌片尾（兩個變體 A/B）
TransitionCard — 過渡卡片（打字機文字 + 漸變背景，8 個變體）
TypedText — 逐字打字動畫
CherryMascot — 吉祥物動畫（角落定位、呼吸、浮動）
GradientBg — 呼吸漸變背景
Background — 純色/漸變背景
BrandLockup — 品牌 logo 展示（統一/組裝兩種模式）

品牌素材路徑：~/Desktop/cherry_studio/Videos/remotion-ending/public/

輸入模型

接受任意形式的輸入：

寫好的公眾號推廣文章（markdown）
Changelog / Release Notes
使用者口述「這次想側重 XX 功能」
GitHub 倉庫連結（分析 recent releases/commits）
以上任意組合

如果資訊不足：主動問使用者要 GitHub 連結或補充說明。絕不在資訊不足時硬編故事。

敘事設計框架

繼承的核心理念

結果先於功能：Hook 說「使用者能做到什麼」，不說功能名
- ✅ "Your agent keeps working while you sleep."
- ❌ "Introducing Scheduled Tasks"
一條主線 + 2-3 支撐：不做功能清單
- 先問：「如果使用者只能記住一件事，是什麼？」 → 這是主線
- 支撐賣點必須服務主線，不是並列清單
真實 UI > 包裝：產品錄影是主體，動效是點綴
公眾號語言 → 影片語言映射：

公眾號影片
功能名詞 + 定義使用者動作 + 看得見的結果
多段解釋一個具體場景
「我們新增了 X」 "Now you can Y"

新增原則

不硬性限制時長：由內容決定（X 影片通常 30-90s），但偏短優於偏長
視覺語言每期可變：不千篇一律。每期可以有不同的 accent color / 動效風格 / ending 創意
靈感驅動：設計動效前先搜尋靈感站，方案中標註「這個動效參考了 XX」
Caption 是英文：所有出現在影片畫面裡的文案（caption / CTA / 標題）始終英文。目標平台 X/Twitter。

工作流（6 個 Phase，交互式）

Phase 1: Brief        → 理解輸入，定主線，輸出創意簡報
Phase 2: Shot Design   → 設計分鏡（分 Screen Studio 錄影 vs Remotion 生成兩類）
Phase 3: Recording     → 給出 Screen Studio 錄製指引，等使用者錄好
Phase 4: Remotion      → 寫程式碼生成動效片段，開預覽，使用者評價微調
Phase 5: Assembly      → Remotion 全包 render 或 CapCut fallback
Phase 6: Publish       → X 推文文案 + 發布建議

每個 Phase 結束時必須等使用者確認再進入下一個。不要一口氣跑完 6 個 Phase。

Phase 1: Brief（創意簡報）

讀取使用者提供的素材（文章 / changelog / 口述）
如無素材 → 要 GitHub 連結 → 用 gh 分析 releases/commits/changelog
定主線敘事（一句英文結果句）
選 2-3 個支撐賣點（必須解釋如何服務主線）
首次使用 → 向使用者收集品牌素材路徑（logo / mascot / 字型確認）
在對話中直接呈現創意簡報：
- 主線：一句英文結果句
- 支撐賣點：每個標註「如何服務主線」
- 落選池：不進本影片的功能 + 未來可單獨成片建議
- 初步視覺方向：配色（品牌色 + 本期 accent）、動效風格關鍵字、參考影片/站點
- 預估時長

等使用者確認後進入 Phase 2。

Phase 2: Shot Design（分鏡設計）

每個 shot 標記類型：

[SS] = Screen Studio 錄影（真實產品展示）
[RM] = Remotion 生成（動效/文字/過渡/片頭片尾）
[SS+RM] = Screen Studio 錄影 + Remotion 後期增強（視窗運動、字幕疊加等）

分鏡表格式

S01 [RM]     3s   Opening — 品牌色漸變 + 動態標題 "Your agent doesn't sleep"
S02 [SS]     4s   錄影：Agent 輸入框鍵入自然語言 prompt
S03 [SS+RM]  5s   錄影視窗從中央滑到左側 + 右側大字幕 "Just say it."
S04 [RM]     2s   過渡 — 品牌色粒子/漸變/幾何變換
S05 [SS]     6s   錄影：定時任務卡片出現
...
S{N} [RM]    4s   Ending — 品牌 logo + 本期創意動效

開場設計原則（Opening）

不要 logo 開場。用一個「結果畫面」或「結果文字」抓住注意力
可以是：
- 品牌色漸變背景 + 主線結果句的動態文字（打字機 / 彈入 / 漸顯）
- 產品介面的「已完成狀態」截圖 + 疊加標題
- 極簡幾何動效 + 一句 hook
3 秒內讓觀眾知道「這影片值不值得看」

結尾設計原則（Ending）

乾淨，淺色底。展示 logo，但每期不同的創意動效
可以發揮想像力，例如（僅舉例，每期要有新想法）：
- 品牌吉祥物在文字上活蹦亂跳
- Logo 從粒子中聚合
- 幾何圖形摺疊成 logo
- 視窗縮小飛入 logo 位置
- 品牌色光暈呼吸效果
不能千篇一律。如果上期用了方案 A，這期必須換一個
結尾之後是一幀乾淨的品牌靜幀（logo + 產品名），停留 1-2 秒

過渡設計原則（Transitions）

不同功能板塊之間用 Remotion 過渡銜接，不用硬切
過渡時長 1-3 秒，不能比內容長
風格：品牌色漸變、幾何變換、微妙粒子、光線掃過
可以搭載簡短文字（下一段的 hook caption）
同一影片內的過渡風格要統一

`[SS+RM]` 後期增強原則

使用者錄好 Screen Studio 素材後，Remotion 可以對錄影做以下增強：

視窗運動：錄影視窗平移（移到左/右，旁邊配大字幕）、縮放（zoom in 到某個區域後再拉回）、微妙傾斜
動態字幕疊加：在錄影旁邊或上下方配動態文字（打字機、彈入、漸顯），替代傳統 SRT
Focus 高亮：半透明遮罩 + 聚光區域，引導視線
進場/退場動畫：錄影視窗的出現和消失方式（從底部滑入、從縮略圖放大、淡入等）

設計這些效果時 → 先搜靈感站，標註參考來源。

配色方案

品牌主色：#F66A67
每期選一個 accent 配色（與品牌色搭配的漸變/對比色/互補色）
Screen Studio 背景色 = Remotion 背景色（視覺統一，必須在分鏡中明確寫出 HEX 值）
文字色：通常 #1A1A1A（深色文字在淺色背景上）或 #FFFFFF（白色文字在深色背景上）

在對話中向使用者展示完整分鏡表 + 配色方案 + 開場/結尾的創意描述。等確認後進入 Phase 3。

Phase 3: Recording（Screen Studio 錄製指引）

只覆蓋 [SS] 和 [SS+RM] 類型的 shot。

輸出內容（直接在對話中給出）

Pre-record Setup 清單：
- Cherry Studio 版本、介面語言（English）、主題（Light/Dark）
- 視窗尺寸：1440×900
- 預置資料（Agent 名稱、歷史對話、定時任務等 — 全英文）
- macOS 系統設定（勿擾、隱藏 Dock、選單列等）
Screen Studio 專案設定：
- 解析度：1920×1080
- 背景色：本期的 HEX 值（與 Remotion 一致）
- 關掉 Auto Zoom（後期由 Remotion 統一處理視窗運動）
- 不加字幕（由 Remotion 生成動態文字）
逐 Shot 錄製指引：
- 每個 [SS] / [SS+RM] shot：錄什麼畫面、鍵入什麼內容、等多久、游標做什麼
- 標註 shot_id
匯出要求：
- Screen Studio 匯出設定：MP4, High quality, 無字幕, 無音樂
- 檔案命名建議
- 關鍵：告知使用者錄好後把匯出資料夾路徑告訴 Claude

等使用者錄好並提供資料夾路徑後，進入 Phase 4。

Phase 4: Remotion Generation（核心創新）

這是本 skill 的核心價值所在。

4.1 讀取素材

使用者提供 Screen Studio 匯出的 mp4 檔案路徑
讀取檔案列表，確認與分鏡 shot_id 對應
如有遺漏 → 告知使用者補錄

4.2 生成 Remotion 程式碼

在 ~/Desktop/cherry_studio/Videos/remotion-ending/ 專案中工作。

呼叫 remotion-best-practices skill 確保程式碼品質。

為本期影片建立的檔案結構：

src/videos/{video-id}/
├── config.ts              # 本期影片的設定（時長、shot 列表、配色、文案）
├── MainComposition.tsx     # 總編排 — 按分鏡順序組合所有片段
├── Opening.tsx            # 片頭元件
├── Ending.tsx             # 片尾元件（本期創意）
├── transitions/
│   └── ...                # 本期的過渡元件
└── segments/
    └── ...                # [SS+RM] 增強元件（包裹錄影 + 添加動效）

復用已有元件（不要重寫）：

TypedText → 打字機文字效果
CherryMascot → 吉祥物動畫
GradientBg → 漸變背景
Background → 純色/漸變背景
BrandLockup → 品牌 logo 展示
EndingScene → 如果本期 ending 風格與已有變體類似，直接傳不同 config

新寫的元件需遵循專案已有模式：

Config-driven：所有動畫參數透過 TypeScript config 物件
使用 Remotion interpolate() + useCurrentFrame() + spring()
useMemo() 最佳化計算密集的動畫計劃
30fps, 1920×1080
Tailwind v4 + React 19

元件類型清單：

類型	說明
Opening	片頭：品牌色背景 + 動態標題。每期不同設計
ScreenSegment	包裹 SS 錄影的容器：`<Video>` 嵌入 + 視窗運動 + 字幕疊加
Transition	過渡片段：品牌色漸變、幾何變換等。可復用已有 TransitionCard 或新寫
TextOverlay	獨立的動態文字片段（全屏大字，區別於 segment 內的字幕）
Ending	片尾：品牌 logo + 本期創意動效。每期必須不同
MainComposition	總編排：`<Series>` 按順序組合所有片段

4.3 註冊 Composition

在 Root.tsx 中註冊本期影片的 MainComposition：

<Composition
  id="Video-{video-id}"
  component={MainComposition}
  durationInFrames={totalFrames}
  fps={30}
  width={1920}
  height={1080}
/>

4.4 預覽

確認 Remotion 專案依賴已安裝（npm install）
啟動 Remotion Studio（npm run dev）
告訴使用者開啟預覽 URL（通常 http://localhost:3000）
在 Remotion Studio 左側選擇 Video-{video-id} composition 預覽
請使用者評價，根據回饋修改程式碼

4.5 迭代

使用者可能回饋：

「這個過渡太花了」 → 簡化動效
「字幕太小」 → 調大 fontSize
「ending 沒感覺」 → 搜靈感站重新設計
「視窗運動太快」 → 調慢 interpolate 時長
「顏色不對」 → 調整配色

每輪修改後重新預覽，直到使用者滿意。

Phase 5: Assembly（拼接與匯出）

預設路徑：Remotion 全包

MainComposition 已經包含所有片段的編排（SS 錄影作為 <Video> 嵌入），直接渲染最終成片：

npx remotion render Video-{video-id} output/cherry-studio-{version}-demo.mp4

音訊：

推薦音樂風格 + 具體關鍵字（使用者自行選曲或使用免版權音樂庫）
如果使用者提供音樂檔案 → 嵌入 Remotion <Audio> 元件
推薦在哪些節點加音效（點擊音、過渡 whoosh、打字聲等）
音量建議：BGM -20dB，音效 -12dB

匯出參數：

1920×1080, 30fps（與 Remotion 專案一致）
Codec: H.264
CRF: 18（高品質）

Fallback：CapCut 手動拼接

如果使用者不想用 Remotion 全包（例如想加更複雜的音訊處理）：

用 Remotion 分別渲染每個片段為獨立 mp4
給出 CapCut 拼接順序
給出過渡建議（哪裡用 Dissolve、哪裡硬切）
給出音樂/音效建議

Phase 6: Publish（發布）

3 條英文 X 推文候選（延續舊 skill 的三變體模式）：
- Feature-led：直接列功能
- Scenario-led：從場景切入
- Teaser-led：製造懸念
約束：
- 英文、≤280 字元、含版本號
- 絕不使用 empower / seamless / unleash / revolutionize / one-stop / supercharge
- 最多 1 個 hashtag（#CherryStudio）
- 含影片指示符（demo 👇 / walkthrough below）
首幀建議：X 預設用第一幀做封面。確保 Opening 的第一幀足夠抓人
發布時間建議：基於 X 演算法的最佳發布時段

動效設計原則（貫穿全流程）

簡約高級，不花俏：每個動效問自己「去掉它影片會不會更好？」如果答案模糊就去掉
靈動但有克制：動效服務敘事，不是炫技。一支 45s 影片裡不超過 3 種不同的動效類型
高科技感：幾何形狀、漸變、微妙光效 > 彈跳、翻轉、3D 旋轉
品牌一致性：所有動效的色彩都回到品牌色 #F66A67 及其衍生色
靈感必須有來源：每個創意動效在設計描述或程式碼註解中標註參考來源
沒有點子就搜尋：不將就。去靈感站或 WebSearch 找到滿意的方向再動手

不做的事

❌ 不驅動 Cherry Studio GUI 自動操作
❌ 不替使用者錄影（只給指引）
❌ 不生成中文影片內文案（X/Twitter 目標平台，畫面內全英文）
❌ 不抓取公眾號 URL（輸入僅支援本地檔案或 GitHub 連結）
❌ 不做超過 2 分鐘的長影片（不是本 skill 的定位）

公眾號	影片
功能名詞 + 定義	使用者動作 + 看得見的結果
多段解釋	一個具體場景
「我們新增了 X」	"Now you can Y"

在你喜歡的 AI 中提問

說明文件