Claude Code + Nano Banana 动画网页设计工作流

来源：Chase AI - Claude Code + Nano Banana Just Changed Web Design

核心观点

AI 生成的网页普遍存在"AI 味"（generic AI slop），通过添加动画背景可以让你的网页立刻脱颖而出。这个技巧简单且高杠杆——实现难度低，但视觉效果提升巨大。

四步工作流

Step 1：Nano Banana Pro 生成起始图像

在 Higgsfield 平台使用 Nano Banana Pro 生成图像

提示词模板：按 camera type、light description、atmosphere 等维度结构化描述，把模糊的想法变成专业 prompt

灵感来源：Pinterest / MidJourney 搜索艺术风格作为参考图
Dribbble / Godly 搜索落地页设计灵感

关键：生成图片前就要想好落地页的布局（如左侧留白放文字）

需要多次迭代，很难一次出理想结果

Step 2：图像转视频

使用 Cling 3.0 或 VO 3.1（需要支持 starting frame 的模型）

提示词原则：保持静态，只加极其缓慢和微妙的动态（slow and subtle motion）

动画太多会显得 tacky（低俗），less is more

关闭 enhance，保持对 prompt 的控制

视频时长选择

方案时长优点缺点长视频（推荐）15 秒创作自由度大，实现简单到结尾会有卡顿短视频循环5 秒无缝循环动作受限，需 ffmpeg 反转拼接

实际没人在 hero 区停留 15 秒，所以长视频的卡顿问题不大

Claude Code 可以用 ffmpeg 自动反转拼接做循环

Step 3：Claude Code 构建落地页

最小 prompt 模板：

我要为 [你的业务] 创建一个落地页。- 用文件夹中的 MP4 创建动画 hero section- 用静态图片替代视频（给移动端用户）- 使用 front-end design tool

提升质量的技巧：

使用 UIUX Pro Max skill（GitHub 安装，两条命令即可）—— 根据行业和细分领域生成更专业的设计

喂截图：把喜欢的网站截图丢给 Claude Code，减少迭代次数，避免 generic 输出

使用 21st.dev 的预制组件 —— 浏览按钮、卡片等组件样式，一键复制 prompt 给 Claude Code

让 Claude Code 启动 dev server，在 localhost 预览效果

Step 4：GitHub + Vercel 免费部署

推送到 GitHub：在 Claude Code 中 commit and push our code to [repo URL]首次使用需要 GitHub 认证（60 秒内完成）

部署到 Vercel：用 GitHub 账号注册 Vercel（免费）
Dashboard → Add New Project → Import → Deploy
自动获得一个 .vercel.app 域名，后续可绑定自定义域名

工具链总结

环节工具用途图像生成Nano Banana Pro (Higgsfield)生成起始帧图像灵感MidJourney / Pinterest参考风格网页灵感Dribbble / Godly落地页设计参考视频生成Cling 3.0 / VO 3.1图像转动画网页开发Claude Code + front-end design生成落地页代码组件库21st.dev预制 UI 组件 prompt部署GitHub + Vercel免费上线

关键经验

动画是对抗 AI 味的利器：99% 的 AI 网站没有动画

移动端用静态图：不要在手机上加载视频

给 Claude Code 越多上下文越好：截图、参考网站、设计灵感 → 减少迭代

视频动画要克制：微妙的烟雾、光影变化 > 夸张的运动

迭代是必然的：图像、视频、网页每一步都需要多次调整

Claude Code和Nano Banana动画网页设计工作流