高端產品動態影片
一份製作約 40 秒產品影片的食譜，讓影片看起來像是品牌自己的發佈影片，並充滿生命力：以 UI 為主導，沒有人物，沒有旁白，搭配音樂和少量音效點綴。這套方法是在一個真實的發佈影片上，經過約十五輪的審查迭代（包括合作品牌方自己的內容審查）所打磨出來的；下面的每一條規則，最初都是審查意見中的一個筆記。
程式碼模式：references/remotion-patterns.md。品牌讀取：references/brand-reading.md。簡報格式：references/brief-template.md。
首先收集的輸入
- 簡報：每個功能一行（用戶問什麼、產品做什麼、AI 回答什麼）。如果沒有，就撰寫一份（
references/brief-template.md），並在開始構建前獲得批准。 - 品牌的即時表面：與主題最相關的行銷頁面，以及產品應用程式，在瀏覽器中打開。
- 用戶提供的素材：標誌類型（SVG）、圖示、背景圖案、合作夥伴與頻道標誌（真實檔案）、已授權的
woff2字體、虛構人物的頭像（生成或授權），以及音樂：在生成之前，先詢問他們是否有喜歡的曲目。 - 格式：優先輸出 16:9；在 16:9 獲得批准後，才製作 1:1 和 4:5 的裁切版本。
如果您無法開啟瀏覽器，請告知並要求提供螢幕截圖。切勿憑記憶猜測品牌的顏色或字體。
1. 從即時網站和應用程式讀取品牌
使用頁面中的一個小腳本（getComputedStyle 應用於 H1、body、主要按鈕、卡片；詳見 references/brand-reading.md）提取真實數值：標題字體 / 字重 / 字距、墨色和次要灰色、強調色、卡片圓角和邊框線、背景處理方式、標誌性視覺元素（例如夜空背景），以及標誌類型 SVG。將每個數值寫入一個 theme.ts 檔案，並註明讀取的位置和時間；其他地方不得出現任何顏色字面值。
一個基於通用動態套件構建的版本曾被退回，理由是「不夠高端，不符合品牌形象」：請在品牌自己的即時系統上構建。
2. 結構：一場連續對話
| 部分 | 長度 | 內容 |
|---|---|---|
| 鉤子 | ~5 秒 | 它相容的 AI 以完整標誌及名稱呈現，在一個晶片中切換，最後以所有 AI 的圖示一同結束；一行簡短的兩行主張（墨色 + 灰色）；產品標誌類型強勢進入（「<產品> 讓它實現。」） |
| 對話 ×4 | 每次 ~7-10 秒 | 提示詞升起並在畫面中央大字形自行鍵入 → 發送，向右滑動 → 狀態行（「正在搜尋 <產品>…」+ 真實工具名稱，點點 → ✓）→ 產品卡片在對話串中出現並完整播放 → AI 回覆在訊息泡泡中串流顯示 |
| 結尾 | ~3.2 秒 | 品牌的深色背景升起全畫面（唯一黑暗時刻）；「[標誌] 的完整力量，現在盡在您的 AI。」；純文字 URL |
-
無插頁、無標題卡、頂部無字幕。 一場討論展示多項能力。每個新提示都是一個轉場：對話串滾動，新的訊息升起，將先前的對話推向上方。在一個步驟內部，鏡頭從提示詞 → 產品卡片 → 回覆。
-
一次只聚焦一件事。 無需將聊天和產品分置兩側的 split screen（「螢幕資訊過多」）。
-
全程淺色背景。 產品的結果以卡片形式存在於對話中；中間出現的深色面板感覺像一個突兀的剪輯。深色僅用於結尾卡。
-
當產品與任何 AI 相容時保持 AI 中立（MCP 伺服器、公開 API）：聊天中不要出現任何單一助手的標誌、字體或顏色。標題 = 一個「<產品> MCP」晶片 + 「可與」 + AI 圖示；回覆使用產品的主體字體，並在正在出現的文字尾部使用產品顏色。
-
AI 在訊息泡泡中說話（白色，左側，與用戶的灰色泡泡相對）。純回覆文字看起來像字幕，「不是對話的一部分」。無需頭像。
-
在回覆開始前完成執行：回覆僅在卡片完成後才開始。步驟長度 = 打字時間 + 狀態時間 + 卡片自身執行時間 + 回覆時間。
-
行動裝置尺寸：在 1920 × 1080 畫布上，提示詞約 62 px，狀態約 44 px，回覆約 58 px；產品卡片縮放約 1.2-1.4 倍（每張卡片獨立縮放，以便最高的卡片仍能避開標題）。
-
代理主導變體（產品本身就是 AI 代理）：語法相同，角色互換。代理先寫（白色泡泡，其標記 + 文字標記在標題中），用戶決定（灰色泡泡，語音備忘錄附帶即時波形和文字稿）。展示裝置，不要描述它：一個手機時刻以鎖定螢幕開場，代理的推播通知落下，然後輕點一下，橫幅像打開應用程式一樣擴展到全螢幕，對話就在其中；應用程式圖示是代理的臉，位於白色瓷磚上。裝置體現在寬度上：手機時刻位於手機框架內（窄欄，通知在其中打開），筆電時刻使用全寬；框架在兩者之間彈開，整個歷史記錄重新排列到新的寬度（將對話串佈局兩次，手機和筆電，並隨著框架混合位置和大小），因此對話永遠不會消失。只命名裝置一次（「在你的筆電上」），後面的分隔線只顯示時間。絕不要為了湊時長而剪掉證明場景（客戶故事、參考資料）：這是被要求補回的。在代理主導的影片中，代理的小標記會出現在其每條訊息旁邊（不同於 AI 中立的 MCP 影片）。跨裝置的一天變成一個標題上下文晶片，它會翻轉（「在你的手機上 · 上午 8:42」 → 「在你的筆電上」），加上對話串中的時間分隔線，絕不使用裝置框架。將其構建成一個項目列表（代理 / 用戶 / 語音 / 卡片 / 分隔線，每個都有閱讀時長），並從中計算開始時間、佈局和滾動鏡頭。
-
主動代理變體（外部偏好）：當重點是代理為你工作時，根本不要顯示聊天。代理推送（一行以它口吻說的標題 + 一張卡片），用戶只需點擊接受或跳過（按下 + 漣漪效果，然後出現一個「已接受」晶片；當代理推送一個列表時，每行都有跳過 / 接受）；當推送的卡片已經有自己的動作按鈕（「添加到今天的通話」）時，用戶點擊該按鈕，就不需要單獨的接受行。用戶輸入指示（「剪掉開頭並發送它」）看起來像普通的 LLM 聊天。允許一個超出接受的時刻：用戶提出一個問題，代理用洞察回答（「關於 Tom 我有什麼需要知道的嗎？」）或要求代理即時執行一個額外任務；絕不要進行文字校正。以高能量開啟外部剪輯：一陣來自真實應用程式的通知風暴堆積並震動，然後被甩開，接著出現「太多線程了。」和代理的標記強勢進入。
3. 文案
- 提示詞聽起來像一個人在繼續對話：連續性來自於對先前內容的引用（「對他們來說」、「這些信號」、「執行這個」），最多只有一個輕微的反應。千萬不要在每個提示詞上都使用讚美詞。
- 具體且有價值，在步驟之間共享一個詞彙（例如每個提示詞中都有「購買意圖信號」）。
- 很少出現數字：鉤子中沒有（沒有價格）；數字只存在於卡片內部。聲明中的數字在簡報中有來源；UI 中的數字被標記為說明性；人物和公司都是虛構的。
- 狀態行使用真實的工具或 API 名稱，並與產品實際的工具列表進行比對。切勿發明一個。
- 標誌取代名稱：結尾行內的標誌類型；標誌類型 + 文字組合鎖定保留其文字空間。URL 上沒有箭頭或按鈕：影片中沒有任何東西是可點擊的。
4. 產品卡片：展示 AI 實際做了什麼
- 每個步驟一張卡片，3-4 行，產品完整的標誌類型在標題中。
- 定性化、AI 時代的產出，不是底層機制：不要使用
{{firstName}}合併標籤（「對於 AI 時代來說不夠定性化」）。顯示一條為某條紀錄即時撰寫的真實訊息，從其數據中提取的短語用螢光筆劃線標記，並加上一句話的觀點。 - 工作流程是具有條件分支的流程（步驟加上其實際文字 → 「等待 3 天」 → 「未開啟」 → 電子郵件 / 「已開啟，無回覆」 → 帶有即時波形的語音訊息），而不是一行日期的圖示。卡片隨著流程的繪製向下增長：永遠不要有空區塊。
- 真實的頻道標誌（LinkedIn、Gmail…）使其看起來真實。
- 狀態列表是現代的運行日誌：細軌道逐漸填滿，點點 pending → 旋轉環 → 品牌顏色的實心勾選標記，每個步驟一行結果，一個小的持續時間。帶有綠色勾選標記的方框圖示正方形看起來「老派」。
- 狀態變化本身就是一個時刻：切換開關等待卡片落地，然後軌道淡入，旋鈕壓縮，脈衝環擴散，一個「啟用」標籤彈出，然後運行才開始。
- 剪掉不屬於所顯示動作的 UI（在排程步驟上的團隊聊天摘要卡片「沒有意義」）。
5. 動態語法：元素動態，停頓清晰
標準：有趣的發佈影片，每個元素都有物理特性（公開範例：Allo 的「我們決定給 Grok Bot 一支手機」，2026 年 10 月；不需要吉祥物）和 AI 助手自己的發佈影片（無框對話，大字型）。
- 彈簧，而非緩動，用於所有出現的元素（使用帶有過衝的
spring()；預設值和一個阻尼的kick()在模式檔案中）。 - 文字彈出時帶有輕微傾斜，並在構建一行時互相推動；舊行被拋開，絕不僅僅是淡出。標誌類型強勢進入，線條震動一次。
- 對話串鏡頭：根據文字長度估計佈置對話串，並在焦點點之間以軟彈簧進行滾動（新提示居中 → 卡片居中 → 回覆在視野內），在發送和卡片落地時有小幅度衝擊。標題位於白色漸變上，以便滾動的內容在其下滑動。
- 卡片以彈簧方式落地（輕微傾斜，工具呼叫落地時有一個小 bump）；行滑入，標籤和勾選標記彈出，條形圖過衝，預覽翻轉。
- 停頓時間長，動作速度快：3.2 秒的步驟「太快了，我們來不及閱讀」。動感來自於快速的入口（0.3-0.6 秒），絕不來自於縮短停頓時間。回覆速度約 9 字/秒，下一個提示前約 1 秒。當時長和可讀性衝突時，可讀性優先：提議刪除一個步驟。
- 無硬切，無全畫面交叉淡出：一個連續的空間。
6. 音樂與音效
- 感覺良好、活潑、現代感：約 115-122 bpm，清脆的鼓聲（無俱樂部大鼓）、活潑的貝斯、撥弦 / 吉他 / 馬林巴、拍掌和彈指聲。審查中被拒絕的：平靜的鋼琴背景音樂（「不夠動感」）、四拍子的電子流行樂（「太像夜店」）、任何復古風格（「不老派」）。
- 選定的曲目太短（庫存 groove 通常約 25 秒）：在其完整段落的節拍邊界上重複整個 4 小節區塊，在曲目 intro 之後開始，以便影片以全能量開場，保留其真實的結尾在最後一幀。切勿對選定的曲目進行時間拉伸。模式檔案（「聲音」）中有食譜。
- 生成音效：要求影片的確切長度，並在據此構建之前檢查每秒的響度；模型會忽略提示的結構（有一次，一個錄音在 drop 之前安靜了 15 秒）。一個有效的提示在模式檔案中。
- SFX 僅在有可見原因時使用（標誌切換和卡片落地時的爆破聲、發送時的點擊聲、提示升起和結尾時的輕柔嗖嗖聲、最後一步打勾時的鈴聲）。混音至約 -14 LUFS。
7. 品質：銳利至極
- 主版本2 倍超採樣（
--scale=2，CRF 14，JPEG 100，x264 slow）；審查輪次可以使用直接的 1080p 渲染。 - 大面積表面無 CSS 模糊；無巨大的
box-shadow模糊（Chrome 會條帶化處理，請使用徑向漸層）；本地woff2字體帶有有限等待時間；在<Img>內部使用fill="currentColor"的 SVG 會渲染為黑色，請重寫 fill。 - 僅畫面變更：以
--muted渲染一次，將每個音訊混音渲染為 WAV 並進行 mux。僅音訊變更：將現有畫面重新 mux。
8. 構建與審查循環
- 建立一個 Remotion 專案（模式檔案中的結構），填入
theme.ts，將用戶的素材放入public/。 - 按以下順序撰寫影片：標誌列表 + 鉤子文案、
PROMPTS、TOOLS、STATUSES、REPLIES，每個步驟一個卡片組件及其高度和縮放比例，然後是時間軸常量（開始時間和持續時間是計算得出的），最後是音樂偏移量。 - 在任何完整渲染之前，為每個步驟生成靜止幀（
npx remotion still … --frame=<秒 × 60> --scale=0.5），作為聯繫表：疊加、換行、標題下的卡片、空區塊、遺留的單一助手品牌標識。 - 首先發送 1080p 版本進行審查；4K 和社交裁切版本僅在獲得批准後才提供。在同一天將每個修正寫回此技能。
卡片高度是測量出來的，不是猜測的：對話串佈局會為每張卡片預留高度，低估會導致下一條訊息滑到卡片下方（一張預留 452 px 的摘要卡片實際渲染了大約 530 px 並導致了重疊）。將實際部分加總（標題 + 主體內邊距 + 行數 × 行高），然後在完整渲染之前，針對每張卡片的最終狀態檢查其之後的項目。
完成條件
- 影片讀起來像與 AI 的一場對話，一次只聚焦一件事，每一行文字在手機上首次觀看時都可讀。
- 每個步驟在 AI 回答之前，都在產品中完成執行；每個產品卡片都顯示真實、定性的產出，並帶有真實的頻道標誌。
- 沒有任何元素是沒有動畫就出現或消失的；沒有任何東西...
…
[為翻譯截斷]