你让AI“画个页面”却收到一堆没法跑的代码？聊聊用AI做样式与动效原型的正确姿势

一、先说翻车的事

去年有段时间，我们小组想用AI加速原型验证。想法很朴素：把设计稿丢给AI，让它生成前端代码，快速看效果。结果呢？三个坑轮着踩。

坑一：一句“帮我做个好看的落地页”，收到三屏不知所云的HTML。

AI确实给了代码，也能跑。但配色是AI自由发挥的渐变紫，布局是十年前的模板感，动效只有一句transition: all 0.3s。你说它不对吧，语法没问题；说它对吧，跟产品想要的东西毫无关系。改起来比自己写还累。

坑二：一次性把整个产品页面全喂进去。

“帮我生成一个带导航、轮播、卡片列表、弹窗和登录态的完整首页”，AI硬着头皮输出了八九百行代码，前后引用的类名对不上，JS报错，动效互相覆盖。这种“一锅端”的产物，debug的时间远超重写。

坑三：拿原型代码当生产代码。

有一次顺手把AI生成的样式直接合进了正式分支，后来发现里面全是内联样式加!important,响应式断点只写了一个，Safari上动效直接崩了。回滚的那天下午，团队约定了一个新规矩：AI生成的东西，默认只活在原型沙盒里。

这三个坑背后其实是同一个误解：把AI当成“许愿机”，而不是“流水线上的工人”。

二、正确路径：把原型验证拆成AI擅长的粒度

摸索之后，我们把流程改成了四步，效率才真正提上来。

第一步：喂约束，不喂愿景

不再说“做个好看的”，而是把已经确定的设计Token(色板、字号、间距体系)直接写进提示词。AI在没有约束时会用“平均审美”填空，给了约束，它就只在你要的空间里发挥。

第二步：单点验证，一次一个动效

验证“卡片悬停上浮+边框流光”这个动效，就只生成这一个组件。代码量控制在百行以内，跑不通一眼能看出来。验证完记录结论，丢掉代码，进入下一个。

第三步：让AI给“参数档位”而不是“一个答案”

同一个动效让AI输出三个版本：克制的、标准的、夸张的，每个版本标清楚缓动函数和时长。把三个版本并排给产品经理看，选型的沟通成本骤降——以前靠嘴描述“再轻一点”的来回拉扯，变成了“选B,时长改成0.25s”。

第四步：原型与生产物理隔离

AI生成的代码统一放在原型目录，验证通过后由人把结论(不是代码)翻译成组件规范。听起来多了一道工序，实际上避免了无数返工。

三、可复用的提示词模板

这是我们团队沉淀下来的动效原型模板，直接替换方括号内容即可：

你是一位资深前端动效工程师。请为我生成一个可独立运行的原型片段,要求:

【验证目标】[例:卡片悬停时轻微上浮,边框出现流光效果]
【技术栈】HTML + CSS(单文件,内联style标签,无需构建工具)
【设计约束】
- 主色:[#1E293B],强调色:[#3B82F6],背景色:[#F8FAFC]
- 圆角:[12px],基础间距单位:[8px]
- 字体:系统默认无衬线
【动效要求】
- 输出 3 个版本:克制(≤150ms)、标准(250ms左右)、夸张(≥400ms)
- 每个版本注明使用的缓动函数和时长,以注释标在代码顶部
- 必须考虑 prefers-reduced-motion 媒体查询
【交付要求】
1. 代码保存后双击浏览器即可直接运行
2. 同屏排列三个版本方便对比
3. 代码总量控制在 150 行以内,不加与验证目标无关的功能
4. 最后用 3 句话总结:各版本适用的场景建议

这个模板的核心思路是：把“审美判断”留给人，把“实现细节”交给AI。

四、用AI前后对比

最大的变化其实不是速度，而是心态。以前验证一个想法的成本高，很多交互细节“感觉差不多就上线了”。现在试错便宜，团队反而愿意多试几版。原型验证的本质是降低试错成本，AI恰好把这个成本压到了几乎可以忽略的程度。

五、一点提醒

• 模型选择：生成前端代码这类任务，不同模型的表现差异不小，建议拿同一个提示词在几个模型上各跑一次，固定用输出最稳定的那个。
• 成本意识：原型阶段调用量小但频率高，如果团队多人并行验证，建议统一走一个接入层管住Key和用量，费用问题以各平台官网价格页为准，不要凭印象估算。
• 版本留痕：验证结论(选了哪版、为什么)要沉淀成文档，不然一个月后没人记得当初为什么选了250ms。

写在最后

AI做样式与动效原型，价值不在于“替你写代码”，而在于把“想法到可见效果”的距离缩短到几分钟。想清楚这一点，你就不会再纠结它写的代码能不能上生产——那是另一个环节的事。

如果你正在寻找一个稳定的模型调用入口来跑这类原型验证工作流，可以试试 https://api.thistoken.ai/register,注册即可接入多个主流模型，拿同一个提示词模板横向对比，找出最适合你工作流的那一个。

---

不想折腾多家供应商的接入差异？在 https://api.thistoken.ai/register 注册，用一个 base_url 调用所有模型。