前端转 AI 全栈，到底应该按什么顺序学？
最近，`"前端已死，全栈永生"` 又开始在技术圈流行。
支付宝体验技术部已经解散并完成拆分，原有人员分流到各条业务线。这件事传开以后，很多人又往下推一步，变成 `"前端作为独立工种肯定会消失"`。
更准确的事实是，支付宝体验技术部 AFX 作为典型的前端中台，已经被打散进业务线。公开信息里，岗位名称从前端工程师统一调整为 Agent 开发全栈工程师。这不是支付宝不需要前端了，而是中台模式在 AI 落地期碰到了边界。
过去七八年，中台把通用技术和能力集中起来，是为了少重复造轮子、统一标准，也确实养出过高峰期的大团队。AFX 先后孵化出 `Ant Design`、`AntV`、`Egg.js`、语雀等至今仍被大量使用的产品，说明中台曾经有效。争议也一直在，离业务太远时，响应慢、决策链条长，业务一进入快迭代，中台就容易变成瓶颈。
大模型把这个矛盾推到明处。AI Agent 正在改写用户与产品的交互方式，传统前端边界被拉开，工程师还要补上大模型调用、逻辑编排和服务端对接。集中供给很难跟上这种变化，把人沉到业务线，反而更容易贴着场景改。过去两年，多家头部公司已经对中台做过缩减或打散。支付宝这次变动不是孤例，更像行业转向的一个缩影。
组织边界可以调整，工程问题不会一起消失。AFX 公开主页仍在更新面向 AI 流式输出的小程序 Markdown 渲染器、移动端 UX 缺陷诊断多模态模型、Agent 记忆、Rust 工具链，以及围绕 AI 工程展开的基础设施。前端工作还在，但它不再只围绕页面、组件和接口联调展开。
同样的变化也出现在 Next.js 。Next.js 团队在 2026 年发布了 [Building Next.js for an agentic future](https://nextjs.org/blog/agentic-future)，明确提出要把 Coding Agent 当成框架的一等用户。框架开始主动向 Agent 提供版本匹配文档、运行时错误、浏览器日志、路由信息和调试能力，而不是只等待模型根据训练数据猜测项目行为。
支付宝 AI 付也已经提供面向 Coding Agent 的文档和 Skill 安装方式，开发者可以通过 `npx` 安装支付宝支付 Skill ，再让 Cursor 、Claude Code 等工具读取规则并辅助完成接入。这说明 AI Coding 正在从个人效率工具，进入框架、SDK 、支付和企业服务的正式交付链路。
前端接下来要补的，不是换一个框架名，也不是在简历里多写 `"会调用大模型"`。更现实的顺序大致如下：
- 先把 AI Coding Agent 用进日常开发
- 再把项目规范、Skills 和验证流程写清楚交给它
- 同时补上服务端、数据库和部署
- 然后进入 AI 本体：先懂大模型架构，再学解码参数、结构化输出与缓存
- 接着做 Prompt 、Context 、记忆，再学 Embedding 、BM25 、RAG 和 Function Calling
- 工具暴露分清进程内工具、CLI 和 MCP ，再把 Skills 接到 Agent ，用 LangChain 、LangGraph 编排
- 确有需要时再上意图识别、Supervisor 与多 Agent
- 上线前补评估与 AI 监测，分清 Promptfoo 、Langfuse 、LangSmith 、Helicone 、Phoenix 各自管哪一段
名词记全没用，缺了哪块会卡住、用错会出什么事故，最好都能在自己的项目里验一遍。
## 前端框架正在同时服务人类开发者和 Coding Agent
过去评价一个前端框架，主要看它能不能让开发者更快地写页面、组织路由、请求数据和完成构建。
接下来还要增加一个判断标准：
> Coding Agent 能不能准确理解这个项目，并在真实运行环境里修改和验证代码？
Agent 可以读取文件，却不一定知道浏览器中发生了什么。开发者看到 Hydration Error 时，可以观察页面、控制台和错误覆盖层； Agent 默认只能看到源码和终端输出。当用户只告诉它 `"修复页面报错"`，它很可能连具体错误都没有拿到，只能从代码结构中猜测。
Next.js 因此开始把运行状态暴露给 Agent 。DevTools MCP 可以让支持 MCP 的 Coding Agent 访问开发服务中的错误、路由、渲染信息和运行状态。根据 [Next.js AI Coding Agents 指南](https://nextjs.org/docs/app/guides/ai-agents)，框架还会把与当前安装版本匹配的文档放进 `next` 包，并通过项目根目录中的 [`AGENTS.md`](http://agents.md/) 引导 Agent 先阅读本地文档，避免依赖已经过期的训练知识。
框架把这些能力补出来以后，前端工程师的日常也会跟着变。自己读文档、写代码、修 Bug 还在，但又多了一层工作：
- 给 Agent 准备准确的项目上下文
- 写清哪些目录可以改、哪些不能动
- 把框架版本和项目规范写进机器可读文件
- 让 Agent 能看到浏览器错误和运行日志
- 把常见任务沉淀成项目 Skills
- 用类型检查、测试和浏览器验证兜底
- 审查 Agent 有没有扩大修改范围
- 对最终合进主分支的结果负责
这些环节缺一块，生成代码就容易返工。上下文不够、框架版本拿错、看不到运行时报错、测试没拦住、Review 没盯住，都会把结果打回去重来。
方便 Agent 写代码，不等于工程师可以少懂框架。缓存策略用错、服务端数据泄漏到客户端、鉴权被破坏、Bundle 被撑大，这些问题还是得人先认出来。
以后前端更常做的，是把边界定清楚，让人和 Agent 一起把结果交出去，而不是亲手敲完每一行。
## 第一阶段：先把 AI Coding 变成项目能力
这一步先别急着学 LangChain ，也别先背 Transformer 、Embedding 和向量库。先把 AI Coding 工具用进真实项目。国外常见的有 Claude Code 、Codex 、Cursor 、Gemini CLI ，国内也要把 Trae 、通义灵码、文心快码、CodeBuddy 这类工具练熟。工具界面不一样，项目级用法是同一套。
很多人已经在用，但还停在 `"帮我写个页面"`、`"帮我修个 Bug"`。这适合试用，不适合长期维护。Agent 不知道项目为什么这样设计，不清楚哪些文件不能动，也不知道什么叫完成，很容易改错业务边界。
这一阶段要练的是项目级用法，按下面几步推进。
### 先摸清 Agent 的权限和工作方式
动手前先搞清楚它当前能做什么：
- 能读哪些目录
- 能不能直接改文件
- 能不能跑 Shell ，哪些命令要人工批准
- 能不能访问网络、环境变量和密钥
- 是否跑在沙箱或独立 Worktree
- 会话中断后怎么恢复
- 改完后 Diff 在哪里看
- 用什么证据证明任务做完
不同工具的审批开关、沙箱和 Worktree 叫法可能不同，但这些问题都要先答清楚，再让它动真项目。
进陌生项目时，先别开大功能，按这个顺序练：
- 只读摸底：说明入口、模块、状态管理、数据流、依赖、测试命令和高风险目录，推测必须标出来
- 小范围改动：只动指定功能，禁止碰公共组件和无关文件，改前说影响范围和验证计划，改后跑检查并列出未解决风险
- 固定节奏：先证据、再计划、后修改、最后验证。Agent 说 `"已经完成"` 不算结束
这三步跑通以后，再谈项目规则和 Skill 。权限没摸清就开大功能，后面很难收场。
---
原文链接：[点击查看](https://www.v2ex.com/t/1232663)
支付宝体验技术部已经解散并完成拆分，原有人员分流到各条业务线。这件事传开以后，很多人又往下推一步，变成 `"前端作为独立工种肯定会消失"`。
更准确的事实是，支付宝体验技术部 AFX 作为典型的前端中台，已经被打散进业务线。公开信息里，岗位名称从前端工程师统一调整为 Agent 开发全栈工程师。这不是支付宝不需要前端了，而是中台模式在 AI 落地期碰到了边界。
过去七八年，中台把通用技术和能力集中起来，是为了少重复造轮子、统一标准，也确实养出过高峰期的大团队。AFX 先后孵化出 `Ant Design`、`AntV`、`Egg.js`、语雀等至今仍被大量使用的产品，说明中台曾经有效。争议也一直在，离业务太远时，响应慢、决策链条长，业务一进入快迭代，中台就容易变成瓶颈。
大模型把这个矛盾推到明处。AI Agent 正在改写用户与产品的交互方式，传统前端边界被拉开，工程师还要补上大模型调用、逻辑编排和服务端对接。集中供给很难跟上这种变化，把人沉到业务线，反而更容易贴着场景改。过去两年，多家头部公司已经对中台做过缩减或打散。支付宝这次变动不是孤例，更像行业转向的一个缩影。
组织边界可以调整，工程问题不会一起消失。AFX 公开主页仍在更新面向 AI 流式输出的小程序 Markdown 渲染器、移动端 UX 缺陷诊断多模态模型、Agent 记忆、Rust 工具链，以及围绕 AI 工程展开的基础设施。前端工作还在，但它不再只围绕页面、组件和接口联调展开。
同样的变化也出现在 Next.js 。Next.js 团队在 2026 年发布了 [Building Next.js for an agentic future](https://nextjs.org/blog/agentic-future)，明确提出要把 Coding Agent 当成框架的一等用户。框架开始主动向 Agent 提供版本匹配文档、运行时错误、浏览器日志、路由信息和调试能力，而不是只等待模型根据训练数据猜测项目行为。
支付宝 AI 付也已经提供面向 Coding Agent 的文档和 Skill 安装方式，开发者可以通过 `npx` 安装支付宝支付 Skill ，再让 Cursor 、Claude Code 等工具读取规则并辅助完成接入。这说明 AI Coding 正在从个人效率工具，进入框架、SDK 、支付和企业服务的正式交付链路。
前端接下来要补的，不是换一个框架名，也不是在简历里多写 `"会调用大模型"`。更现实的顺序大致如下：
- 先把 AI Coding Agent 用进日常开发
- 再把项目规范、Skills 和验证流程写清楚交给它
- 同时补上服务端、数据库和部署
- 然后进入 AI 本体：先懂大模型架构，再学解码参数、结构化输出与缓存
- 接着做 Prompt 、Context 、记忆，再学 Embedding 、BM25 、RAG 和 Function Calling
- 工具暴露分清进程内工具、CLI 和 MCP ，再把 Skills 接到 Agent ，用 LangChain 、LangGraph 编排
- 确有需要时再上意图识别、Supervisor 与多 Agent
- 上线前补评估与 AI 监测，分清 Promptfoo 、Langfuse 、LangSmith 、Helicone 、Phoenix 各自管哪一段
名词记全没用，缺了哪块会卡住、用错会出什么事故，最好都能在自己的项目里验一遍。
## 前端框架正在同时服务人类开发者和 Coding Agent
过去评价一个前端框架，主要看它能不能让开发者更快地写页面、组织路由、请求数据和完成构建。
接下来还要增加一个判断标准：
> Coding Agent 能不能准确理解这个项目，并在真实运行环境里修改和验证代码？
Agent 可以读取文件，却不一定知道浏览器中发生了什么。开发者看到 Hydration Error 时，可以观察页面、控制台和错误覆盖层； Agent 默认只能看到源码和终端输出。当用户只告诉它 `"修复页面报错"`，它很可能连具体错误都没有拿到，只能从代码结构中猜测。
Next.js 因此开始把运行状态暴露给 Agent 。DevTools MCP 可以让支持 MCP 的 Coding Agent 访问开发服务中的错误、路由、渲染信息和运行状态。根据 [Next.js AI Coding Agents 指南](https://nextjs.org/docs/app/guides/ai-agents)，框架还会把与当前安装版本匹配的文档放进 `next` 包，并通过项目根目录中的 [`AGENTS.md`](http://agents.md/) 引导 Agent 先阅读本地文档，避免依赖已经过期的训练知识。
框架把这些能力补出来以后，前端工程师的日常也会跟着变。自己读文档、写代码、修 Bug 还在，但又多了一层工作：
- 给 Agent 准备准确的项目上下文
- 写清哪些目录可以改、哪些不能动
- 把框架版本和项目规范写进机器可读文件
- 让 Agent 能看到浏览器错误和运行日志
- 把常见任务沉淀成项目 Skills
- 用类型检查、测试和浏览器验证兜底
- 审查 Agent 有没有扩大修改范围
- 对最终合进主分支的结果负责
这些环节缺一块，生成代码就容易返工。上下文不够、框架版本拿错、看不到运行时报错、测试没拦住、Review 没盯住，都会把结果打回去重来。
方便 Agent 写代码，不等于工程师可以少懂框架。缓存策略用错、服务端数据泄漏到客户端、鉴权被破坏、Bundle 被撑大，这些问题还是得人先认出来。
以后前端更常做的，是把边界定清楚，让人和 Agent 一起把结果交出去，而不是亲手敲完每一行。
## 第一阶段：先把 AI Coding 变成项目能力
这一步先别急着学 LangChain ，也别先背 Transformer 、Embedding 和向量库。先把 AI Coding 工具用进真实项目。国外常见的有 Claude Code 、Codex 、Cursor 、Gemini CLI ，国内也要把 Trae 、通义灵码、文心快码、CodeBuddy 这类工具练熟。工具界面不一样，项目级用法是同一套。
很多人已经在用，但还停在 `"帮我写个页面"`、`"帮我修个 Bug"`。这适合试用，不适合长期维护。Agent 不知道项目为什么这样设计，不清楚哪些文件不能动，也不知道什么叫完成，很容易改错业务边界。
这一阶段要练的是项目级用法，按下面几步推进。
### 先摸清 Agent 的权限和工作方式
动手前先搞清楚它当前能做什么：
- 能读哪些目录
- 能不能直接改文件
- 能不能跑 Shell ，哪些命令要人工批准
- 能不能访问网络、环境变量和密钥
- 是否跑在沙箱或独立 Worktree
- 会话中断后怎么恢复
- 改完后 Diff 在哪里看
- 用什么证据证明任务做完
不同工具的审批开关、沙箱和 Worktree 叫法可能不同，但这些问题都要先答清楚，再让它动真项目。
进陌生项目时，先别开大功能，按这个顺序练：
- 只读摸底：说明入口、模块、状态管理、数据流、依赖、测试命令和高风险目录，推测必须标出来
- 小范围改动：只动指定功能，禁止碰公共组件和无关文件，改前说影响范围和验证计划，改后跑检查并列出未解决风险
- 固定节奏：先证据、再计划、后修改、最后验证。Agent 说 `"已经完成"` 不算结束
这三步跑通以后，再谈项目规则和 Skill 。权限没摸清就开大功能，后面很难收场。
---
原文链接：[点击查看](https://www.v2ex.com/t/1232663)
评论
暂无评论。