“够用就好”的 AI 前端所面临的问题
前沿 AI 模型已经能够写出正确的前端代码。让它生成一个落地页，你会得到有效的 HTML、合理的样式重置、无障碍的标记，以及响应式网格。代码能跑。
但“能跑”并不等于“出色”。在默认状态下，AI 产出的是一种一眼可辨的通用样貌：深紫到蓝的渐变、渐变标题文字、所有内容居中、彼此雷同且间距均等的卡片、单一的扁平投影。它称职却令人过目即忘——恰恰是那种会侵蚀品牌而非塑造品牌的产物。
于是我们给自己设定了一个具体的问题：你能否可靠地把一个 AI 智能体从“称职”推向“真正美观、像素级精雕、且响应式无懈可击”——并证明这种差异是真实的，而非一厢情愿？本次调查就是答案。
第一步：搭建知识库
我们从资深工程师会着手的地方入手：把最佳的前端思考汇聚成单一的事实来源。我们挖掘了六门深入的前端课程——717 份讲座文字稿，约合 530 万字符——并将其提炼成一份 600 多行的最佳实践手册，涵盖架构、设计系统、响应式布局、无障碍、语义化、性能和现代 CSS。
随后我们让它与 2024–2025 年的平台现状保持同步：用于支持决策的 Web Platform Baseline、现代 CSS（容器查询、:has()、级联层、OKLCH 颜色、clamp()）、厂商前缀的真实现状、现代浏览器 API（IntersectionObserver、View Transitions、Popover API、原生 <dialog>），以及 Core Web Vitals。
第二步：把知识转化为可复用的智能体技能
供人阅读的手册是有用的，而 AI 智能体能自动应用的能力则是变革性的。因此我们把这份手册打包成七个模块化的智能体技能——每个都被限定在恰当的场景中触发，并按需加载相应的指引：
- CSS 架构——样式重置、设计令牌、rem 策略、BEM、大规模组织 CSS。
- Web 设计系统——排版、颜色、间距、层级，以及“个性优先”的设计。
- 响应式布局——Flexbox、Grid、容器查询、基于 EM 的媒体查询。
- 语义化 HTML 与无障碍——WCAG、键盘与屏幕阅读器支持、无障碍表单。
- 动画与动效——高性能、尊重 reduced-motion 的安全动画与现代效果。
- 现代 CSS 与兼容性——由 Baseline 和特性查询安全把关的 2024–2025 特性。
- 性能与浏览器 API——Core Web Vitals、懒加载、为任务选对 DOM API。
第一个结果出人意料：打平
我们首先以最显而易见的方式评估这些技能——用带技能和不带技能分别完成相同的任务，再对照客观标准检验输出。结果几乎一模一样：带技能约 91%，不带技能约 95%。
这看起来像是失败，实际上却是整个项目中最重要的发现。客观检查衡量的是正确性——它是否使用了 rem 单位、语义化 HTML、viewport 标签——而前沿模型本就能独立做到这一切。我们衡量错了对象。
“正确性已经解决，匠心尚未。称职与卓越的前端之间的差距，并不是模型所欠缺的知识——而是通过迭代所施展的品味，以及拒绝交付通用默认样式的态度。”
突破口：一个像设计师一样工作的技能
设计师从不会直接交付第一版渲染结果。他们会先做出来，看真实的像素，找出薄弱之处，再打磨。知识型技能无法捕捉这一点——于是我们打造了第八个技能，视觉打磨（Visual Polish），它从三个杠杆改变智能体的工作方式：
1. 渲染并迭代的循环
智能体被要求停止“一次成型”。它先构建页面，在真实浏览器中渲染，在每个断点截图，对照质量评分标准审视截图，修复最突出的问题，然后重复。看像素是最大的单一杠杆——在我们的实验中，具备技能的智能体每项任务花了 40–54 个构建与检查的步骤，而无辅助的只有 3–4 个。
2. 内置于技能中的高品味设计系统
与其告诉智能体“使用好的排版”，我们直接提供经过甄选、立场鲜明的默认值：一套 OKLCH 颜色系统、一组编排型字体搭配、一个流式尺度、多层次的立体阴影，以及每个交互状态都已精雕的成品组件。智能体从品味出发，而非临时拼凑出一个通用默认样式。
3. 护栏与“完成的定义”
该技能明确点名要避开的“通用 AI”特征，并定义了一份严格的清单，智能体在宣布工作完成前必须逐项核验：任何断点下都不出现横向溢出、在明暗两种模式下均达到 AA 对比度、精心设计的焦点与悬停状态，以及尊重 reduced-motion 偏好的动效。
这个循环立刻证明了自身价值。在构建该技能自己的参考页面时，渲染步骤捕捉到了代码审查遗漏的两个真实缺陷：一处在没有 JavaScript 时不可见的内容，以及一处在移动端溢出的布局。二者都在任何东西上线之前被修复——正是那种在无人查看渲染结果时会流入生产环境的故障。
证据：一次盲测 A/B 对比
关于“美”的说法很容易提出，也很容易造假，因此我们做了诚实的验证。我们给出两份全新的简报——一个 SaaS 定价区块和一个金融应用落地页——分别交给一个具备技能的智能体和一个无辅助的智能体。我们渲染了全部四个结果，然后把截图交给一个不知道哪个是哪个的独立 AI 评审，标签经过随机化，使其无法进行模式匹配。
结论是决定性的。具备技能的设计在两项任务中都以高置信度胜出，评审还独立地把无辅助的输出识别为“通用 AI 默认样式”。
| 维度（盲评分，1–10） | 带技能 | 无辅助 AI |
|---|---|---|
| 视觉吸引力 | 8 | 5 |
| 排版 | 8 | 5 |
| 颜色与配色 | 8 | 4 |
| 布局与构图 | 8 | 6 |
| 层次与打磨 | 8 | 6 |
| 辨识度 | 9 | 3 |
| 结果 | 具备技能的智能体在两项任务中均胜出——差距“明确，而非勉强” | |
“其中一个经过艺术指导、显然是定制设计——足以放进灵感画板。另一个同时倚仗了两大最典型的通用 AI 特征：深色渐变和渐变标题文字。差距是明确的，而非勉强的。”
为何这很重要
大多数在开发中采用 AI 的团队止步于“它能产出可运行的代码”。本次调查展示了更有价值的下一步：把匠心与流程编码进智能体，使其输出可靠地卓越，而不仅仅是正确——然后用真实的盲测而非凭感觉来证明它。
这些原则远不止适用于 CSS：
- 衡量正确的对象。如果你的评估只检查正确性，一个强大的模型总会显得“够用就好”，而你会彻底错过质量差距。
- 流程胜过知识。最大的收益并非来自更多规则，而是来自迫使智能体对照现实检验自己的成果并迭代。
- 交付品味，而非原则。经过甄选、立场鲜明的默认值，比抽象建议更能提升输出。
- 用盲测来证明。一次独立、盲化的对比，能把“我看着更顺眼”变成证据。
SplatDev 如何应用这一切
SplatDev 为代理机构和软件公司构建 AI 增强的开发系统。我们不只是把 AI 指向你的代码库——我们设计使其输出可信且真正高质量的技能、护栏与验证循环，并对结果加以验证，而非想当然。
- 定制智能体技能，针对你的技术栈、设计系统和标准量身调校。
- 验证循环——将渲染、测试和审查融入 AI 的工作方式，而非事后外挂。
- 基于证据的交付——我们衡量质量，而不只是速度。
迈出下一步
如果你的团队正在用 AI 写代码，却还没能用它交付卓越的代码，那么存在一个可量化的差距需要弥合——也有一套弥合它的方法。
想要能产出你愿意放进作品集、而不仅仅是能编译通过的作品的 AI 吗？
或发送邮件至 [email protected]