UI 動態設計工作流程指南
詳細解析使用 Claude Opus 5.5 製作 UI 動態設計影片的工作流程，作為一套全面的提示詞與指令集。
提示詞
關鍵不在於提示詞（Prompt），而在於一條規則：每一幀都是時間的純函數。
歌曲 -> numpy 節拍網格 -> Opus 5.5 生成單一 HTML 檔案 -> Playwright 渲染 -> ffmpeg 混合
步驟 1 -> 挑選一首約 120 BPM 的免版權音樂
步驟 2 -> 提供給 Opus 5.5 8 到 12 種 UI 狀態：按鈕、載入器、開關、圖表、命令面板
步驟 3 -> 單一 HTML 檔案，尺寸 1440x1440，所有樣式均在 seek(t) 內計算。不使用 CSS 過渡效果，也不使用計時器
步驟 4 -> 彈簧動畫採用閉合形式數學運算，確保任何一幀都能以任意順序渲染
步驟 5 -> numpy 偵測節拍，讓每個 UI 音效都落在測量到的峰值上
步驟 6 -> Playwright 為每一幀拍攝 4 個子幀，ffmpeg tmix 將其混合成 60fps 的動態模糊效果
步驟 7 -> 先為每個節拍渲染一幀，修正脫離網格的內容，然後進行完整渲染
數學計算：
120 BPM x 7 小節 = 28 拍 = 14 秒
14 秒 x 60 fps x 4 子幀 = 3,360 次瀏覽器渲染
如何使用這條提示詞
- 1
複製上方完整的提示詞。
- 2
開啟支援 Claude Opus 5.5 的平台（例如 YouMind），把提示詞貼上。
- 3
依你的想法替換主體、風格或細節，然後生成。
這是 YouMind 提示詞庫裡的一條免費 AI 提示詞。這裡還有成千上萬條 影片 提示詞，都能免費複製與改用。
探索更多 影片 提示詞
更多提示詞功能
