前端老兵让位：我如何零代码1天上线产品页

昨天，一位写了十几年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更有说服力。这