AI 在泛前端领域的思考和实践

原创于 2025-12-11 20:01:27 发布 · 298 阅读

CC 4.0 BY-SA版权

文章标签：

在大模型、AI Agent、Vibe Coding 与 Spec Coding 飞速发展的浪潮中，AI 与泛前端的融合正引发行业的深度思考：AI 究竟会 “替代” 传统开发模式，还是会推动一场效率与体验的全新 “革命”？它又将为泛前端领域带来哪些底层变革？

本文是《AI 在泛前端领域的思考和实践》系列的上篇，将围绕 “AI 浪潮下的泛前端变革与应对” 展开深度探讨 —— 从泛前端的日常工作切入，拆解 AI 带来的关键影响。系列下篇则会聚焦前端高频场景 “UI2Code”，用具体实践告诉你：AI 技术如何落地到设计稿转代码的全流程，为前端开发提供实实在在的效率助力。

现在，请大家先和我们一起进入上篇的核心思考～

AI 时代， “图形用户界面”是必须的吗？

目前，泛前端的核心工作仍集中在“图形用户界面”的开发上。那么，在 AI 时代，“图形用户界面”将迎来哪些可能的变化？

在人机交互中，“图形用户界面” 的作用是

什么？

用户界面（User Interface，简称 UI）在人机交互领域，主要工作在如下图所示的 “Input-Output Loop”中。输入端，是人类通过“手”、“声音”等方式，借助键盘、鼠标等硬件设备将信息输入系统。输出端，是系统侧通过显示器、音箱等设备将信息反馈给人类。

图片来源：维基百科

简单来说，在人机交互场景中，用户界面（UI）是人与机器（系统）的交互载体。其核心目的是让人类能够有效操作和控制机器（系统），同时机器（系统）能反馈给人类，助力人类决策过程的关键信息。

当用户界面进化到图形用户界面（Graphical User Interface，简称 GUI）时代，它允许用户通过图形图标与“系统”进行交互。“图形用户界面指采用图形方式显示的计算机操作的用户界面。与早期计算机使用的命令行界面（Command Line Interface，简称 CLI）相比，除了降低用户的操作负担之外，对于新用户而言，图形界面在视觉上更易于接受，学习成本大幅下降，也让电脑的大众化得以实现。”——维基百科

基于此，我们可将用户界面在“Input-Output Loop”中的作用提炼为三大核心：

人机间信息的“传递者”
a.负责用户诉求、信息及行为数据的录入
b.实现系统状态的直观呈现
系统功能的“翻译者”
a.衔接技术与用户：通过可视化设计，将技术功能转化为用户可感知的服务
b.明确功能优先级：借助元素的大小、颜色、位置等设计，突出核心功能（如社交 APP 的 “发布” 按钮），弱化次要功能（如设置入口），帮助用户快速定位需求
用户体验的“承载者”

a.交互层面：通过流程引导，降低操作复杂度

b.界面层面：以美观、统一的 UI 设计，提升用户的愉悦感

大语言模型对用户界面的影响

我们再来看看大语言模型带来的变化有哪些？

简单的理解，大模型具备三项能力：

1. 自然语言处理：人类可以通过自然语言与机器（系统）进行交流；

2. 人工智能：具备一定的决策、规划、监督、学习等智能能力；

3. 工具调用：能够自主判断并调用工具。

将这三项能力映射到 GUI 上，会有哪些变化呢？

如上图所示，我们可以推断出：

自然语言将成为“用户界面控件”的核心，取代传统定制化的“用户动线”。系统通过大模型调度、组装各种功能界面，向用户展示信息；
传统图形用户界面可能会被拆解为独立功能模块，而不是以一套整体的方式交付给用户。

以上两点变化其实有个专有名词就是“自然语言用户界面（ LUI 或 NLUI ）”。

自然语言用户界面：LUI （Language User Interface）或 NLUI（Nature Language User Interface），是使用自然语言充当用户界面控件，用于在软件应用程序中创建、选择和修改数据。

自然语言用户界面（LUI 或 NLUI）是一种计算机人机界面，其中动词、短语和从句等语言现象充当用户界面控件，用于在软件应用程序中创建、选择和修改数据。在界面设计中，自然语言界面因其速度和易用性而受到追捧，但大多数都面临着理解各种模糊输入的挑战。自然语言界面是自然语言处理和计算语言学领域的一个活跃研究领域。直观的通用自然语言界面是语义网的积极目标之一。文本界面在不同程度上是 “自然的”。许多形式化（非自然）编程语言融入了人类自然语言的习惯用法。同样，传统的关键字搜索引擎可以被描述为一种 “浅层” 的自然语言用户界面。——维基百科

在滴滴和行业内，已有不少相关的实践，如：

滴滴企业级差旅助手

差旅助手可以直接对接用户的出差计划。用户点击一键规划后。AI 会跟进用户的出差计划，查询匹配的行程的机票或高铁。

图片来源：滴滴企业级差旅助手截图

某旅游平台问一问

用户输入出行需求（如 “去三亚玩怎么安排比较好？”），AI 会快速分析需求，提供机票预订建议、机场选择指南、天气提醒等全方位信息，并生成多套方案供用户对比选择。

图片来源：某旅游平台问一问截图

推论一：用户界面将从 GUI 向 LUI 迁移

基于上面这些内容，我们可以得出一个推论：“用户界面将逐步从 GUI 向 LUI 迁移”。在这一模式下：

1. 自然语言作为现有用户界面的中枢，由大模型调度、组装各种功能用户界面，并将信息展示给用户；

2.用户界面可能会被拆解为独立功能模块，而不是以页面的形式呈现；

3. GUI 和 LUI 将长期并存，共同满足不同场景下的用户需求。

这种迁移的核心价值，在于彻底将用户从繁杂的操作流程中解放出来，使其无需纠结于具体操作步骤，转而专注于自身核心需求。同时企业会去尝试重构开发逻辑、提升运营效率并打破现有的商业边界。进而影响到包括泛前端在内的整个技术领域的架构和工作内容。不妨试想：若每个用户都能拥有一位专属且可靠的私人助手，还需要费心区分哪个 App 打车、哪个 App 订机票、哪个 App 订酒店吗？

更深层次的改变，通用 AI Agent 带来的变化

“2024 年是生成式 AI（Gen AI）元年，2025 年是 AI Agent 元年”，相信很多人听说过这句话，也实际搭建过自己的Agent。这里我们不去聊通用 AI Agent 是如何工作的，着重看一下这种 Agent 是如何处理网页的。

Playwright 是微软开源的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器。其也在前不久开源了的它的 MCP 方案。借助这个 MCP 我们可以实际体验一下 Agent 是如何操作网页的。（只是举例 Agent 如何操作网页，所以具体Playwright MCP 的安装过程不做赘述。）

以下以 AI 编辑器 Trae CN 为例，在MCP中安装好 Playwright。

然后在对话中选择，@Builder with MCP 模式。

输入你的Prompt，“请在浏览器中打开某搜索平台，搜索一下关于 AI Agent 的最新趋势，找到三篇最新的、最权威的新闻报道，打开并进行总结。将总结的内容使用 HTML 绘制成图形化的展示。”。

接下来就是等待结果。Trae CN 通过 Playwright MCP 打开浏览器访问某搜索平台，搜索框中输入"AI Agent 最新趋势"，然后点击搜索按钮进行搜索。

自动向下滚动页面来查看完整的搜索结果，自动点击"资讯"标签，专门查看新闻类的搜索结果。

从分析搜索结果中自行判断。找出符合要求的三篇文章。

在新标签页中打开文章，并进行阅读和信息收集。

对已获得的三篇文章的内容进行总结，自动创建 HTML 文件，生成完成后自动打开。

HTML 部分源码

HTML 部分效果

任务执行全流程中，Agent 展现出强大的自主闭环能力：能够自主启动浏览器、访问并操控网页、处理页面内容、编写且运行代码，还能跨多个信息来源完成数据整合。全程无需用户额外干预，即可独立完成复杂任务闭环。

收益：相较于传统纯人工协作模式，同类需求需业务、产品、设计、前端 4 个角色协同投入一周方可完成，而借助 Agent，仅需一句指令便能快速落地。

放眼当下，AI Agent 的形态虽多 —— 涵盖商业化产品、开源框架、开发平台，以及企业或个人部署的私有版本 —— 核心技术路径也不尽相同，但有一点高度一致：在处理网页时，它们完全无需人工参与，已达成全流程自动化。

AI Agent 带来的疑问

这不禁引发出关键思考：若 AI Agent 是明确的未来发展趋势，既能自主访问页面，又能自主构建最终呈现界面，那么企业是否还需要自行开发网页或用户界面？是否直接提供 API ，才是更高效的服务交付方式？

推论二：企业提供服务将从提供网页向提供 API（MCP Server）迁移

基于成本与效率的考量，这里我们可以得到第二个推论：如果未来大量流量来自于通用 AI Agent 而非人类用户，那么面向人类的用户界面重要性将会下降。同时，API 在系统间信息交互中的效率优势显著。因此企业提供服务的方式将逐步从“提供网页（用户界面）”向“提供 API（MCP Server）迁移”，以实现更灵活、可扩展的系统集成。

AI 时代，专业的泛前端研发岗是必须的吗？

泛前端的专业壁垒是什么？

泛前端的角色定位和指标体系

如下图，“角色定位”这一排列体现了产研团队在 “理解用户想要什么” 到 “用技术实现什么” 的完整链路中，各角色对“用户体验”和“技术实现”的关注侧重。前端开发处于中间，所以这两个方面都是必须关注的。基于这个角色定位，有一系列的技术指标可用于评判目前的工作成果。

其中以“性能体验”这个指标来说，我们可以通过和后端岗位、设计岗位进行对比，来管中窥豹一下前端的专业壁垒是什么样的。

性能层面：

前端性能：聚焦于用户直接感知的交互体验，核心是 “页面响应速度” 和 “交互流畅度”。用户对前端性能的感受是即时的（如：点击按钮后是否卡顿、页面加载是否缓慢等）；
后端性能：聚焦系统处理业务逻辑的效率，核心是 “请求处理速度” 和 “服务器容量”。后端性能的优劣通常不直接暴露给用户，但会间接影响前端体验（如：接口响应慢导致页面加载延迟等）。

体验层面：

设计的核心目标：构建 “体验蓝图”，确保体验的合理性、可用性和情感共鸣；
设计通过研究用户需求、梳理用户流程、设计界面逻辑，回答的是 “用户需要什么体验”、“什么样的体验能让用户高效、愉悦地完成目标”。如：设计一个购物 APP 的结算流程时，设计需要确定 “是否需要默认勾选优惠券”“地址选择页的交互顺序”，本质是在定义 “体验的最优路径”。
前端的核心目标：落地 “体验蓝图”，确保体验的一致性、流畅性和稳定性；

前端通过代码将设计方案转化为可交互的产品，回答的是 “如何让设计的体验在实际使用中不打折”、“如何避免技术问题破坏用户体验”。如：结算流程中，前端需要保证 “勾选优惠券后价格实时更新无延迟”、“地址选择时滚动流畅不卡顿”，本质是保障 “体验的实际呈现符合设计预期”。

在性能体验上，页面加载速度应该是最能体现前端专业性的一个指标，与之相关的文章非常多。这个问题是涉及业务形态、用户流程、技术架构和运行环境等多个层面的复杂问题。尤其是在企业级应用（大型复杂产品）上，复杂性更突出。相信做过性能优化的朋友会有很深的感触。以我们当前的实践经验，AI 可以帮助程序员分析一些小问题并给出一些解法建议，但这些解法不一定正确。至少类似“性能优化”这类复杂问题，专业前端是有很强的专业壁垒的。AI 可作为辅助工具，但无法完全替代专业前端的工作。

“AI 会取代程序员”，到底“取代”的是什么？

这里引用凯文 · 凯利新书《2049——未来10000天的可能》里面的一段话来说明：

“AI 与人类最大的区别是创造力的不同。”

“我把创造力分为小写的创造力（creativity）和大写的创造力（CREATIVITY）。两者最大的不同是前者在很大程度上体现在复制和应用层面，更多地涉及在已知的世界用已知的方法更有效地完成任务，后者则聚焦在突破与创新层面，更多地涉及一种在未知的世界中努力探索、寻求创新的过程。”

“之所以说 AI 会取代很多人类的工作，比如插画师、低阶的程序员，正是因为 AI 正在迅速获得这些领域中小写的创造力，即在实际生活中广泛应用的创造力。”

推论三：程序员需要从“复制和应用”向“突破与创新”迁移

基于上面的内容，我们可以得到第三个推论：在 AI 浪潮下，程序员的核心能力需从“复制和应用”向“突破与创新”迁移，借助大模型拓展自己的能力边界，创造独特价值。

泛前端程序员要如何跟上 AI 浪潮？

泛前端领域历经多轮技术浪潮：Ajax、智能机、H5、NodeJS、跨端技术、小程序、视频直播等均在不同时期引领方向。而近年，跨端技术与小程序的影响尤为深远，深刻改变了行业生态：

就技术方向而言，跨端技术使其工作重心从 Native 页面转向跨端页面；
就市场环境而言，跨端技术减少了 Native 需求，小程序则让企业不再执着于开发独立 App，进一步压缩 Native 空间；
对开发者的能力模型而言，跨端技术模糊了客户端与前端的壁垒，通过 JS 实现了泛前端技术的统一。

回顾一下前面提到的三个迁移：

用户界面将从 GUI 向 LUI 迁移
企业提供服务将从提供网页向提供 API（MCP Server）迁移
程序员的能力需要从“复制和应用”向“突破与创新”迁移

这三个迁移分别针对的是泛前端的技术方向、市场环境和能力模型。要如何跟上 AI 浪潮，个人理解也需要从这三个方向入手。

提升个人能力

大模型基础知识

当前大模型处于爆发初期，在“如何使用大模型更好的解决问题”的探索中，提示词工程（Prompt Engineering）、上下文工程（Context Engineering）、氛围编程（Vibe Coding）、Spec Coding 等概念层出不穷。这从侧面说明，大模型的使用仍处于摸索阶段，尚未形成统一定式或规范。类似地，Javascript 于 1995 年左右诞生时，仅为了解决网页静态化问题、弥补缺乏浏览器加载网页后的缺乏动态行为能力的一种“胶水语言”。如今到 2025 年，30 年发展后，JS 已经能支撑多场景的开发，具备强大的全栈能力。这一演变也暗示，大模型同样需要时间沉淀，其潜力需要通过持续探索逐步释放。

大模型的出现，近乎圆了历代程序员“自然语言编程”的核心梦想。之所以说 “近乎”，原因有二：

从输入端看：自然语言本身灵活度高、缺乏统一规范，这给精准转化带来了天然挑战；
从输出端看：大模型虽能力强大，却难以规避随机性与幻觉两大问题。

正是这两点局限，导致不同人对大模型的理解和使用方式不同，最终效果也会天差地别。因此，面对大模型这项新技术，我们仍需像应对过往每一次技术变革那样，通过持续学习与实践，才能真正驾驭它。

以下是我总结的大模型学习清单，供大家参考：

原理：大语言模型的发展脉络（从语言模型到神经网络，再到大语言模型）
理论：AI Agent 的演进（从 Chatbot 到 AI 助手，以及如何搭建自己的 AI Agent）
理论：提示词工程（Prompt Engineering）
理论：上下文工程（Context Engineering）
实践：使用 AI 编辑器和 AI 编程（Vibe Coding、Spec Coding）提效日常工作（场景包括但不限于编码）
实践：使用 Coze、Dify、n8n 搭建私有 AI Agent
实践：训练自己的专属模型，深化对大模型运行逻辑的理解

思维能力

“Code is cheap, show me your thinking” 这句流行语，精准戳中了当下技术环境的能力需求核心：大模型浪潮下，个人能力模型从 “复制与应用” 向 “突破与创新” 的迁移，早已不是选择而是必然，而卓越的思考力，正是这场迁移的核心通行证。

代码编写门槛的降低，早已是肉眼可见的趋势。过去需反复调试的语法、死记硬背的 API、手动搭建的基础框架，如今借助 AI 辅助工具，仅需几句提示词就能快速生成。这意味着，单纯 “会写代码”“能套用方案” 的能力，正在逐渐失去稀缺性；重复劳动式的 “复制与应用”，也很难再成为个人竞争力的护城河。反而是那些藏在代码背后的深度思考，如：面对需求时，能先拆解核心痛点而非直接套模板；设计方案时，能预判潜在风险而非仅满足当下功能；遇到问题时，能穿透表面现象找到根本原因 —— 这些无法被工具替代的 “思考增量”，才是彰显价值、驱动个人与项目向前的关键。

这种思考能力的价值，在提示词工程、Vibe Coding 等新兴实践中体现得更为直接。以提示词工程为例，它看似是 “写提示”，本质却是对需求的深度拆解与逻辑梳理 —— 需先明确 “要让 AI 实现什么目标”、“分几步引导更精准”、“如何规避 AI 的幻觉风险”，这些环节考验的不是代码能力，而是 “定义问题、拆解任务、设计路径” 的思考逻辑。再看 Vibe Coding，它强调通过整体语境与交互节奏提升开发效率，这背后也需要开发者先理解 “当前场景的核心需求是什么”“什么样的交互逻辑更贴合用户习惯”，而非机械地堆砌功能。可以说，过往在思维能力上的训练，比如逻辑拆解、问题分析、场景预判，恰恰为这些新兴实践提供了底层支撑，帮助我们能更快抓住核心、少走弯路，真正把工具的价值用透。

归根结底，技术工具可以替代重复劳动，却无法替代深度思考；代码可以被快速生成，却需要思考来赋予它 “解决问题、创造价值” 的灵魂。对从业者而言，与其纠结于 “代码会不会被 AI 取代”，不如把更多精力放在锤炼思考力上 —— 毕竟，未来的技术竞争，本质上是 “思考力” 的竞争。

升级技术架构

GUI 向 LUI 迁移的过程中，需要面对两大核心变化，这也是我们必须主动调整、积极应对的关键原因。

一方面，现有项目的架构升级是绕不开的基础工作。GUI 时代的架构设计多围绕 “可视化交互” 展开，核心是界面布局、按钮逻辑、页面跳转；而 LUI 以 “自然语言交互” 为核心，需底层架构支持对话上下文理解、意图识别、多轮交互逻辑，甚至要整合大模型的语义解析能力。这意味着现有项目不能简单修修补补，而是需要从数据流转、功能模块划分、交互逻辑设计等层面进行重构，才能适配 LUI 的交互模式，避免出现 “对话断层”、“意图误判” 等问题。

另一方面，“编写功能卡片” 将逐渐成为多数人在 LUI 生态下的日常工作。在 GUI 模式下，开发者更多是绘制界面、编写点击事件；而 LUI 的核心是通过 “功能卡片” 承载具体服务 —— 比如查询天气的卡片、生成报告的卡片、处理订单的卡片，用户通过自然语言触发卡片，卡片再调用后端能力完成任务。这要求相关人员不仅要懂功能逻辑，还要理解 LUI 的交互场景：比如卡片如何适配不同的对话语境、如何用简洁的语言反馈结果、如何兼容多轮对话中的参数补充，这些都将成为日常工作的核心内容。

正是因为这两大变化（既涉及底层架构的 “硬调整”，又关系日常工作模式的 “软适配”），所以我们不能被动等待，而要主动学习 LUI 的交互设计逻辑、熟悉功能卡片的开发规范、掌握架构升级的关键技术点，通过提前布局与持续实践，才能在这次迁移中抢占先机，更好地适应新的技术生态。

下图是我们在探讨前端架构从 GUI 转向 LUI 的升级中的一些思考，主要分为“架构设计差异”与“架构迁移”两部分：

架构设计差异

架构迁移

适应新市场环境

“寇可往，我亦可往” ，电视剧《汉武大帝》中的这句话，恰好道破了当下大模型浪潮中泛前端领域的破局逻辑 —— 大模型的爆发没有削弱泛前端的价值，反而打破了技术壁垒，让所有人站在了同一起跑线，泛前端从业者完全有能力主动掌控 “无页面化” 的未来。

从技术本质来看，大模型带来的 “无页面化” 核心是通过 AI Agent 实现 “需求 - 服务” 的直接对接，而这背后离不开对用户意图的精准理解、对服务逻辑的高效串联，以及对交互体验的细腻把控。这些能力，恰恰是泛前端领域深耕多年的核心积累：过往在 GUI 时代，泛前端从业者需要通过界面布局、交互设计传递服务价值；如今转向 LUI 与 AI Agent 驱动的 “无页面化”，只是将 “通过界面承载体验” 的能力，转化为 “通过 Agent 定义交互逻辑” 的能力 —— 比如如何让 AI Agent 精准识别用户需求、如何设计 Agent 调用服务的流程、如何优化无页面场景下的反馈体验，这些都与泛前端长期积累的 “以用户为中心” 的设计思维、“串联多端服务” 的技术逻辑高度契合。

再看行业竞争格局，此前其他领域尝试通过 AI Agent 实现无页面化，更多是依托大模型的通用能力进行探索，并未形成专属的技术壁垒。而泛前端从业者自带 “懂交互、懂服务串联、懂用户体验” 的基因，在打造 AI Agent 驱动的无页面方案时，反而更具天然优势，如：在开发 “无页面化” 的服务场景时，泛前端能更快理清 “用户需求 - Agent 交互逻辑 - 后端 API 调用” 的链路，更精准地规避无页面场景下的体验痛点（如交互断层、反馈不及时），甚至能将过往跨端、组件化的技术经验，复用到 AI Agent 的功能模块设计中，让无页面方案更稳定、更易扩展。

所以，大模型带来的 “无页面化” 浪潮，并非是对泛前端的替代，而是为泛前端提供了新的技术出口。别人能借 AI Agent 实现无页面化，泛前端不仅能做到，更能凭借自身在交互设计、服务串联上的深厚积累，做得更贴合用户需求、更符合行业场景 —— 毕竟，“无页面” 不代表 “无体验”，而把控体验的核心能力，始终握在泛前端手中。

结语

以上内容为《AI 在泛前端领域的思考和实践 - 上篇》，全文以 “AI 与泛前端融合” 为核心，围绕 “思考” 展开深度探讨：从人机交互的本质出发，剖析 GUI 向 LUI 迁移的界面变革，梳理企业服务从网页向 API 转型的趋势，明确程序员从 “复制应用” 向 “突破创新” 的能力升级方向，并给出 “提升个人能力、升级技术架构、适应新市场环境” 的应对路径，为泛前端从业者厘清 AI 浪潮下的变革逻辑。

后续下篇将聚焦前端高频场景 “UI2Code”（设计稿转代码），通过工具对比、技术拆解与实践案例，具体展现 AI 如何落地设计稿转代码全流程，为前端开发提供实实在在的效率助力。