Gemini 3.0 Pro 使用有感：前端并没完蛋，但“入口”确实变了（2025-11-25）

最近一段时间我反复体验“Gemini 3.0 Pro 这类模型”的生成能力，最直观的震撼不是它能写多少行代码，而是它把**“从想法到可见结果”**的距离缩短得过分。以前我们做前端项目，经常会经历：需求拆解 → 画草图 → 搭脚手架 → 写页面骨架 → 补交互 → 调样式 → 再迭代。现在很多时候你只要一句话，“给我一个深色科技风的产品落地页，带定价卡片、FAQ、动画过渡”，它就能吐出一个看起来像样的页面；你再补一句，“加一个可交互的手掌跟随效果：鼠标移动时一个手掌图标追随并有惯性”，它也能给你一个能跑的版本。

于是很多人开始喊：“前端完蛋了。”
但我的结论是：前端没完蛋，完的是过去那种‘只会把需求翻译成页面’的低价值环节。前端岗位的价值反而更集中到“把能跑的 demo 变成能长期跑的产品”。

1）“一句话生成网站”到底改变了什么？

它改变的是入口成本与迭代速度。从前你要验证一个想法，可能至少要半天到一天把页面搭出来；现在你可以在十分钟内跑出三个完全不同的方向：不同布局、不同配色、不同信息结构。原型不再是 Figma 一张静态图，而是直接变成可点、可滚、可感知的网页，这对产品讨论的效率提升非常明显。

但这也意味着：

• 产出“像样的页面”会越来越快、越来越廉价；
• 评判标准从“能不能做出来”转向“做出来后能不能维护、性能如何、可访问性如何、跨端如何、上线后怎么演进”。

2）“一句话生成可交互手掌跟随”这种效果，为什么既酷又危险？

这种交互 demo 看起来很像“未来已来”：你说一句话，它给你一个带惯性、带缓动、带轻微旋转和缩放的跟随动画。对展示、提案、营销页确实很加分。

危险点在于：demo 很容易忽略“真实场景”约束，比如：

• 低端设备/高刷新率屏幕上的性能（requestAnimationFrame 的节流与插值）
• 动画与可访问性（prefers-reduced-motion）
• 与页面滚动/触控设备的兼容
• 事件监听清理、内存泄漏、SSR/CSR 行为差异（Nuxt/Next 特别明显）
• 你项目里已经有一套动画系统（GSAP/Framer Motion/自研），生成代码可能风格不一致

所以我的经验是：生成交互可以当作“灵感与起步”，但你必须把它纳入工程规范，否则它会成为后续维护的雷。

3）前端的角色在变：从“手写代码”到“编排 + 审核 + 工程化”

以前你是“写页面的人”；现在更像：

• 编排者：把需求拆成模型能稳定完成的子任务（布局、组件、数据、交互、状态）
• 审核者：检查生成代码的边界条件、可维护性、依赖合理性、类型安全
• 工程化的人：把临时 demo 变成模块化组件、可测试、可迭代、可观测的系统

一句话生成出来的东西，往往是“看起来对”，但不是“长期对”。前端的价值在于让它长期对。

4）一个很实用的提示词套路：让模型输出“可合并的代码”

我最喜欢的做法是让模型按约束输出，这样更容易合进项目：

请生成一个 Nuxt 页面组件：
- 不要引入新依赖
- 使用 TypeScript
- 把交互逻辑封装成 composable（useXxx）
- 支持 prefers-reduced-motion
- 事件监听要在 onMounted 注册，onBeforeUnmount 清理
- 不要写任何 window 相关逻辑在 SSR 阶段执行

你会发现，模型并不怕复杂约束，反而越约束越稳定，越像“能进仓库的代码”。

5）结论：前端没完蛋，变化的是“门槛与分工”

当“一句话生成网站”成为常态，人人都能做出一个像样页面，这会让人误以为前端不重要了。但现实是：产品上线后面临的不是“页面长啥样”，而是：

• 性能、稳定性、监控
• 安全、权限、数据一致性
• SEO、可访问性、国际化
• 组件体系、设计系统、规范与测试
• 版本迭代时的成本

这些东西不会因为一句话而消失，反而会因为生成速度变快而更容易被忽视。
所以我的感受是：前端不但没完蛋，它只是从“拼手速的页面工”转向“更像工程师”的位置。AI 把起点拉低了，但把终点拉高了。你可以更快到达一座城市的门口，但要住得舒服，还是得有人把水电煤、道路、规则和维护体系都铺好。

而我们做的，就是把那些“十分钟的奇迹”，变成“十个月仍然可靠”。