【早说】生成式 AI 在前端领域的局限性探讨

前言

比起后端稳定的运行环境，前端是一个由设备、浏览器和人类行为交织而成的 “移动目标”。从陈旧的训练数据到视觉感知力的缺失，本文深度拆解了当前 LLM 在处理 CSS 与 bespoke 交互设计时力不从心的底层逻辑。

本文来自 5 分钟新知精选，今日前端早读课文章由 @Adam Argyle 分享，@飘飘编译。作者分享的还是比较犀利直击的，有兴趣蛮看看；那天我在朋友圈还说这难道是要回到切图仔时代，背后的也有一定的背景。

译文从这开始～～

AI 不过是个满嘴恭维、囫囵吞枣读了一堆教程的冒牌码农。你得到的，无非是它根据训练时见过的模式拼凑出的概率性猜测。那它训练了什么呢？陈年旧解、毫无新意的 UI 套路，外加一堆注了水的垃圾。

下面我就要好好吐槽一番 —— 它既好用，又拉胯。

可圈可点之处

AI 钟情于乏味之事，它在平庸里如鱼得水。

想要一套毫无创意、俗到掉渣的 UI？它包你满意 😜

• 搭建骨架：把它见过的套路原封不动吐出来，搞定。
• 设计令牌（Tokens）：迁移也好，梳理也罢，这种琐碎无聊的活儿，它当早餐吃。
• 罗列功能：泛泛而谈的清单，✅
• 睁眼说瞎话：一本正经地端出一盘烂货，塞给你一段代码，再拍拍它那双数字化的手，告诉你 “活儿干完了”。呵，它才没干完。

换句话说：只要是老掉牙的套路，AI 就能帮你把复制粘贴的速度再拉上一个档次。而编程这行，很多时候还真就是这么回事。说实话，这方面它确实给了我不少助力。

【早说】理解力负债——AI生成代码的隐性成本

惨不忍睹之处

像素级的精致？量身定制的方案？—— 它们是何方神圣？

你一旦踏出那条 “千篇一律” 的康庄大道，它立刻一头栽进泥里。

• 定制方案与专属交互：试试让它写点滚动驱动的动画，或者别出心裁的微交互。它能给你编造出一套自 IE6 退场后就再没存在过的 CSS 语法。
• 布局与间距：想让它预判页面的内在 / 外在属性？它连基本算术都玩不转，又怎么指望它算得清那些瞬息万变的动态尺寸。至于间距？哈，你以为对称是基本盘，它偏偏连这点数学都搞砸。
• 复合状态：想让它精准定位到某个复杂组件状态的改动位置？它当场哭给你看。
• 无障碍设计：它的策略就是朝墙上乱甩 aria-hidden="true"，指望哪块能粘住。
• 性能优化：除非你指名道姓要某套所谓 “独家秘方” 的性能方案，否则它只会端出最臃肿、最卡顿的那一版。
• 测试：写出好测试？不行。写出一堆测试？没问题。

而最精彩的一幕是什么？组件越复杂，它在前端上的表现就越迟钝、越愚蠢。真是匪夷所思 —— 它能一击命中，生成一个像模像样的前端设计或组件，紧接着却在一个后续小要求上直接卡壳。这恰恰道破了它的真本事所在。

【第3688期】七大AI策略，终结开发者入职困局

症结何在？

1. 它是在故纸堆里练出来的

它缺乏新鲜的训练素材。

它对标准模板的依赖近乎病态 —— 没办法，整个互联网充斥的就是这些玩意儿。现代 CSS？它几乎一无所知。

2. 它真的看不见

它是个语言模型，不是渲染引擎！

它在数学上的拉胯是出了名的，你就算把截图甩到它脸上，也几乎无济于事。它不过是在黑暗里瞎捅刀子。

于是就有了下面这出经典的 UI 小剧场：

AI：”大功告成！为您呈上这份精雕细琢的 UI。”我：”图标那儿开了个大天窗，把缺失的图标补上。”AI：”您说得太对了。这就为您修复。”

3. 它不懂我们 “为什么” 这么做

它参不透我们架构决策背后的那个 “为什么”。

SDD（规范驱动开发）、BDD（行为驱动开发）或状态机或许能给它指点迷津，可惜这些方法论与之配套的优质范例，压根就没怎么进过模型的训练集。

我们无非是在要求一个庞大的文本预测器当场搭建新的逻辑桥梁。我们能把它推到那一步，但要考虑的东西实在太多，非得一条一条掰开揉碎了讲明白，它才能开始搭起我们想要的那些连接。

【早说】命令行才是AI工具的未来

4. 对运行环境毫无掌控

它管不着自己写的代码住在哪儿。

它能写出一手让人又爱又恨的 Rust、TypeScript 或 Python—— 但这些语言有个得天独厚的优势：它们的运行环境是可预测的，甚至可以锁版本（比如钉死在 v14.4！）。

HTML 和 CSS 可没这待遇。你锁不住浏览器类型、锁不住窗口尺寸、锁不住浏览器版本、锁不住用户的输入方式（键盘、鼠标、触屏、语音）、更锁不住用户的个性化偏好…… 这是一锅彻头彻尾的环境乱炖。

类似的清单还长着呢 —— 渲染引擎在敲定最终输出前，要同时杂耍般处理的各种场景、上下文和变量，一个比一个多。LLM 对这些毫无掌控，于是干脆视而不见，除非你把它们摆到它眼前。

就拿逻辑属性（logical properties）来说吧，你得专门提示它才肯用。这本该是 LLM 输出 CSS 的基本功，可偏偏不是。更气人的是，哪怕你明确要求、甚至把文档原原本本喂给它，结果照样可能翻车。

HTML 和 CSS 最终落脚的那片土地，本就是一团混沌。那是浏览器 —— 千百种版本、千百种渲染方式、千百种交互姿态、千百种崩坏路径。

这是一个不断变化的目标，而 LLM 最不擅长的，恰恰就是打移动靶。

该死的人类啊

我们自己就是一场 LLM 的组合爆炸。

我们是最难以捉摸的那种靶子。我们朝三暮四，我们切换视口，我们更改主题偏好，我们更换设备，我们更换浏览器，我们升级浏览器版本，我们切换输入方式 —— 我们什么都变。

我们不是一个静止的靶子。我们不是一种可以被学会的模式。

人类身上确实存在一条由行为、偏好与期望汇成的 “主流河道”，在那里 LLM 的确能派上大用场；可要论我们 “全部潜能” 所构成的那张矩阵 —— 在可见的未来里，它仍将持续引爆 LLM 的输出模式。至少我是这么看的。

【第3682期】别让AI替你思考：苏格拉底提示法，把AI变成你的思考搭档

这篇的评论也很激烈

开发者们针对 AI 在前端领域的表现展开了深度辩论，主要观点可以归纳为以下几类：

1. 赞同派：AI 确实缺乏 “灵魂” 与 “经验”

许多资深开发者对作者的观点表示强烈共鸣：

• 缺乏意图与动机：fry69 认为，模型虽然掌握了机械的逻辑，但缺乏 “生命过程”—— 即那些由无数次失败积累而来的设计直觉、动机和经验。
• 解决人机矛盾：claudio. 指出，前端本质是在为 “人类问题” 编写 UX（用户体验）方案，而这类问题并没有像后端代码那样的标准 “调试器”。
• 训练数据的局限：Alfonso Martínez de Lizarrondo 毒舌地提到，互联网上 43% 的内容是 WordPress，这其中充斥着大量垃圾 HTML 代码，AI 学习这些数据自然难以产出高质量的前端代码。

2. 实用派：把它当成 “脚手架” 而非 “代笔”

这部分开发者认为 AI 的价值取决于你怎么用：

• 脚手架 vs 定制：Katrin K. 将 AI 比作 Bootstrap。如果你只是需要一个快速原型或不介意平庸的设计，AI 非常棒；但一旦涉及定制化，AI 就会变成阻碍。
• “Vibe Coding”（氛围编程）：Andreas Møller 认为，如果你想让 AI 直接搞定整个前端，你会打架打得很辛苦，但如果你只是让它搭建一个基础框架然后自己微调，它非常高效。

3. 反击派：AI 已经在进步，甚至能教 “老鸟”

也有一些开发者分享了积极的、甚至是颠覆性的体验：

• 老兵的新技巧：Danny Engelman（一位自 1990 年就开始从业的老开发者）表示，通过训练自己的 “技能文件（Skills files）”，他每天进行 4 小时的 “氛围编程”。他甚至发现 AI 能通过截图分析 SVG 架构图，并指出他遗漏的细节。
• 关于视觉能力的争议：针对作者说 AI “看不见”，Danny 和 fry69 都指出现在的多模态模型已经具备了相当强的视觉理解力，关键在于如何进行 “上下文工程（Context engineering）”。

4. 独特的讽刺与担忧

• 过度测试的冷笑话：Stephanie Tuerk 讽刺地建议，既然 AI 生成的代码不可靠，那就让它再生成 10 万个端到端测试（e2e tests）来检查自己的工作，以此来 “拯救” 我们。
• 审美的丧失：Anthony Whitford 提出了一个终极难题：“你该如何向 AI 定义并沟通什么是‘品味（Taste）’？”

讨论总结：

评论区的核心矛盾点在于：你是把 AI 看作一个试图替代你的 “初级开发者”，还是一个受你调教的 “高级工具”？ 大多数开发者承认 AI 在处理 CSS 复杂矩阵、响应式环境和人类多变性方面确实表现拙劣，但也有人通过深度定制化的 Prompt 和工作流，开始在前端开发中挖掘出 AI 的巨大潜力。

关于本文译者：@飘飘作者：@Adam Argyle原文：https://nerdy.dev/why-ai-sucks-at-front-end