UI 動態設計工作流程指南
詳細解析使用 Claude Opus 5.5 製作 UI 動態設計影片的工作流程，作為一套全面的提示詞與指令集。
創作效果
參考提示詞
以下是依案例意圖整理的參考寫法，可依自己的主題調整。作者原文見來源欄。
“Build a 14-second UI motion piece from eight to twelve states such as a button, loading indicator, toggle, chart, and command palette. Choose commercially usable music near 120 BPM and measure its beats with NumPy. Write one 1440×1440 HTML scene whose styles are calculated from seek(t), using closed-form spring motion rather than timers or autonomous CSS transitions. Place interface sound effects according to their measured peaks. Preview a frame at each beat to correct the timing, then render four subframes per output frame with Playwright and blend them in ffmpeg for a 60 fps film.”
如何在 PagePop 中創作
選好助手、說清需求，讓 PagePop 協助創作，再透過對話調整並下載。
選擇適合你的助手
探索各行各業的專業助手，也可以從豐富的案例庫中尋找靈感。
用自然語言說明需求
告訴助手你要製作圖片、影片、PPT、文件還是網頁，並依需要提供參考圖片或資料。
自動搭配模型並創作
PagePop 依目標選擇合適的模型與工具，為你完成作品。
持續修改並下載
在同一段對話中反覆調整內容與效果，滿意後下載使用。
用你自己的話開始創作
以這條真實提示詞為起點，自由修改需求，PagePop 會自動選擇最合適的實現方式。
常見問題
如何將這個影片案例用於自己的創作？
以「UI 動態設計工作流程指南」的參考提示詞為起點，替換自己的主題、風格和畫面比例，並提供參考圖或相關資料。保留想借鑑的結構，刪除不適用的要求，再依結果繼續調整。
瀏覽和複製提示詞需要付費嗎？
精選庫的瀏覽與提示詞複製 100% 免費，PagePop 也可以免費使用。具體價格與積分規則請查看價格頁。
PagePop 是什麼，可以做什麼？
PagePop 是對話式 AI 創作平台。用自然語言描述需求，即可創作圖片、影片、簡報、文件和網頁。PagePop 會選擇合適的模型與工具，並支援在同一段對話中繼續修改。
更多真實提示詞案例
UI 動態設計動畫提示詞
“Ask for eight to twelve UI states, a monochrome or single-accent palette, and a usable track near 120 BPM. Make a 14-second, 1440×1440 loop where one shape becomes a button, loader, player, slider, toggle, tabs, graph,…”
HTML 中的 WebGPU 海洋場景
“Build an ocean scene that runs in the browser as a single HTML file using WebGPU. Drive the sea surface with FFT waves, add whitecaps, and place it under a realistic sky. Include WASD movement so the viewer can explore…”