2026年7月27日作者：Lei阅读 --

当写界面和看界面的都不再只是人：大模型时代前端的三条战线

前端建立在"界面由人写、给人看"两个隐含假设上，大模型正在同时拆除它们。结合 Design2Code、Agentic Web、Generative UI 等十余篇论文，推演前端各领域与工程化的整改趋势。

2024 年初，斯坦福的 Design2Code 团队做了一个盲评实验：把真实网页和 GPT-4V 从截图生成的网页混在一起，不告诉评审哪个是原版。结果 64% 的情况下，人类评审认为模型生成的那个”设计得更好”（Design2Code, arXiv:2403.03163）。这还不是最值得警惕的部分——最值得警惕的是，这个实验用的是 GPT-4V，一个如今看来已经过时了好几代的模型。

关于”大模型会不会取代前端”，争论大多停留在感觉层面。这篇文章想换一个方式：先把前端拆到它的根本约束，再用一批可查证的论文，推演每一条约束松动之后会发生什么。

先给出全文的一句话主线：传统前端建立在两个隐含假设上——界面由人编写、界面给人看。大模型正在同时侵蚀这两个假设，而前端各领域的整改趋势，都可以从这两个假设的失效中推演出来。

一、先把前端拆到根：两个隐含假设

剥掉框架、脚手架和工具链，前端到底是什么？它是软件系统里负责把数据和能力编译成”人可感知、可操作的表面”的那一层。数据库里的一行订单记录，经过前端，变成一张人眼能扫读、手指能点击的卡片。

整个前端工程化大厦——框架、组件库、构建链、设计系统、测试、无障碍、性能监控——都是围绕两个隐含假设修建的配套设施：

假设 A（生产端）：界面代码由人编写。 所以需要框架帮人管理状态复杂度，组件库帮人复用劳动，类型和 lint 帮人少犯错，文档和脚手架帮人上手。
假设 B（消费端）：界面由人用眼睛看、用手指点。 所以需要像素级还原设计稿，需要响应式布局，需要动画缓动曲线，需要用 Core Web Vitals 度量”人的体感”。

大模型的特殊之处在于：它不是又一个新框架、新范式——那只是在假设内部换工具。它是同时侵蚀两个假设的地基：生产端，代码的作者正在从人变成模型；消费端，界面的读者正在从人扩展到 agent。两端一起松动，界面本身的形态也随之改变——从”开发时编译好的静态制品”滑向”运行时按需生成的响应”。

这就是三条战线：

graph TD
    A["传统前端的两个隐含假设"] --> B["假设 A：界面由人写"]
    A --> C["假设 B：界面给人看"]
    B --> D["战线一：生产端<br/>作者换人"]
    C --> E["战线二：消费端<br/>读者换人"]
    D --> F["战线三：形态端<br/>界面从制品变成生成物"]
    E --> F

下面逐条展开，每一条都挂上论文证据。

二、战线一：作者换人——前端生产从”写”变成”验收”

苦涩的教训在前端重演

Design-to-Code（设计稿转代码）不是新东西。上一代方案——pix2code 一脉的专用小模型，以及工业界的规则引擎方案（如阿里的 imgcook）——靠人工定义的启发式规则和领域专用训练，脆弱且难以泛化：换一种设计风格、嵌套复杂一点，就会崩掉。

端到端的多模态大模型碾压了这条路线。Design2Code（arXiv:2403.03163，NAACL 2025）在 484 个真实网页上做了系统评测：除了导语里的 64%，还有一个更工程化的数字——49% 的模型生成网页被评审判定”可以直接替换原网页部署”。注意这是”从一张截图直接生成完整实现”，没有设计规范、没有组件库、没有上下文。

这条战线的火力还在快速加密。FullFront（arXiv:2505.17399）把评测从”截图转代码”扩展到完整前端工程工作流——页面设计、页面感知理解、代码实现三个阶段；Interaction2Code（arXiv:2411.03292）则测交互逻辑的生成，不只是静态布局。评测基准密集出现本身就是信号：学界已经把”自动化前端工程”当成一个正在逼近的目标，而不是科幻。

用 Sutton 的话说，这是”苦涩的教训”（The Bitter Lesson）在前端领域的具体重演：通用方法加算力，打败领域巧劲。十年间无数团队投入的 D2C 规则引擎，被一个没为前端做过任何特化的通用模型越过了。

vibe coding 与生产力的罗生门

生产端的另一个信号是 vibe coding。2025 年 2 月 2 日 Karpathy 发了那条著名推文——有论文统计过，这份”宣言”只有 185 个词，却催生了一个开发范式（arXiv:2506.23253）：用自然语言描述意图，让模型生成和修改代码，人最小限度地审读。灰色文献综述 arXiv:2510.00328 引用了一个数字：Y Combinator 2025 冬季批次里，25% 的初创公司代码库几乎完全由 AI 写成。

但生产力研究给出的是一组”罗生门”式的矛盾证据，值得放在一起看：

研究	场景	结论
GitHub Copilot 对照实验（arXiv:2302.06590）	95 人，从零实现一个 JS HTTP server（标准化新项目）	用 AI 的组快 55.8%
METR 随机对照试验（2025-07）	16 位资深开源维护者，246 个真实 issue，成熟仓库（平均 2.2 万 star、百万行代码、5 年参与史）	用 AI 反而慢 19%——而开发者事后仍自认为快了 20%

两个实验都是对的，矛盾恰恰是信息量所在：决定 AI 效益的不是”模型强不强”，而是上下文获取成本和验收成本。标准化的新建任务（greenfield），模型几乎不需要上下文，验收也简单，收益巨大；深度耦合的存量系统（brownfield），把上下文喂给模型、再逐行验证它没有破坏隐含约定，成本可能吃掉全部收益。

把这个透镜对准前端，任务谱系立刻清晰：营销页、活动页、后台 CRUD、原型验证——这些结构上接近 greenfield 的工作会最先被吞掉（vibe coding 的主战场恰恰是这些）；而设计规范严苛、历史包袱沉重、跨团队耦合的核心产品界面，人的工作重心会从”写”迁移到”验收”——定义约束、审查产出、兜底责任。

工程化的服务对象变了

这是生产端最深的一层变化：当代码主要由模型产出，前端工程化的每一件工具都要换一个问题来回答——不再是”怎么帮人写得快”，而是”怎么让模型错得少、错了能被立刻抓住”。

类型系统与 lint：从”IDE 里帮人的提示”变成”约束模型的硬护栏”。类型错误、lint 违规是机器可读的信号，能直接接进模型的自动修复回路——它们的价值从辅助人升级为约束生成。
组件库与设计系统：从”给人调用的 API”变成”模型的受控词表”。约束越严格、语义越明确的设计系统，模型生成时越不容易跑飞。设计系统的严格性从”团队洁癖”变成”生成质量的决定因素”。
测试：从”人写断言、覆盖率永远不够”到”模型生成、agent 探索”。已有工作用 LLM 加屏幕流转图自动生成端到端用例（arXiv:2506.02529），Web 测试综述也确认了 AI 驱动方法在工业界的上升趋势（arXiv:2503.05378）。测试的地位从”锦上添花”升级为”验收基础设施”——它是人对模型产出行使验收权的主要工具。
文档：从”给人看的教程”变成”给模型看的规范”。这一点和战线二直接相连。

三、战线二：读者换人——你的下一个”用户”可能没有眼睛

Agent 撞上了为人眼设计的 Web

学界从 2023 年起系统评测”让 agent 替人用网页”：Mind2Web（arXiv:2306.06070，NeurIPS 2023 Spotlight）在 137 个真实网站上收集了 2000 多个任务；WebArena（arXiv:2307.13854，ICLR 2024）搭了自托管的仿真环境、812 个任务用执行正确性打分。

Mind2Web 里有一个不起眼但致命的工程细节：真实网页的原始 HTML 大到根本喂不进 LLM，得先用一个小模型把它过滤一遍。这暴露的不是模型的短板，而是表示的错配——DOM 是为渲染器设计的表示，塞满了布局脚手架和样式噪声；它从来不是为”理解”设计的。用 AI 的第一性原理说：表示决定成败，而 Web 现有的表示是给人眼的，不是给 agent 的。

为 agent 重新设计 Web：一场表示的战争

于是出现了一整条”给 Web 换表示”的研究线：

Agentic Web（arXiv:2507.21206）是这一方向的框架性综述：Web 正在从”以人为中心的信息检索”转向”以 agent 为中心的目标执行”，并提出了”Agent 注意力经济”——当替你比价、订票、下单的是 agent，网站争夺的就不再是人的眼球，而是 agent 的调用。
Towards an Agent-First Web（arXiv:2606.19116）给出了具体的协议提案：agents.txt（机器可读的访问策略，替代 robots.txt 的君子协定）、ATML（面向 agent 的内容标记语言）、同一域名下”人类版 + agent 版”的双层内容架构。
VOIX（arXiv:2511.11287）提出声明式框架，让网站显式声明”我提供哪些能力、哪些操作是安全的”——agent 不必再逆向工程人类 UI。
工业界的对应物是 llms.txt、MCP 等轻量协议。从语义网到 Agentic AI 的历史综述（arXiv:2507.10644）点出了一个关键判断：二十年前语义网失败，“瓶颈不在网络而在节点”——当年的 agent 没有通用推理能力，网站自然没动力提供机器可读接口；现在节点智能了，互操作标准第一次有了真实需求。

最被低估的赢家：无障碍的”复权”

这条战线里有一个我认为被严重低估的推论：无障碍（a11y）的地位将被彻底改写。

前端社区布道语义化 HTML 和无障碍二十年，靠的是道德感和法规压力，长期是需求评审里最先被砍的一项。而 agent 时代，“机器可读性”换了个名字回来了，这一次它直接挂钩收入：你的页面 agent 用不了，订单就流向 agent 用得了的竞品。语义化标签、结构化数据、显式状态、可编程的操作入口——AX（agent experience）和 a11y 在技术上高度同构。为屏幕阅读器做的每一分投入，几乎原封不动地变成为 agent 做的投入。同理，SEO 团队的技能会平移到 GEO（生成式引擎优化）：从”讨好排序算法”变成”讨好推荐你的模型”。

但别高估斜坡的坡度

诚实地说，agent 目前没那么强。An Illusion of Progress? 用 300 个真实任务重测了主流商业 agent，发现多数打不过 2024 年的学术基线，最强系统在困难子集上的成功率不足 50%。所以这是一条三五年的斜坡，不是明年的断崖。但斜坡的方向没有争议，而且协议层的整改（llms.txt、结构化 affordance）成本低、收益单调递增——理性的团队会先把这些便宜的赌注下了。

四、战线三：界面从”制品”变成”生成物”

前两条战线的交汇处，是最激进的一条：界面本身不再预先写好，而是运行时按需生成。

三篇论文勾出了这个方向的轮廓：

Generative Interfaces for Language Models（arXiv:2508.19227）：让 LLM 不再用线性聊天流回应，而是为每个查询即时生成一个交互界面。人类评审在超过 70% 的情况下偏好生成的界面而非对话流。
Generative UI: LLMs are Effective UI Generators（arXiv:2604.09577，Google）：给足工具和恰当提示，现代 LLM 能为几乎任意请求稳定产出高质量定制 UI，且这种能力是涌现的——上一代模型做不到，这一代突然可以。
Generative and Malleable User Interfaces（arXiv:2503.04084）：指出直接生成代码的死穴——终端用户没法迭代修改它——并提出以”任务驱动的数据模型”作为中间表示，让用户用自然语言和直接操作持续重塑界面。

第三篇最有工程嗅觉：它实际上在说，运行时生成的 UI 需要一个比代码更高层的中间表示，否则生成物不可维护、不可修改。这和编译器的历史一模一样——没人手改汇编，大家改源码再重新编译；未来没人手改生成的 JSX，大家改 schema、改约束、改设计系统，再重新生成。

顺着这个逻辑推，前端交付物的定义就变了。如果界面在运行时生成，那么”前端产品”就不再是页面本身，而是让生成不跑飞的那套系统：设计系统（受控词表）、数据 schema（表示）、约束规则（护栏）、质量评估（回路）。同时冒出一批新工程问题：品牌一致性怎么保证、不可信内容会不会通过注入攻击影响 UI 生成、运行时生成的性能预算怎么定、随机生成物怎么做回归测试。

这条战线的胜负手，用 AI 的话说是”目标函数即命运”：谁能把”好界面”定义成可优化的度量，谁就掌握生成式 UI。Design2Code 的自动化指标（视觉相似度 + 元素匹配）是雏形；AgentA/B（arXiv:2504.09723）用 LLM agent 批量仿真用户做 A/B 测试，是评估回路的另一半——连”用户研究”这个环节都开始有了合成版本。

五、一张速查表：各领域怎么整改

把三条战线落到前端各领域，每一行都是”旧核心问题 → 新核心问题”：

领域	旧核心问题（服务人类作者/读者）	新核心问题（服务模型作者、agent 读者）
框架	帮人管理状态与复杂度	成为对模型友好的目标语言：强约束、可预测、易静态验证
构建/工具链	打包快、产物小	生成-验证回路快：类型检查、视觉回归、沙箱预览的秒级反馈
组件库/设计系统	复用人力、统一视觉	模型的受控词表；design tokens 成为机器可读的品牌约束
测试	人写用例，覆盖率焦虑	LLM 生成用例 + agent 探索式测试；测试升格为验收基础设施
无障碍/语义化	道德与合规成本项	AX 与 a11y 同构，机器可读性直接挂钩收入
SEO/增长	讨好排序算法	GEO：讨好做推荐的模型；llms.txt 与 Agent 注意力经济
监控/实验	埋点度量人类行为	区分人类流量与 agent 流量；agent 仿真实验前置于真人实验
文档	给人看的教程	给模型看的规范（llms.txt、机器可读 API 契约）

扫一眼右列会发现共性：每一格都在把”隐性知识”变成”机器可执行的显性约束”。这就是整改的总方向。

六、什么不会变：给怀疑者的四个锚点

预设一位怀疑的读者，此刻的反问大概是：“又一篇 AI 取代论？“四个锚点，说明哪些东西反而更重要了：

验收责任不可外包。 METR 实验里最扎心的不是慢 19%，而是感知偏差：开发者实际慢了 19%，事后却自认为快了 20%——39 个百分点的自我认知误差。这意味着”我感觉 AI 帮到我了”不可信，团队需要度量而非感觉。验收、度量、兜底责任，恰恰是人类工程师不可让渡的部分。
Taste 与产品判断仍是人的。 Design2Code 的 64% 说的是”还原设计 + 通用审美”，不是”知道该给用户做什么”。模型能生成一百个好看的界面，决定哪一个服务于产品目标的仍然是人。
底线约束一条没少。 生成的代码同样要过性能预算、同样有 XSS；运行时生成实际上扩大了注入攻击面而不是缩小。安全和性能工程师的活变多了。
Web 标准与浏览器更重要了。 表示的战争最终要落到标准上。HTML 当年赢在”给人看的通用表示”；下一个十年的问题是”给 agent 的通用表示”由谁定义——ATML、VOIX、MCP 还是某个私有协议。开放标准与私有围墙的老战争会重打一遍，而参战资格属于懂 Web 平台的人。

所以结论不是”前端会死”，而是：“前端 = 写组件的人”这个等式会死。岗位重心从”界面的作者”迁移到”界面生成系统的设计者与验收者”。

七、带走的模型：前端团队的三种新资产

如果只带走一个可复用的心智模型，是这个——大模型时代，前端团队的护城河不再是”写得又快又好”，而是三种可积累的资产：

表示（Representation）：数据 schema、design tokens、affordance 声明。它决定模型和 agent 怎么”看见”你的产品。
约束（Constraints）：类型、lint 规则、设计规范的机器可执行版本。它决定生成不跑飞。
评估（Evaluation）：视觉回归、agent 仿真、UI 质量度量。它决定改进闭环能不能转起来。

眼熟吗？这正是 AI 系统设计的三条顶级原理——表示决定成败、目标函数即命运、反馈闭环——投影到前端工程上的样子。前端没有被大模型杀死，它只是被迫从手工业升级成系统工程。而这恰恰是”工程化”这个词被前端社区喊了二十年、却从未真正兑现的东西：这一次，不兑现不行了。

参考文献

论文（arXiv）

生产端：UI 代码生成与开发范式

消费端：Web Agent 与 Agentic Web

形态端：生成式 UI 与评估