07 · 影像、動效與 HTML 影片

OpenDesign 不只出靜態頁面。影像生成、程式碼動效、影片都在裡面，而且路徑各不相同。

影像生成

介面裡有「Image」入口，也可以在生成 deck 或者頁面的過程中按需生成配圖。

支援的模型跟著版本走，常見的是 GPT Image、Seedream、Nano Banana 這幾類。託管套餐裡影像模型是按檔位開放的，免費版走你自己的 key。

手繪草圖輸入

這是個容易被忽略的能力：它接受手繪輸入。

隨手畫一個很粗糙的東西——一條龍、一個介面草圖——存成檔案，然後引用它讓 OpenDesign 生成正式的圖或者介面。它會先問你朝向、背景這些問題，再生成，然後把結果放回你的設計檔案裡。

對不會畫畫的人來說，這條路的意義是：你只需要有想法，不需要有手藝。草圖承載的是結構和佈局意圖，不是美感。

同樣的做法對原型也成立——畫一個歪歪扭扭的線框，它能變成一個成熟的移動端介面。詳見實戰 · 手繪草圖 → App 原型。

保持風格一致

批量出圖最容易出的問題是風格漂移。做法是先定一張：

text

所有圖統一用這個風格：[具體描述]。

先按這個風格生成一張，我確認之後再生成其餘的。
確認之後，後續每一張都複用同一套風格描述，不要各自發揮。

程式碼動效

OpenDesign 有內建的動效技能，產出的是純程式碼的 SVG + CSS 動畫——每一個視覺元素都是程式碼。

這一點比「生成一個 GIF」有用得多：

能塞進 deck，也能塞進網頁
解析度無關，投影上不糊
能改。文字要換、配色要調，改程式碼就行
檔案小

社群教程裡有個例子：兩個擬人化的 iPhone 見面聊天，整段動畫全是 SVG 和 CSS。

什麼時候用它：deck 需要一個能動的示意、網頁需要一個解釋性的動畫、要說明一個流程或者狀態變化。

HTML 影片

影片這條線跟 hyperframes 專案合作，做的是用程式碼驅動的產品原型演示和資料視覺化動畫。

跟傳統影片剪輯的區別：

	HTML 影片	傳統剪輯
源	程式碼	時間線工程檔案
改資料	改一個數組	重做那一段
版本管理	git diff	二進位制檔案
渲染	重新跑一次	重新匯出
適合	產品演示、資料動畫、釋出短片	實拍、複雜剪輯

適合的場景很明確：產品功能演示、釋出短片、資料故事、變更日誌影片。不適合的也很明確：任何涉及實拍素材的東西。

詳見實戰 · HTML 影片與動效短片。

桌面寵物

這個跟產出無關，但值得提一句：可以養一隻桌面寵物，社群貢獻的角色也能選，儲存之後它出現在你桌面上，能互動。

它說明的是這個專案在意工具的手感，不只是輸出。用不用隨你。

什麼時候該用哪個

你要的	用什麼
一張海報 / 封面 / 圖示	影像生成
一段解釋性的動畫	程式碼動效（SVG + CSS）
一段有節奏的產品短片	HTML 影片（hyperframes）
deck 裡的入場和轉場	CSS 動畫，不要上 3D
一個有縱深的背景	Three.js，且只在一兩處

優先順序順序：能用 CSS 就別用 3D，能用程式碼就別用生成圖，能用真素材就別用生成的。每往後退一步，可控性和可改性都下降一檔。

常見坑

坑	表現	怎麼辦
批量出圖風格漂移	每張像不同來源	先定一張再批次
生成圖裡帶文字	文字是亂碼	明確要求圖中不出現文字
動效用 GIF	糊、大、改不了	用程式碼動效
影片裡塞太多資訊	觀眾跟不上	一個鏡頭一件事
3D 用在演示 deck 裡	現場掉幀	換 CSS 動畫

07 · 影像、動效與 HTML 影片 ​

影像生成 ​

手繪草圖輸入 ​

保持風格一致 ​

程式碼動效 ​

HTML 影片 ​

桌面寵物 ​

什麼時候該用哪個 ​

常見坑 ​

相關 ​