UI 動態設計動畫提示詞
為 Claude Opus 5.5 設計的詳細提示詞，用於建立精緻且可循環播放的 UI 動態設計影片。該影片使用 HTML/Canvas 技術，結合彈簧物理效果與節拍同步轉場。
提示詞
<inputs>
請詢問我以下 3 項內容：8-12 個相互變形的 UI 元件（例如：按鈕、載入器、音樂播放器、音量滑桿、開關切換、分頁、圖表、命令面板、通知）、配色方案（嚴格的黑白或單一強調色），以及一首約 120 BPM 的免版稅音軌（例如來自 Mixkit）。
</inputs>
<direction>
創作值得在 Dribbble 上展示的精緻螢幕動態。僅使用一個形狀；切勿剪接場景。透過同一個形狀改變大小、圓角半徑和顏色來呈現所有狀態，並使用短暫模糊來交換內容。游標透過實際點擊和拖曳驅動所有變化。背景為溫暖的淺灰色，元件為黑白。文字使用日文（Noto Sans JP）和英文/符號（Geist）。所有動態均使用自然彈簧物理效果，並帶有極少的過衝。鏡頭縮放以填滿每個狀態的螢幕。完美循環（最後一幀與第一幀匹配）。禁止事項：彈跳式動態、粒子爆炸、光暈效果、元件上的漸層、不一致的圖示粗細、空白停頓、模板化美學。
</direction>
<structure>
120 BPM，7 小節（約 14 秒），每個節拍都有動作發生。
按鈕 -> 載入器 -> 對勾 -> Dynamic Island 風格 -> 音樂播放器播放/暫停變形 -> 進度條拖曳 -> 音量滑桿拉伸 -> 開關切換同步 -> 液態分頁選擇 -> 分頁展開為自繪圖表 -> 收合為命令面板 -> 輸入/搜尋 -> Enter -> 通知 -> 回到按鈕。
</structure>
<build>
1. 單一 HTML 檔案，1440x1440 正方形。所有視覺效果均在 seek(t) 內計算。不使用 CSS 轉場/計時器。幀之間無狀態。
2. 彈簧作為閉式步階響應。疊加計算以處理目標變更。
3. 分頁選擇：左右邊緣使用獨立的彈簧，前導邊緣延伸得更快。
4. 拖曳：按住時直接操作，釋放時彈簧回位。
5. 使用 numpy 分析音訊以獲取節拍網格。將聲音同步到測得的峰值。
6. 使用 Playwright 渲染。每幀匯出 4 個子幀，並使用 ffmpeg tmix 混合以在 60fps 下實現動態模糊。
7. 在完整渲染之前，每個節拍預覽一幀，以修正時間/可讀性問題。
</build>
<gotchas>
切勿在鏡頭縮放的元素上使用 will-change（會導致文字模糊）。給予進入/退出文字獨有的時間點以防止重疊。確保最後一幀與第一幀完全匹配（包括游標位置/速度）以實現平滑循環。
</gotchas>
<start>
首先詢問輸入內容，然後在編寫程式碼之前向我展示逐節拍的狀態列表。
</start>
如何使用這條提示詞
- 1
複製上方完整的提示詞。
- 2
開啟支援 Claude Opus 5.5 的平台（例如 YouMind），把提示詞貼上。
- 3
依你的想法替換主體、風格或細節，然後生成。
這是 YouMind 提示詞庫裡的一條免費 AI 提示詞。這裡還有成千上萬條 影片 提示詞，都能免費複製與改用。
探索更多 影片 提示詞
更多提示詞功能
