用ChatGPT Claude Gemini做Bento Grid动效网页的提示词模板和避坑

想做一个像苹果官网那种“滚动就动起来”的网页，又不想从零啃前端？我更推荐用“三个聊天模型写代码+Midjourney出图”的组合拳，效率高到离谱。

一套流程搞定页面 结构动效素材

ChatGPT 负责搭骨架

它写HTML5+Tailwind最快，适合把Bento Grid、黑底+高亮色#2657FD、超大数字标题这些“硬需求”一次铺好。

可直接复制的提示词：输出单个HTML文件，使用TailwindCSS CDN与必要JS，Bento Grid布局，黑色背景，#2657FD高亮，中文大标题英文小字点缀，含数据小图形占位，不要省略内容要点。

Claude 负责把动效写顺

Framer Motion用CDN写起来容易“能跑但很抖”，Claude更擅长把滚动触发、入场动画、节奏曲线调得顺眼点（它也更爱帮你补边界条件）。

Gemini 负责查漏补缺

遇到浏览器报错、样式被覆盖、组件不对齐，让Gemini按“逐段解释+定位问题+给替换代码”来修，省掉你对着控制台发呆。

Midjourney 负责主视觉

像“反应堆核心/银河爆发/能量释放”这种主视觉（素材里提到的极彩炫光+暗黑底）交给它最合适，再把图丢回ChatGPT做响应式适配。

我常见的两句小吐槽

• 模型写的CDN链接偶尔过期，跑不起来别怀疑人生，换成官方最新即可。
• 动效别堆太满，Bento Grid越克制越高级，不然像PPT年会风。

如果你还卡在“怎么选模型/怎么配提示词/怎么把账号和工具一次配齐”，可以去Titikey逛逛，我自己也常用它来少走弯路。