昨天,一位写了十几年CSS的前端工程师,把键盘推到了一边。他上线了一个完整的落地页,一行UI代码都没写。

这不是"我不会编程,AI救了我"的故事。恰恰相反——这是"我会,但我选择不"的实验。Elser.ai的创始人用AI设计工具定视觉方向,AI编码助手写代码,Vercel托管,自己只接了后端数据。一天完工。

打开网易新闻 查看精彩图片

为什么是老手更适合这场实验

他开篇就划清了界限:「我写了足够久的CSS,对它有自己的看法。」这句话很重要。新手用AI是弥补能力缺口,老手用AI是重新分配注意力。

对他来说,落地页的瓶颈从来不是CSS——是方向。什么氛围?字体传递什么产品气质?十七种合理布局里选哪个?设计师解决这个,工程师盯着空白page.tsx干瞪眼。

所以实验设计很清晰:AI掌方向,AI掌实现,看看人类还剩什么活。

目标是替换旧的引导站点。旧版毛病很典型:太多产品 mockup,转化率低。他手里有一张确定有效的牌——社区同人图的瀑布流画廊——要围绕它重建页面。

第一次翻车:AI会把错误方向抛光到发亮

第一版prompt很克制:「重建elserip.ai作为elser.ai的引导站。旧版mock太多,点击转化差。保留IP同人图瀑布流——这是钩子。其他全部重做。」

他给的信息就三样:主应用地址、当前站点地址、画廊地址。

AI设计工具回了三张低保真线框图。他选了「Editorial Magazine」——「VOL.01 / ISSUE Δ」报头、手绘标题字、瀑布流作背景。看起来锋利。

这版只活了一轮。

推进到高保真后,杂志感从「编辑气质」滑向了「 literal 杂志」:章节编号、报告式分隔线、报头比产品还重。受众是Z世代动漫粉,不是《纽约客》订户。

他扔了这版。这是AI工作流帖子里没人提的部分:「AI会把错误方向抛光到 oblivion 如果你放任它。」工程师能察觉代码过度设计,设计也需要同样的本能。

方向选择的成本结构

他要求五个截然不同的氛围,相同版块结构。AI设计工具在一张画布上产出:Neon Arcade、Sticker Board、Trading Card、Cinematic Black、Y2K Neo-Tokyo。

选了Y2K Neo-Tokyo。终端字体、故障风片假名、动漫IP瀑布流在巨型FAN-ART.exe标题背后滚动。

然后是多轮细节打磨。他的经验在这里显形:宏观方向改起来便宜,承诺下去昂贵。先花轮次定方向,再打磨。

AI设计工具有个交接按钮。点击后打包成zip,AI编码助手直接吞——完整TSX组件、资源引用、全套东西。丢给AI编码助手:「build this」。

实现层的真相:AI写代码,人类审架构

代码生成不是魔法。AI编码助手吐出能跑的Next.js页面,但细节需要人类把关。动画时序、响应式断点、图片懒加载策略——这些AI能写,但得有人知道该问什么。

他提到自己唯一碰的部分是后端数据接线。这很关键:AI接管了表现层,但数据模型、API契约、业务逻辑仍需要人。不是AI不能写,是这些部分与核心业务耦合太深,交给AI的成本高于收益。

Vercel托管是最后一块拼图。推送即部署,边缘网络自动分发。整个链路里,人类角色从「实现者」退到了「策展人」和「质检员」。

老手的新角色:品味守门人

这个案例的启示在于分工重构。不是「AI取代工程师」,而是「工程师把技能重新投资到更高杠杆的位置」。

他能快速识别杂志方向的错位,因为十几年CSS经验训练了对视觉层级的敏感。他能高效迭代五个方向,因为懂设计系统的约束边界。他能验收AI编码助手的输出,因为知道Next.js的性能陷阱在哪里。

这些能力没有消失,只是从「亲手做」变成了「快速判断」。实验的真正成本不是学习新工具,是克制住自己动手写的冲动。

他提到一个细节:旧版站点「有太多mock」。这是产品落地页的经典病——展示功能而非创造价值。AI帮他快速验证了新叙事:用社区创作的同人图作社会证明,比官方mock更有说服力。这