AI写的动效总差点意思？把参数做成滑块，改一次就到位

让 AI 写前端动效，十次里有八次是这个体验：第一版惊艳，越改越丑，最后在聊天框里来回拉锯几十轮，产出还不如第一版。我一度以为是模型不行，直到听完 YC 播客里 Shopify 设计负责人 Marvin 分享的团队工作流，才反应过来——错的不是模型，是我在用聊天框干「调参」的活。

先换掉工作方式：Figma 只当草稿纸

Marvin 团队现在的流程里，Figma 不再产出像素级完美的高保真稿。有想法就先拿最简单的几何形状画个草图，直接喂给 AI，让它生成一个能在真机上点、能滑、能跑的 Demo。只有当某个布局或交互用文字解释不清时，才切回 Figma 画两笔示意图，再喂回去。原型直接代替了需求文档——他们公司老板是摸到一个能点的原型、感觉对了才拍板的。

这对独立开发者和小团队同样成立：别再花一晚上抠设计稿，把时间花在把交互描述清楚上。

三个技巧，从翻车现场里提炼

第一个技巧：文字说不清的动作节奏，画图。Marvin 用 Codex 做过一个卡片展开的页面，AI 交出的版本动效不可打断——像电梯门正在关，你狂按开门它假装没看见，非得等上一张卡片完全落回原位。这种「上一张收到一半时点另一张要立刻接管」的逻辑，写成文字自己都绕晕了。他的解法是打开 Figma 画红蓝两个方块：点红的升起，往下滑到一半点蓝的，蓝的马上接管。截图丢给 AI，一眼看懂，当场修好。一张示意图顶三千字描述。

第二个技巧：骨架不对，别急着堆细节。他让 AI 把自己拍的草地视频复刻成网页着色器，AI 答应得很痛快，跑出来一堆塑料绒球。他没有写更长的提示词，而是另开一个 AI 当诊断师——把翻车截图和原视频一起丢给 ChatGPT，得到的建议是：告诉它光从哪来、影子怎么投，把地面拆成块逐步来。真正的问题出在 AI 以为地面是平的。让 ChatGPT 把草地下面的高低起伏画成一张等高线地形图，喂回去，几十万根草长在起伏的骨架上，真实感立刻就出来了。翻车时先找结构问题，再调表面参数。

第三个技巧最值钱：说不清的感觉，做成实时调参。为了复刻一个带物理碰撞的拖拽轮播——松手时左右两张卡片要被「撞开」，那个能量感他前后写了 91 轮提示词，还是差口气。后来他装上设计师 Josh Puckett 开发的开源工具 DialKit（官网 dialkit.dev），把草叶长度、地形深度、风力大小、回弹阻尼这些参数全部变成页面右上角的滑块，拖一下看一眼，几分钟就调到位了。配套的 Blossom Carousel（blossom-carousel.com）是他们团队在用的开源物理轮播库，Collins、ElevenLabs 这些网站都在用，免费。

顺带三条审美体检

那期节目后半段还现场点评了观众的官网，三条标准拿来对照自己的页面正合适：一页只能有一个主角，最想让人做的事做大放显眼，其他全往后靠；动效是帮人理解的，不是证明你会动，满屏小圆点跑来跑去不如一个到位的转场；AI 加东西不要钱，能删才是真本事——页面高级感靠留白和敢砍，不靠堆。

调参面板怎么让 AI 生成

做法不难，一段提示词的事：让 AI 把页面里所有可调的视觉参数抽出来，做成一组 range 滑块挂在页面右上角，拖动时实时更新对应 CSS 变量或 JS 参数，还要有重置按钮。AI 对这类「给自己造调试工具」的活完成度很高，一次生成基本能用。参数选哪几个？动效场景就抓四个：时长、缓动曲线、弹性阻尼、位移幅度。界面场景换成间距、圆角、透明度、色板。

用面板也有时机讲究。探索阶段别开——参数随便拖容易把方案拖散，先让 AI 给一个八成对的默认版本；等整体方向定了、进入收尾微调，再把面板挂上去抠细节。Blossom Carousel 这个轮播库也顺手说明下：纯原生物理拖拽，带惯性和动量，不依赖 jQuery，文档里给了 React 和 Vue 的接入示例，免费开源，直接从官网拿就行。

我自己试了一次完整的流程：一个卡片悬停微交互，以前那种改法少说二十轮「再轻一点」，这次把时长和弹性系数做成滑块拖了十来下就定了，总时间不到十分钟。差的不是审美，是反馈速度。

我的看法

聊天框是线性沟通，你说一句它改一版，来回的成本极高；调参面板是并行试错，几十个参数拖着看，反馈周期从几分钟压到几秒。DialKit 这个思路完全可以推广：间距、配色、缓动曲线、任何「感觉不对但说不出哪不对」的东西，都值得让 AI 顺手生成一个控制面板挂上去。花十分钟让 AI 给页面加个调参面板，能省掉后面几十轮的「再微调一下」。