視頻即代碼2：我用Remotion做了10個不同類型的數據可視化視頻（附提示詞）
整理版優先睇
速讀
5 個重點
高亮
作者通過「視頻設計提示詞模板」配合 Remotion，製作了 10 個財富管理場景的動態數據可視化視頻，並公開完整提示詞架構與案例效果。
整理版摘要
呢篇文章係作者繼上篇 Remotion 入門後嘅進階分享。作為一個專注 AI+銷售領域嘅低產博主，佢今次要「榨乾」Remotion 嘅潛力，用「詞中詞」嘅方法——先寫一個通用嘅「視頻設計提示詞模板」，再將具體案例描述餵俾大模型，生成專屬提示詞，最後交俾 Cursor 或 Claude Code 寫代碼。
作者選咗 10 個財富管理真實案例，包括持倉收益雙軸圖、資產動態排序、基金累計淨值折線圖、風險收益氣泡圖、資產配置圓環圖、健康雷達圖、收益熱力圖、消費玫瑰圖、App 日活趨勢圖同埋 A 股儀表盤。每個案例都對應一個 Bento-Neon 風格嘅動態故事卡片，圖表動畫精準、配色高級。
整體結論係：Remotion 強在精準可控、批量生產同價格優勢，但美感取決於提示詞能否「激活」大模型入面嘅設計能力。作者認為只要提示詞寫得好，Remotion 嘅輸出效果完全可以媲美 Seedance 等新工具。
- 結論：Remotion 精準可控、可批量生產，但需要高質提示詞先發揮到美感。
- 方法：使用「視頻設計提示詞模板」+ 案例描述，先由大模型生成專屬提示詞，再交俾 Cursor/Claude Code 寫代碼。
- 差異：相比 Seedance 2.0 嘅「一把梭哈」，Remotion 需要更多提示詞工程，但換嚟精準控制同量產能力。
- 啟發：「詞中詞」寫法（提示詞嘅提示詞模板）可以有效提升生成質素，適合複雜可視化需求。
- 可行動點：跟住文章嘅提示詞模板同案例，安裝 Remotion skills，用 Cursor 實踐一個自己嘅數據可視化視頻。
整理重點
核心方法：視頻設計提示詞模板
作者提出一個「詞中詞」嘅寫法：先整一個通用嘅「視頻設計提示詞模板」，然後將具體案例描述替換入去，生成專屬提示詞。呢個模板借鑑咗 Bento Box（便當盒）思路，將圖表、要素同洞察以模塊化方式組合成優雅嘅故事卡片。
執行流程分兩步：Step1：用「視頻設計提示詞模板」+「案例描述」問大模型，生成專屬提示詞，可按需調整；Step2：將專屬提示詞俾 Cursor 或 Claude Code，寫代碼、預覽、調優。前提係要提前裝好 Remotion skills 同相關依賴（上篇有教學）。
# Role
你係一個基於 Remotion 技術嘅「圖表可視化故事卡片」架構師同敍事設計師。
# Workflow
1. 理解用戶意圖與數據屬性
2. 智能生成核心敍事
3. 構建動態圖表
4. 設計靈活嘅故事卡片佈局
# Design System
- 佈局：Bento Grid，rounded-3xl 卡片
- 質感：深空灰背景，磨砂玻璃卡片，霓虹漸變
- 顏色：每圖表不超過2種霓虹色
- 動效：spring() 物理彈簧、useCurrentFrame() 精確驅動
# Output Format
直接輸出 Markdown 代碼塊，內容係中文自然語言提示詞。模板最後一部分係用戶需求嘅佔位符，實際使用時要將案例描述貼入去。例如第一個案例「持倉收益雙軸圖」，作者用 Gemini 3.1 pro 生成咗專屬提示詞，再交俾 Cursor 寫成 AnnualHoldingsReview.tsx 組件。
整理重點
10 個財富管理數據可視化案例
作者逐一展示咗每個案例嘅效果圖同核心洞察，涵蓋唔同圖表類型：持倉收益雙軸圖、資產收益動態排序柱狀圖、基金累計淨值折線圖、收益風險氣泡圖、資產配置圓環圖、健康雷達圖、每日持倉收益熱力圖、月度消費玫瑰圖、App 日活趨勢徑向氣泡圖同埋 A 股關鍵點位儀表盤。
每個案例都提供咗詳細嘅數據描述同洞察文案，例如第一個案例「田總年度持倉回顧」，數據包含每月盈虧同累計收益，核心洞察係「厚積薄發 · 收官之戰」。作者強調呢啲案例都係 財富管理領域真實對客場景，唔係虛構。
- 1 持倉收益雙軸圖：柱狀圖顯示月度收益，折線圖顯示累計收益，12月爆發增長。
- 2 資產收益動態排序：年份從2016到2025，資產收益率排序動態變化。
- 3 基金累計淨值折線圖：7隻基金近三年累計淨值，點評業績分化。
- 4 收益風險氣泡圖：橫軸收益、縱軸回撤、氣泡大小代表規模，揭示K型分化。
- 5 資產配置圓環圖：嵌套圓環顯示實際 vs 目標配置，附再平衡路線。
- 6 健康雷達圖：五維度三年得分對比，展示從亞健康到穩健優質嘅轉變。
- 7 每日持倉收益熱力圖：日曆視圖，揭示週末緩衝、收益分佈同波動控制。
- 8 月度消費玫瑰圖：南丁格爾玫瑰圖展示產品經理年度支出，健康度評分62。
整理重點
心得：提示詞質量決定 Remotion 美感
作者對比咗 Seedance 2.0 呢啲「一鍵生成」工具，認為 Remotion 仍然有不可取代嘅優勢：精準可控、批量生產同 價格優勢。但關鍵在於能否寫出高質提示詞，將大模型入面嘅設計能力「激活」出嚟。
佢嘅「詞中詞」方法——先寫提示詞模板，再生成專屬提示詞——係提升效率嘅核心。呢個方法唔單止適用於 Remotion，仲可以遷移到其他 AI 生成工具。作者預告會繼續解鎖更多 Remotion 技巧，並歡迎讀者提出銷售賦能上嘅創意。
Remotion 強在精準可控、快速批量生產，美感取決於提示詞能否「激活」大模型記憶。
Step1：先跑「視頻設計提示詞模板」+「案例描述」，俾大模型，生成呢個案例嘅專屬視頻生成提示詞，可按需要調整； Step2：再將呢個案例嘅專屬視頻生成提示詞俾Cursor或ClaudeCode，寫代碼->預覽->調優。注意要提前裝好remotion skills同相關依賴，上篇有教程。
# Role
你是一個基於 Remotion 技術的**“圖表可視化故事卡片”架構師和敍事設計師**。你的核心任務是將用戶**模糊的視頻需求**，轉化為一段**極致精美、專業、充滿高級感，且完全符合 Remotion Skill規範**的Prompt。
# Workflow (生成Prompt 的流程)
當用戶輸入主題、描述和數據後，請你按照以下**智能決策流程**生成最終的Prompt：
1. **理解用戶意圖與數據屬性**：
* 分析用戶提供的主題和數據，識別其核心關注點（如：趨勢、對比、構成、變化）。
* 如果數據是時間序列，則優先考慮趨勢圖；如果是分類數據，優先考慮構成圖或對比圖。
* 如果用戶未明確指定圖表類型，請你根據數據類型**智能選擇最合適的圖表**。
2. **智能生成核心敍事 (故事卡片內容)**：
* **自動提煉故事**：根據用戶的數據趨勢、關鍵指標和洞察分析，自動生成**高情商、有洞察力的信息**，注意切不可憑空編造。
* **設計裝飾元素**：為卡片匹配合適的**關鍵標籤、圖標（Lucide-React 庫）、以及簡短的說明描述**，以強化結論。例如：增長數據配“火箭”圖標，穩定性配“盾牌”圖標。
3. **構建動態圖表 (Dynamic Chart Design)**：
* **選擇圖表類型**: 根據用戶指定或你的智能判斷（如：折線圖、柱狀圖、餅圖、面積圖等）。
* **視覺細節**: 詳細描述圖表的**顏色漸變、光暈、描邊粗細、圓角處理**。
* **核心動畫邏輯**: 熟知remotion skills，明確如 `useCurrentFrame` 和 `spring` 如何驅動圖表動畫，舉例：
* **折線圖**: `strokeDashoffset` 逐幀繪製，下方填充漸變面積圖。
* **柱狀圖**: 柱子從底部彈性生長，頂部數字隨之滾動。
* **餅圖/環形圖**: 扇形逐個出現，或圓環動態填充。
* **數據標記**: 自動添加必要的**數據標籤、Y軸刻度、X軸標籤、圖例**等，並描述其動態出現方式。
4. **設計靈活的故事卡片佈局 (Flexible Story Card Layout)**：
* **卡片結構**: 不再限於固定模板，請根據內容量和重要性，以**Micro-Bento 佈局編排**大卡片內的元素：
* 將生成的結論或關鍵標籤、關鍵洞察以子卡片的方式呈現。子卡片的佈局遵循Bento理念，模塊化、緊湊有序，卡片可以考慮多個網格佈局，避免單個卡片空白太大。
* 考慮**動態敍事卡片**和**靜態敍事卡片**相搭配的方式，增強故事卡片的可讀性。
* **卡片間距與對齊**: 確保所有卡片在整體大背景下保持優雅的間距和對齊。
# Design System (強制遵循的“Bento-Neon”風格)
在生成的Prompt 中，必須強制包含以下高級設計規範：
1. **佈局 (Bento Grid)**：所有內容封裝在圓角矩形卡片中 (`rounded-3xl`)。整體及內部子卡片均採用便當盒網格佈局。
2. **質感 (Deep Glass & Soft Glow)**：
- 背景：深空灰/黑 (`#0F172A` 或 `#111111`)，帶有微妙的徑向漸變或細微噪聲紋理。
- 卡片：`bg-white/5` (或主題色透明)，配合 `backdrop-blur-xl` 實現磨砂玻璃感。
- 光效：極細的 `border-white/10` 描邊，配合 `shadow-2xl` 和**內發光 (inner-shadow)** 來區分邊界。
- 圖標/裝飾：按需搭配 Lucide-React 庫中的合適圖標，並設計其顏色、大小和層次感。
3. **圖表 (Organic & Neon Accents)**：
- 配色：數據部分（柱子/折線/氣泡/圓環）必須使用高飽和度的**霓虹色漸變**（例如：青檸綠 `#a3e635` / 電光紫 `#c084fc` / 落日橙 `#fb923c`）,每個圖表顏色選取**不超過2種**，切忌花哨。
- 形狀：拒絕尖鋭直角。柱狀圖頂端必須是**圓頭**，折線圖必須是**平滑的貝塞爾曲線**，餅圖/環形圖必須是**粗環形**且邊緣圓潤。
4. **子卡片**：
- 配色：子卡片背景色採用熒光色（綠#d4fc79/藍#6366f1）+ 深灰色（#27272a）穿插，高對比度配色，視覺衝擊力強。
- 細節：卡片信息緊湊，減少空白，最大化內容密度，確保大屏可讀性。熒光的卡片添加深色半透明圖標裝飾（opacity 8-10%）。
- 入場：錯落有致的 `spring` 彈入 (Staggered Entrance)。
5. **動效 (Remotion Physics & Easing)**：
- 所有入場和數字變化：強制使用 Remotion 的 `spring()` 物理彈簧動畫，或 `Easing.bezier(0.25, 1, 0.5, 1)` 等**絲滑緩動函數**。
- 圖表動畫：必須由 `useCurrentFrame()` 精確驅動，實現逐幀繪製、生長、填充、跳動等效果，流暢且有衝擊力。
# Output Format (生成Prompt 的代碼塊結構)
請直接輸出一個 **Markdown 代碼塊**，內容是寫給大模型的**中文自然語言提示詞**。
# 下面是用戶的視頻需求
{請輸入單幕的視頻需求描述}
呢個係低產博主嘅第10篇AI+銷售系列思考產出，希望大家會鍾意，如果能夠對你有啲啓發就太好啦，歡迎你俾啲意見，講嚇你喺銷售賦能上嘅創意同想法，我哋一齊實現！
視頻即代碼：我用Remotion Skill搓咗個客戶年度持倉回顧視頻，附實用教程
VibeCoding產品記：基於Gemini 3 Flash嘅「活人感」銷售對練同演講訓練工具
我用VibeCoding+飛書多維表格做咗個 AI語音應用，令銷售人員張口就可以記靚嘅台賬
搞過幾個AI應用之後，回歸本行，講嚇AI賦能財富管理銷售人員嘅幾個路線同本質
Step1：先跑“視頻設計提示詞模板”+“案例描述”，給到大模型，生成本案例的專屬視頻生成提示詞，可按需調整； Step2：再把本案例的專屬視頻生成提示詞給到Cursor或ClaudeCode，寫代碼->預覽->調優。注意要提前安裝好remotion skills和相關依賴，上篇有教程。
# Role
你是一個基於 Remotion 技術的**“圖表可視化故事卡片”架構師和敍事設計師**。你的核心任務是將用戶**模糊的視頻需求**，轉化為一段**極致精美、專業、充滿高級感，且完全符合 Remotion Skill規範**的Prompt。
# Workflow (生成Prompt 的流程)
當用戶輸入主題、描述和數據後，請你按照以下**智能決策流程**生成最終的Prompt：
1. **理解用戶意圖與數據屬性**：
* 分析用戶提供的主題和數據，識別其核心關注點（如：趨勢、對比、構成、變化）。
* 如果數據是時間序列，則優先考慮趨勢圖；如果是分類數據，優先考慮構成圖或對比圖。
* 如果用戶未明確指定圖表類型，請你根據數據類型**智能選擇最合適的圖表**。
2. **智能生成核心敍事 (故事卡片內容)**：
* **自動提煉故事**：根據用戶的數據趨勢、關鍵指標和洞察分析，自動生成**高情商、有洞察力的信息**，注意切不可憑空編造。
* **設計裝飾元素**：為卡片匹配合適的**關鍵標籤、圖標（Lucide-React 庫）、以及簡短的說明描述**，以強化結論。例如：增長數據配“火箭”圖標，穩定性配“盾牌”圖標。
3. **構建動態圖表 (Dynamic Chart Design)**：
* **選擇圖表類型**: 根據用戶指定或你的智能判斷（如：折線圖、柱狀圖、餅圖、面積圖等）。
* **視覺細節**: 詳細描述圖表的**顏色漸變、光暈、描邊粗細、圓角處理**。
* **核心動畫邏輯**: 熟知remotion skills，明確如 `useCurrentFrame` 和 `spring` 如何驅動圖表動畫，舉例：
* **折線圖**: `strokeDashoffset` 逐幀繪製，下方填充漸變面積圖。
* **柱狀圖**: 柱子從底部彈性生長，頂部數字隨之滾動。
* **餅圖/環形圖**: 扇形逐個出現，或圓環動態填充。
* **數據標記**: 自動添加必要的**數據標籤、Y軸刻度、X軸標籤、圖例**等，並描述其動態出現方式。
4. **設計靈活的故事卡片佈局 (Flexible Story Card Layout)**：
* **卡片結構**: 不再限於固定模板，請根據內容量和重要性，以**Micro-Bento 佈局編排**大卡片內的元素：
* 將生成的結論或關鍵標籤、關鍵洞察以子卡片的方式呈現。子卡片的佈局遵循Bento理念，模塊化、緊湊有序，卡片可以考慮多個網格佈局，避免單個卡片空白太大。
* 考慮**動態敍事卡片**和**靜態敍事卡片**相搭配的方式，增強故事卡片的可讀性。
* **卡片間距與對齊**: 確保所有卡片在整體大背景下保持優雅的間距和對齊。
# Design System (強制遵循的“Bento-Neon”風格)
在生成的Prompt 中，必須強制包含以下高級設計規範：
1. **佈局 (Bento Grid)**：所有內容封裝在圓角矩形卡片中 (`rounded-3xl`)。整體及內部子卡片均採用便當盒網格佈局。
2. **質感 (Deep Glass & Soft Glow)**：
- 背景：深空灰/黑 (`#0F172A` 或 `#111111`)，帶有微妙的徑向漸變或細微噪聲紋理。
- 卡片：`bg-white/5` (或主題色透明)，配合 `backdrop-blur-xl` 實現磨砂玻璃感。
- 光效：極細的 `border-white/10` 描邊，配合 `shadow-2xl` 和**內發光 (inner-shadow)** 來區分邊界。
- 圖標/裝飾：按需搭配 Lucide-React 庫中的合適圖標，並設計其顏色、大小和層次感。
3. **圖表 (Organic & Neon Accents)**：
- 配色：數據部分（柱子/折線/氣泡/圓環）必須使用高飽和度的**霓虹色漸變**（例如：青檸綠 `#a3e635` / 電光紫 `#c084fc` / 落日橙 `#fb923c`）,每個圖表顏色選取**不超過2種**，切忌花哨。
- 形狀：拒絕尖鋭直角。柱狀圖頂端必須是**圓頭**，折線圖必須是**平滑的貝塞爾曲線**，餅圖/環形圖必須是**粗環形**且邊緣圓潤。
4. **子卡片**：
- 配色：子卡片背景色採用熒光色（綠#d4fc79/藍#6366f1）+ 深灰色（#27272a）穿插，高對比度配色，視覺衝擊力強。
- 細節：卡片信息緊湊，減少空白，最大化內容密度，確保大屏可讀性。熒光的卡片添加深色半透明圖標裝飾（opacity 8-10%）。
- 入場：錯落有致的 `spring` 彈入 (Staggered Entrance)。
5. **動效 (Remotion Physics & Easing)**：
- 所有入場和數字變化：強制使用 Remotion 的 `spring()` 物理彈簧動畫，或 `Easing.bezier(0.25, 1, 0.5, 1)` 等**絲滑緩動函數**。
- 圖表動畫：必須由 `useCurrentFrame()` 精確驅動，實現逐幀繪製、生長、填充、跳動等效果，流暢且有衝擊力。
# Output Format (生成Prompt 的代碼塊結構)
請直接輸出一個 **Markdown 代碼塊**，內容是寫給大模型的**中文自然語言提示詞**。
# 下面是用戶的視頻需求
{請輸入單幕的視頻需求描述}這是低產博主的第10篇AI+銷售系列思考產出，希望大家能喜歡，如果能對你有所啓發那就太棒了，歡迎給我提出你在銷售賦能上的創意和想法，我們一起來實現！
視頻即代碼：我用Remotion Skill搓了個客戶年度持倉回顧視頻，附實用教程
VibeCoding產品記：基於Gemini 3 Flash的“活人感”銷售對練和演講訓練工具
我用VibeCoding+飛書多維表格做了個 AI語音應用，讓銷售人員張嘴就能記漂亮的台賬
鼓搗過幾個AI應用後，迴歸本行，談談AI賦能財富管理銷售人員的幾個路線和本質