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 视频 ​

桌面宠物 ​

什么时候该用哪个 ​

常见坑 ​

相关 ​