做了五年React，我转型做了AI应用前端

一个做了五年前端开发的程序员，在"设计稿到代码"的AI工具让外包需求暴跌之后，找到了新的战场。

一、五年React，切图仔的天花板

2024年10月，我在一家做SaaS产品的公司当前端工程师，五年工龄。React + TypeScript + Next.js，这套技术栈我从hooks时代用到App Router时代，熟得不能再熟。

我的日常是这样的：产品出原型，设计出Figma稿，我把设计稿还原成页面，接后端API，处理状态管理，写交互逻辑。组件库用的是Ant Design，状态管理从Redux换到了Zustand，构建工具从Webpack换到了Vite。技术在变，但活儿没变——本质就是把设计稿变成能跑的网页。

“这个圆角是8px还是12px？设计稿上看不太清。”

这是我那几年跟设计师最常说的话。听起来很琐碎，但这就是前端工程师大部分时间在做的事——还原设计稿，调样式，对像素。

薪资两万出头，在一线城市不算高。更让我焦虑的是成长空间。五年了，我从切页面到搭架构，从写组件到做工程化，该学的都学了。但前端这个领域，天花板就在那——做到高级前端，再往上要么转管理，要么转全栈，纯前端的天花板很低。

2024年下半年，我开始听到一个词：v0.dev。Vercel出的一个工具，输入一段文字描述，AI直接生成React组件代码。我试了一下，生成的代码质量还不错——Tailwind CSS的样式、响应式布局、基本交互都有。

当时我没太在意，觉得这种工具生成的代码离生产级还远。但后来的事情证明我太乐观了。

二、设计稿到代码的AI工具，让切图仔的活没了

2025年初，公司的前端外包需求突然砍了一半。

以前我们团队会把一些非核心页面外包出去，每月大概有十几个页面的外包量。但2025年第一季度，产品经理开始用Figma的AI插件直接生成页面代码，配合v0.dev和Cursor，一个产品经理花一下午就能把以前外包一周的活儿干完。

“这种简单页面就不用找前端了，我自己生成一下改改就行。”

产品经理在会上说这句话的时候，我坐在下面，脸上没什么表情，但心里很不舒服。不是嫉妒，是那种"自己的手艺突然不值钱了"的感觉。

更直接的冲击来自团队内部。我们组有个实习生前端，平时负责一些简单页面的开发。2025年3月，Leader跟我说："实习生转正的名额可能没有了，你看看能不能让他转去做别的方向。"言下之意是，简单页面的活儿AI能干，不需要那么多人了。

那天晚上我算了一笔账：我五年前端的积累，有多少是"AI替代不了"的？设计稿还原？AI能干。写表单？AI能干。写CRUD页面？AI能干。组件封装？AI也能干。

真正AI干不了的，是那些复杂的交互、性能优化、架构设计——但这些活儿在传统前端岗位上，占比不到20%。

我第一次认真思考：前端工程师的下一步在哪？

答案来得比我预想的快。2025年4月，公司决定在产品里加一个AI助手功能，类似ChatGPT那种对话界面。这个需求被派到了前端组，因为后端只负责调LLM API，界面交互全归前端。

我就是在这个项目里，第一次碰到了让我"不会做"的前端问题。

三、流式输出渲染，传统前端没遇到过的难题

AI助手的界面看起来很简单——一个输入框，一个消息列表，AI回复像打字一样一个字一个字蹦出来。我一开始也觉得简单，不就是个聊天界面嘛，以前做过。

结果第一天就被打脸了。

后端给的接口是SSE（Server-Sent Events）流式的，不是传统的REST API一次性返回JSON。数据是一块一块来的，每个chunk可能是一个完整的词，也可能是不完整的半个字，还可能是特殊的控制标记。我要在前端实时接收这些chunk，拼接到界面上，还要保证渲染不卡顿。

我先用EventSource写了第一版，跑起来发现一堆问题。

第一个问题：Markdown渲染。AI的回复是Markdown格式的，包含标题、列表、代码块、表格。但流式输出的时候，Markdown是不完整的——比如一个代码块只收到了开头的三个反引号，还没收到结尾的，这时候怎么渲染？

“这个东西不能等完整了再渲染，那样用户要等好几秒才看到内容，体验太差了。”

这是产品经理的要求，也是对的。AI产品的体验核心就是"即时反馈"，用户需要看到AI正在思考、正在输出。如果等完整了再渲染，跟传统API有什么区别？

我花了三天研究增量Markdown渲染。最终用了一个叫react-markdown的库，配合一个自定义的流式渲染策略：每个chunk到达时，把已经收到的所有文本拼接起来，重新解析Markdown，但只更新变化的部分。代码块用Shiki做语法高亮，在代码块还没结束的时候显示"正在输入"的状态。

第二个问题：滚动控制。对话过程中，消息会不断增长，页面需要自动滚动到底部。但如果用户正在往上翻看历史消息，自动滚动会把用户拽回来——这很烦。我写了个逻辑：检测用户是否在底部附近（距底部小于150px），是的话自动滚动，不是的话不滚动，但在右下角显示一个"有新消息"的提示。

第三个问题：中断恢复。用户在AI输出的过程中点了"停止"按钮，要立刻中断。但SSE连接断开后，已经接收到的内容要保留在界面上，不能丢失。而且后端那边可能还在继续生成（还在烧Token），前端断开后得通知后端也停。我加了前端abort + 后端轮询检测连接状态的机制。

这些问题，做了五年传统前端的我，一个都没遇到过。传统前端是"请求-等待-渲染"的模式，AI前端是"流式接收-增量渲染-实时交互"的模式，完全是两套逻辑。

四、AI产品前端的体验设计，比我想的深

做完那个AI助手项目后，我被调到了公司新成立的AI产品组，专门负责AI产品的前端开发。做了一年多，我对"AI应用前端"这个方向的理解越来越深。

AI产品的前端体验跟传统产品完全不一样，核心区别在于：传统产品的交互是确定性的——你点按钮，一定有结果；AI产品的交互是不确定性的——你问一个问题，AI可能秒回，可能要想十秒，可能回答得很好，可能回答得不好。

这种不确定性对前端工程的要求极高。

我做了几个关键设计。第一是"思考状态"的渲染。AI生成回答需要时间，这段时间不能让用户干等。我做了个动态的loading效果——不是传统的转圈，而是根据AI正在做的事情显示不同的状态：“正在理解你的问题"→"正在搜索相关内容"→"正在组织回答”。这些状态由后端通过SSE的事件标记推过来，前端根据标记切换展示。

第二是多轮对话的状态管理。用户可能同时开多个对话窗口，每个窗口有不同的上下文。我用Zustand做了个全局的对话状态树，每个对话节点维护自己的消息列表、流式状态、中断状态。切换对话时要暂停当前对话的流式输出，切回来时恢复——这个状态管理比传统前端的任何场景都复杂。

第三是AI生成内容的交互设计。AI生成的回答不是静态展示就完了，用户可能想复制、想重新生成、想追问、想编辑后重新提问。每个操作都有对应的交互逻辑，而且要在流式输出的过程中也能操作——用户不用等AI说完就可以点"复制已生成的内容"。

“你这个交互做得太顺了，比我见过的其他AI产品都好。”

这是公司CEO试用产品后说的。他不知道的是，这些看起来"顺"的体验背后，是大量的前端工程工作——SSE连接管理、增量渲染、状态同步、性能优化。

五、AI前端工程师到底在干什么

做了大半年AI产品前端，我把这个岗位的工作内容总结成几大块。

最核心的一块是流式输出UI。SSE和WebSocket两种方案都要会，SSE更适合单向的模型输出，WebSocket适合需要双向交互的场景（比如语音对话）。流式渲染的核心难点不是"显示文字"，而是"在文字不完整的状态下优雅地渲染富文本"——Markdown、代码高亮、表格、LaTeX公式，这些在流式状态下都有坑。

第二块是对话交互设计。多轮对话的状态管理、上下文窗口的可视化、历史消息的搜索和筛选。AI产品的对话状态比传统聊天应用复杂得多，因为每条消息都可能处于"生成中"“已完成”“已中断”"已重新生成"等不同状态。

第三块是AI产品的工程化。AI功能通常需要跟后端的长连接、需要处理超时和重连、需要做客户端的缓存和离线支持。还有性能问题——一次对话可能产生几十KB的文本，频繁的DOM更新会导致卡顿，得用虚拟列表和增量更新来优化。

第四块是AI生成内容的交互。复制、编辑、重新生成、分享、导出——这些功能看起来简单，但在流式输出的上下文里，每个都有坑。比如"重新生成"，你要把旧回答存起来（用户可能想对比），又要开始新的流式输出，还要管理两个输出不能互相干扰。

这些活儿，没有一个是传统前端做过的。但每一个，都需要扎实的前端基本功——React组件设计、状态管理、性能优化、浏览器API。

六、AI产品的前端体验，决定了产品成败

2025年11月，我去参加了一个前端技术大会，有个分享的题目是"AI产品的前端体验设计"。讲者说了一句话让我印象很深：

“同样的大模型API，为什么ChatGPT的体验比其他产品好那么多？不是因为模型不同，是因为前端工程不同。”

这句话点破了一个事实：在AI应用领域，模型能力正在趋同——大家都调GPT-4o或者Claude，模型本身没区别。真正拉开产品差距的，是前端体验。流式输出够不够顺、交互够不够直觉、响应够不够快——这些前端工程的细节，直接决定了用户用不用你的产品。

如果你是做前端的，正在焦虑AI会不会替代你，我的建议是：

传统前端的工作确实在减少——设计稿还原、简单页面开发，这些活AI确实能干。但AI应用前端是一个全新的、正在爆发的方向，而且极度缺人。

第一步，学流式渲染。找一个开源的大模型API（比如Ollama本地部署的），自己写一个聊天界面，实现SSE流式接收 + Markdown增量渲染。这一步做通了，你就迈过了AI前端最大的门槛。

第二步，补交互设计的课。AI产品的交互模式跟传统产品不一样，去看看ChatGPT、Claude、Perplexity这些产品的交互细节——怎么处理加载状态、怎么处理错误、怎么处理多轮对话。每个细节背后都有工程决策。

第三步，理解AI产品的架构。AI前端不只是写界面，你得理解后端怎么调模型、Token怎么计费、上下文怎么管理。前端工程师如果能理解全链路，在AI创业公司里会非常值钱——因为AI创业公司最缺的就是能把模型能力变成好产品的人。

切图的活确实少了，但能做出丝滑AI体验的前端工程师，市场上根本不够分。我就是那个做了五年切图仔的前端，转型之后才发现，前端的技能不是没用了，是换了个更值钱的战场。

想入门 AI 大模型却找不到清晰方向？备考大厂 AI 岗还在四处搜集零散资料？别再浪费时间啦！2026 年AI 大模型全套学习资料已整理完毕，从学习路线到面试真题，从工具教程到行业报告，一站式覆盖你的所有需求，现在全部免费分享！

👇👇扫码免费领取全部内容👇👇

​

一、学习必备：100+本大模型电子书+26 份行业报告 + 600+ 套技术PPT，帮你看透 AI 趋势

想了解大模型的行业动态、商业落地案例？大模型电子书？这份资料帮你站在 “行业高度” 学 AI：

1. 100+本大模型方向电子书

2. 26 份行业研究报告：覆盖多领域实践与趋势

报告包含阿里、DeepSeek 等权威机构发布的核心内容，涵盖：

• 职业趋势：《AI + 职业趋势报告》《中国 AI 人才粮仓模型解析》；
• 商业落地：《生成式 AI 商业落地白皮书》《AI Agent 应用落地技术白皮书》；
• 领域细分：《AGI 在金融领域的应用报告》《AI GC 实践案例集》；
• 行业监测：《2024 年中国大模型季度监测报告》《2025 年中国技术市场发展趋势》。

3. 600+套技术大会 PPT：听行业大咖讲实战

PPT 整理自 2024-2025 年热门技术大会，包含百度、腾讯、字节等企业的一线实践：

• 安全方向：《端侧大模型的安全建设》《大模型驱动安全升级（腾讯代码安全实践）》；
• 产品与创新：《大模型产品如何创新与创收》《AI 时代的新范式：构建 AI 产品》；
• 多模态与 Agent：《Step-Video 开源模型（视频生成进展）》《Agentic RAG 的现在与未来》；
• 工程落地：《从原型到生产：AgentOps 加速字节 AI 应用落地》《智能代码助手 CodeFuse 的架构设计》。

二、求职必看：大厂 AI 岗面试 “弹药库”，300 + 真题 + 107 道面经直接抱走

想冲字节、腾讯、阿里、蔚来等大厂 AI 岗？这份面试资料帮你提前 “押题”，拒绝临场慌！

1. 107 道大厂面经：覆盖 Prompt、RAG、大模型应用工程师等热门岗位

面经整理自 2021-2025 年真实面试场景，包含 TPlink、字节、腾讯、蔚来、虾皮、中兴、科大讯飞、京东等企业的高频考题，每道题都附带思路解析：

2. 102 道 AI 大模型真题：直击大模型核心考点

针对大模型专属考题，从概念到实践全面覆盖，帮你理清底层逻辑：

3. 97 道 LLMs 真题：聚焦大型语言模型高频问题

专门拆解 LLMs 的核心痛点与解决方案，比如让很多人头疼的 “复读机问题”：

三、路线必明： AI 大模型学习路线图，1 张图理清核心内容

刚接触 AI 大模型，不知道该从哪学起？这份「AI大模型 学习路线图」直接帮你划重点，不用再盲目摸索！

路线图涵盖 5 大核心板块，从基础到进阶层层递进：一步步带你从入门到进阶，从理论到实战。

L1阶段:启航篇丨极速破界AI新时代

L1阶段：了解大模型的基础知识，以及大模型在各个行业的应用和分析，学习理解大模型的核心原理、关键技术以及大模型应用场景。

L2阶段：攻坚篇丨RAG开发实战工坊

L2阶段：AI大模型RAG应用开发工程，主要学习RAG检索增强生成：包括Naive RAG、Advanced-RAG以及RAG性能评估，还有GraphRAG在内的多个RAG热门项目的分析。

L3阶段：跃迁篇丨Agent智能体架构设计

L3阶段：大模型Agent应用架构进阶实现，主要学习LangChain、 LIamaIndex框架，也会学习到AutoGPT、 MetaGPT等多Agent系统，打造Agent智能体。

L4阶段：精进篇丨模型微调与私有化部署

L4阶段：大模型的微调和私有化部署，更加深入的探讨Transformer架构，学习大模型的微调技术，利用DeepSpeed、Lamam Factory等工具快速进行模型微调，并通过Ollama、vLLM等推理部署框架，实现模型的快速部署。

L5阶段：专题集丨特训篇 【录播课】

四、资料领取：全套内容免费抱走，学 AI 不用再找第二份

不管你是 0 基础想入门 AI 大模型，还是有基础想冲刺大厂、了解行业趋势，这份资料都能满足你！
现在只需按照提示操作，就能免费领取：

👇👇扫码免费领取全部内容👇👇

​

2026 年想抓住 AI 大模型的风口？别犹豫，这份免费资料就是你的 “起跑线”！