AI 时代的前端:不再切图,转向智能交互架构
Copilot、Cline 这些工具出来之后,身边不少写前端的同事开始慌:HTML、CSS、JS 都能生成了,还要我干嘛?
我倒觉得,AI 消灭的不是前端这个岗位,而是'切图仔'和纯粹堆页面的重复劳动。真正的工作重心,正在从实现静态布局,一点点转移到设计动态交互流上。
主要涉及三个方向:智能交互架构、Agent 集成,以及把 AI 体验落到实处的可观测性。
从写死页面到动态对话流
以前接需求,大多数时候是照着设计稿还原。PRD 怎么画、UI 图怎么标,我就怎么写组件结构,然后调个 API 把数据填进去。页面是死的,用户怎么点、走到哪一步,基本上是可以预测的。
但一旦 AI 介入,局面就变了。用户不再只跟着你预设的路径走——他可能用语音、拍张照片,或者打一行自然语言就来发起请求。AI 需要即时理解意图,并生成对应的界面形态。这就要求前端的架构具备动态组装的能力。
可行的做法是:原子化组件 + JSON 渲染引擎。
- 别想着穷举。用户会说 A、B 还是 C,你根本预判不到,所以没必要为每种可能写一个页面。
- 把精力放在提供一套基础 UI 原子组件上,像
Button、Input、Chart,再搭一个能解析 Schema 的渲染引擎。 - 实际流程:用户输入自然语言 → AI 分析意图,输出一个 UI Schema(JSON 结构)→ 前端引擎解析 JSON,动态调用对应的原子组件渲染出来。
比如用户说:'帮我查一下上周的销售数据,画个折线图'。AI 回的不会是一大段 <div> 嵌套,而是类似这样的结构:
{
"type": "line_chart",
"data": [...],
"title": "上周销售趋势"
}
前端引擎拿到这个 JSON,负责把它变成用户能直观看到的图表。这样一来,发版改图的需求量会明显减少。
Agent 集成:前端是契约制定者
在 AI Agent 应用里,前端有一项很容易被忽略的职责:定义工具调用协议(Function Calling Schema)。
很多人想当然地觉得,定义 API、写调用函数是后端的事,前端老老实实接数据就行了。但真到实际开发里,如果前端不去参与定义 Schema,大概率会遇到数据字段对不上、渲染出不来该有的状态的情况。底层原因很简单:只有前端最清楚数据要长成什么样,界面才能正常渲染。
假设一个场景:用户对 AI 说:'订一张明天去北京的机票'。
- 后端 / Agent:负责实际执行
bookFlight(destination, date)。 - 前端的角色:告诉 AI 这个函数怎么被描述。你需要写一份 JSON Schema 给 AI 看。
{
"name":


