Gemini 3 原来这么会做 UI 动画：这套 Prompt 才发现它的上限

许多人误以为 Gemini 3 只能生成模板化的 PPT 动画，但其对前端动画库的理解远超预期。问题的根源并非模型能力不足，而是缺少精准的 Prompt 引导。通过一套基于 GSAP 和 Motion.dev 的代码生成流程，可以充分释放 Gemini 3 在 UI 动画创作上的潜力，实现更具质感和细节的微交互效果。这套方法为前端开发者和 UI 设计师提供了全新的 AI 辅助动画制作思路。

智能速览

• Gemini 3 对主流前端动画库的理解比想象中更好。

• 动画效果模板化的根本原因在于 prompt，而非模型本身。

• 高质量的动画生成需要先清晰描述动画规格。

• 结合 GSAP 与 Motion.dev 可有效提升代码生成质量。

• 这套流程同样适用于关注 UI 微交互的复杂场景。

精华内容

想要摆脱 PPT 式的动画效果，关键在于改变与 AI 的沟通方式。通过一套结构化的工作流，可以让 Gemini 3 精准生成专业的动画代码，展现出惊人的上限。

问题根源

多数人使用 Gemini 3 生成动画时，习惯于下达“做一个好看的动画”这类模糊指令。这种宽泛的需求导致模型只能输出通用性强的模板化效果，视觉上类似 PPT 过渡动画，缺乏设计感与独特性。实践证明，Gemini 3 本身对 GSAP 等主流动画库的底层逻辑有不错的理解，限制其发挥的往往是用户未能提供清晰、具体的动画描述。

解决思路

突破困境的核心思路是“规格先行，代码生成”。这意味着在向模型提问前，需要先明确动画的每一个细节，例如元素的运动轨迹、缓动函数、时间轴、触发条件等。将动画规格文档化或清晰描述后，再要求 Gemini 3 基于这些规格生成对应的代码。这种方法将 AI 从一个模糊的创意执行者，转变为一个精准的代码转换工具，极大地提升了产出质量与可控性。

技术选型

这套流程在实践中与特定的前端动画库结合效果最佳，推荐使用 GSAP 和 Motion.dev（即 Framer Motion 的核心）。GSAP 以其强大的性能和精细的控制能力著称，适合处理复杂的序列动画。而 Motion.dev 则在 React 生态中表现出色，声明式的语法与组件化思维高度契合。明确指定模型使用这些库进行代码生成，能有效规避通用方案的局限性，确保输出的代码具备专业水准和良好的可维护性。

关注微交互

高质量的 UI 动画不止于宏观的页面转场，更体现在丰富的微交互细节上，如按钮悬停、表单验证反馈、列表项滑入等。在 Prompt 中，可以针对性地描述这些微小场景的动画需求，例如“当用户悬停在按钮上时，按钮在 0.2 秒内平滑放大 1.05 倍，并伴随轻微阴影变化”。引导模型关注这些细节，能让生成的界面更具生命力和互动感，显著提升用户体验。

通过改变与 AI 的协作方式，Gemini 3 在 UI 动画领域的潜力被极大发掘。这套基于规格定义和代码生成的工作流，不仅提升了效率，也为从业者开辟了新路径。未来，AI 能否理解更抽象的设计意图，甚至主动提出动画方案，将是更值得探索的方向。

关键评论

• 有观众认出作者是 superdesign 的创始人，认为其内容功底深厚。

• 这套方法是人的创意与 LLM 的信息整合能力的完美结合。

• 评论区有用户直接询问这套实用 Prompt 的获取方式，显示出强烈的学习意愿。