1. 写在DAY61一个前端Leader为什么“不务正业”去搞AI Agent距离我正式开始学习AI Agent已经第61天了。白天我还是那个带前端团队、定规范、做排期、跟产品对需求的前端Leader晚上九点之后我切换成另一个身份——一个从零开始啃AI Agent的小学生。你可能好奇一个干了快十年前端、已经做到管理岗的人为什么突然要折腾这个原因其实很朴素前端圈子这几年的内卷大家都看在眼里。组件库越来越强大、低代码平台越来越普及甚至AI生成UI的能力也在快速逼近传统意义上“写页面”的需求正在肉眼可见地收缩。不是说前端没得做了而是“会写页面”这件事本身已经不再构成稀缺价值。与此同时我注意到身边越来越多的项目开始讨论“智能体”、讨论“工作流自动化”、讨论“让AI自己调用工具完成任务”。AI Agent不是聊天机器人那种玩具它是真正能把“人盯流程”变成“机器跑流程”的东西。这个东西正在成为下一个技术叙事的主轴。我没有选择裸辞转行而是用下班后的碎片时间做了61天的系统性学习。今天这个节点我刚好完成了一个能跑通的“前端候选人面试评估Agent”小项目。这篇文章就以DAY61为锚点把我这61天的路线、今天这个项目的实操过程、踩过的坑以及2026年前端面试可能迎来的AI Agent新考题一次性说清楚。适合正在犹豫要不要接触AI Agent的前端工程师也适合已经入门但卡在“不知道拿它做什么”的人。2. 前端到AI Agent不是跨行是“技能平移认知升级”2.1 从“渲染思维”到“编排思维”接触AI Agent之前我的思维模型是“组件树”一个页面由哪些组件组成组件之间怎么通信数据怎么流转状态怎么管理。做了十年前端这套思维已经刻进骨头里。但AI Agent的思维模型完全不是这样。它更像是一张“任务状态机”一个用户请求进来Agent要判断需要调用哪个工具、按什么顺序调用、拿到结果之后往哪个分支走、失败了怎么重试。没有组件树没有生命周期钩子没有CSS继承有的是一连串的动作、决策、状态转换。举个我自己的例子。我做前端页面时最常想的是“这个表格在移动端怎么展示”而今天我写Agent时最常想的是“这个Agent在什么条件下应该调用简历解析工具什么条件下应该直接回答”。前者的核心是布局与交互后者的核心是决策与编排。这是第61天我最大的认知变化从“绘制界面”变成了“编排行动”。2.2 前端硬功夫调试、性能优化、工程化完全复用别以为前端转到Agent就是从头再来。实际上有一大堆前端练出来的硬功夫放在Agent开发里照样是核心竞争力。先说调试。前端调试靠的是DevTools里打断点、看网络请求、分析调用栈。Agent调试虽然对象变成了Prompt和工具调用链但底层逻辑一摸一样你要追踪的是一连串“输入-处理-输出”的行为。我第61天调Agent的时候依然习惯性地打印“调用日志”看它每一步调了哪个工具、传了什么参数、返回了什么结果——这不就是前端的console.log和network面板的翻版吗再说性能优化。前端做性能优化要考虑请求合并、缓存、懒加载、防抖节流。放到Agent里对应的就是Prompt压缩、上下文缓存、工具调用并发控制、超时重试。本质上都是在有限的资源预算里让系统跑得更快、更便宜、更稳。工程化更是如此。前端的组件库规范、代码评审、CI/CD、版本管理在Agent项目里一样都不能少。我甚至觉得前端Leader的工程化习惯能直接帮Agent项目从“一个文件夹里的脚本”升级成“一个可维护的产品系统”。2.3 Leader的经验反而成了Agent创业的壁垒这一点是我今天特别想强调的。很多技术人转Agent时盯着的是模型选型、代码实现但真正把Agent做成产品的人靠的是另外两种能力需求拆解和流程设计。前端Leader每天都在做需求拆解把产品的一句话需求拆成用户故事、拆成任务列表、拆成排期这种能力放到Agent上就是“把一个人工流程拆成Agent能执行的步骤序列”。前端Leader每天都在跟跨部门扯皮理解业务方的真实需求这种能力放到Agent上就是“识别一个场景到底适不适合用Agent来做”。所以我的结论很明确前端出身做Agent不是降维转行而是带着一套完整工程体系和协作方法论换了一个赛道重新发力。前端技术栈可能被替代但工程化能力、需求拆解能力、协作管理能力这些是AI短期替代不了的。3. DAY61实操复盘从0到1搭建“前端面试评估Agent”3.1 为什么第61天选“面试官Agent”做练手项目61天之前我做的都是很零散的小实验调用大模型API、让AI生成一段代码、用Prompt写一个文案助手之类的。到了第60天前后我发现零散学习已经到瓶颈了——真正吃透一个Agent必须做“端到端的完整项目”。选“前端面试评估Agent”有三个原因。第一我就是前端Leader天天筛简历、出面试题、评估候选人这个场景我比任何人都熟悉第二结果可验证我可以用真实候选人做盲测看看Agent给的评估跟我的判断差距多大第三它能直接复用到我的管理工作里即使不转行这个Agent也能帮我减少重复劳动。这个Agent解决的业务问题很具体HR转给我一堆前端简历我需要快速判断候选人技术栈是否匹配、项目经历是否真实、面试题应该重点考哪几个方向。以前这件事我得花一晚上现在Agent先帮我做一轮预筛我再针对性地看Top几个候选人效率提升非常明显。3.2 技术选型为什么我用TypeScript而不是Python网上绝大多数学Agent的教程都是Python写的我认识的同学一上来也都用Python。但我第61天这个项目最终还是用了TypeScript Node.js。原因很简单我是前端出身TypeScript是我的本命语言用TS我能把精力全部放在Agent逻辑上而不是先去学Python的语法和包管理。而且现在JavaScript生态的AI框架已经非常成熟了LangChain.js、Vercel AI SDK、OpenAI SDK的Node版本该有的都有。更重要的是团队里其他前端同学也看得懂TS代码未来如果要交接给团队维护学习成本低很多。核心依赖就四个openai调用大模型API用的是支持Function Calling的模型langchainAgent工作流编排用了它的工具调用模块pdf-parse解析PDF简历成文本zod做结构化输出校验写到这里先说明一下如果你所在的团队后端是Java生态Spring AI也是个很好的选择热词里提到的“Spring AI开发Agent”你完全可以搜着看如果你更熟Python就用LangChain配合FastAPI做服务也行。技术栈不重要Agent的思维模型才是核心。3.3 Agent工作流设计预筛、出题、评分三段式整个Agent的工作流我设计成6步接收简历文件PDF或文本解析成纯文本调用大模型做简历信息抽取姓名、工作年限、技术栈、项目经历、跳槽频率基于抽取结果做候选人画像是资深还是初级、强在哪个技术方向、可疑点在哪根据画像生成一套定制面试题基础题、项目深挖题、场景设计题各2道把候选人的面试回答喂给Agent让它按照“技术深度、表达能力、逻辑性、匹配度”四个维度打分输出一份结构化评估报告并附上建议“重点追问的问题清单”这里面最体现“Agent”而不是“普通程序”的地方在第4和第5步它不是写死的规则而是让模型根据每个候选人不同的简历内容动态生成问题和评估维度。同一个模型输入不同候选人的资料产出的面试题是完全个性化的。核心代码结构大概是这样的import { ChatOpenAI } from langchain/openai; import { createTool } from langchain/core/tools; import { z } from zod; const model new ChatOpenAI({ model: gpt-4o, temperature: 0.2, }); const parseResumeTool createTool( async (input: { fileName: string }) { // 调用 pdf-parse 提取简历文本 return extractTextFromPdf(input.fileName); }, { name: parse_resume, description: 解析简历PDF文件并返回纯文本内容, schema: z.object({ fileName: z.string().describe(简历文件名), }), } ); const generateQuestionsTool createTool( async (input: { profile: string; focusArea: string }) { // 让模型基于候选人画像生成面试题 return generateInterviewQuestions(input.profile, input.focusArea); }, { name: generate_questions, description: 基于候选人画像生成定制化面试题, schema: z.object({ profile: z.string().describe(候选人画像摘要), focusArea: z.string().describe(重点考察方向), }), } ); const agent await createAgent({ model, tools: [parseResumeTool, generateQuestionsTool], systemPrompt: 你是一位资深前端技术面试官..., });这只是核心骨架真实项目里我额外加了一堆边界处理PDF解析失败怎么办、简历里没写技术栈怎么办、候选人回答里全是语气词没有实质内容怎么办。调试的时候我把这六个步骤的中间结果全部打印出来肉眼检查每一步是不是符合预期。3.4 第61天踩过的三个深坑第一个坑是结构化输出不稳定。让模型返回JSON格式的评估报告时偶尔会出现JSON截断、字段缺失、甚至把注释也当成内容输出来。后来我加了zod做输出校验发现不合规就自动触发一次“修复重试”把解析失败的上下文回传给模型让它自己修正。这个方案实测下来成功率从78%提到了95%以上。第二个坑是上下文被工具调用结果刷爆。Agent每调一次工具工具返回的内容都会塞进上下文里。简历解析出来可能是几千字的文本多调几次上下文窗口就满了。我的解决办法是工具返回前先做摘要只把关键信息技术栈、工作年限、项目亮点传给模型而不是把全文塞进去。这跟前端做性能优化的思路是一模一样的——减少传输体积。第三个坑是Agent“自作主张”跑偏。有一次它评估候选人时因为简历里提到了“设计模式”它就开始大谈特谈架构设计完全偏离了面试题范围。我加了约束系统Prompt里明确“只允许围绕前端技术栈提问出现后端、运维、AI方向内容时拉回主题并提示候选人”。这就像前端组件里的“边界情况处理”你永远要把兜底逻辑写清楚。4. 盘点国内Agent产品与2026年前端面试新方向4.1 国内主流的AI Agent产品与技术路径第61天我除了写代码还花了一个晚上专门盘点了国内目前能看得到的Agent类产品。不是为了做广告而是为了搞清楚一个事大厂们都在往什么方向押注这直接决定了前端转Agent的下一步机会在哪。我梳理了几家典型的产品对比如下厂商/产品定位技术路线适合谁用字节跳动 扣子Coze低门槛Agent搭建平台可视化编排 插件生态业务人员、产品经理、快速原型阿里云 百炼大模型应用开发平台模型调用 RAG Agent框架企业级应用开发腾讯云 智能体云上Agent开发与托管知识库 工作流编排企业服务集成百度 千帆AppBuilderAI原生应用搭建多模型调度 组件化开发应用开发快速交付Dify开源开源Agent应用平台自托管 API化有自建需求的技术团队从这轮盘点里我得出三个判断。第一Agent开发的趋势是“中台化”也就是企业会建一个统一的Agent能力平台供内部各个业务线调用这就是热词里“AI Agent中台”的真实含义。第二低代码Agent平台会侵蚀一部分传统业务系统开发的市场首当其冲的可能就是简单的表单、审批流、信息查询类前端。第三真正复杂、要求高可控性的Agent应用依然需要专业开发人员来做深度定制——高端需求反而会变多。对企业而言Agent的价值不在于“有一个聊天机器人”而在于把重复性的、有规则可循的流程自动化掉。换句话说Agent的本质是“流程的数字员工”。前端工程师如果只把自己定位成“写页面的人”那确实容易被平台替代但如果把自己定位成“帮业务设计自动化流程的人”那就是站在了Agent浪潮的潮头上。4.2 2026年前端面试会出现哪些AI Agent新题因为工作关系我每年都会整理前端面试题。今年看到热词里频繁出现“2026前端面试题”和“AI Agent面试题”我预感2026年的前端面试AI相关的内容占比一定会大幅提升。这不是押题而是技术招聘的自然演化——前端要跟AI结合已经是绕不开的方向了。我判断会出现的高频题目大概有这几类基础认知类Agent和ChatBot的区别是什么Agent的三要素模型、工具、记忆各自作用是什么工具调用类Function Calling的原理是什么前端能不能用自己的函数作为Agent的工具流程设计类设计一个Agent让它替代运维同学处理线上告警你会怎么设计工作流前端结合类如何把现有前端页面改造成Agent的“工具”比如让Agent能调用你封装好的前端API来展示数据。工程化类Agent应用上线后如何做Prompt版本管理和回归测试我已经开始让团队里的高级前端同学提前准备这些方向了。我的态度很明确不要求每个人都转Agent开发但至少得能讲清楚Agent是怎么工作的别让面试官觉得前端只会写页面。4.3 前端转Agent可以盯的四个方向基于61天的观察我给自己也梳理了可能的转型路径不止一条Agent应用工程师负责把业务需求拆解成Agent工作流做具体场景落地。这是需求量最大的方向。Agent平台/中台工程师负责搭建企业内部Agent运行环境包括模型接入、工具注册、权限管控、日志审计。这是偏基建的方向技术含量高。Agent产品方案工程师偏售前/解决方案核心能力是“懂客户业务懂Agent能力边界”前端出身的人沟通能力一般都不差很适合。AI教学/布道方向像我现在这样把学习过程沉淀成内容帮助更多前端转型也算一条路。这些方向都不需要你变成算法专家但对“Agent能做什么、不能做什么”要有非常清醒的认知。而这恰恰是做业务出身的前端Leader最擅长的事情。5. 61天学习路线复盘前端在职人员转Agent可以怎么排5.1 我是如何用61天从零走到今天的最后分享一个我的时间线复盘给同样想转的人一个参考。很多人一上来就问“学Python还是学LangChain”但其实最关键的是节奏和路径。我用表格把我61天的学习路线整理了一下时间段核心任务产出物DAY1-15搞清底层概念一篇梳理Agent、Prompt、RAG、Fine-tuning区别的笔记DAY16-30熟悉API调用能通过API调用大模型实现一个带上下文记忆的聊天程序DAY31-45掌握工具调用实现一个能联网搜索、能算数学题的Tool AgentDAY46-60深入RAG与框架搭建一个基于私有知识库的问答Agent熟悉LangChain的核心概念DAY61端到端实战完成“前端面试评估Agent”全流程并沉淀成文档这个路线我踩过的一个明显问题是DAY1-15有点拖沓花了太多时间看各种理论文章不如直接上手调API跑通一个“你好”回答。所以我的建议是不要试图全懂了再动手而是动手了再补课。这跟前端当年学Vue的时候一模一样——先让Hello World跑起来你会自然产生动力去搞清楚响应式原理。5.2 在职学习的时间管理Leader身份反而更方便有人会问你白天带团队那么忙晚上怎么能坚持下来我的方法有三个。第一把Agent学习和现有的团队管理结合起来。比如我让团队里一个前端同学一起调研“能否用Agent自动生成项目周报”这就把个人学习变成了团队技术探索老板不但不反对还挺支持。第二固定每天晚上9点到11点为深度学习时间手机扔到书房外面节假日再补一些整块时间做项目性实操。第三利用碎片时间看文档和资讯通勤路上听播客、中午午休前看产品文档这些不费脑子但能积累认知。在职学习最大的敌人不是时间不够而是“学了不用”。所以我从第31天开始每个学到的概念都会找机会套到真实工作里。比如学了RAG第一反应是“我们前端的内部组件文档能不能做成一个问答Agent让新人不用来回问老员工”学了Function Calling第一反应是“能不能让AI直接调用我们现成的接口查询订单数据”。这种“现学现卖”的学习方式效果比干啃文档好十倍。5.3 别老想着“转”前端学Agent的三个意外收益最后说点掏心窝子的话。61天学下来我发现就算最终不转行学Agent对前端本职工作也有三个特别实在的收益。第一跟AI协作写代码的效率提升了。以前我用AI写前端代码总觉得它写得“不够聪明”现在我能精确描述需求、拆分任务、让AI先把整体方案列出来再动手生成质量的提升是肉眼可见的。第二对项目的理解更立体了。做Agent要理解完整的业务流程这种全局视角反哺到前端项目里你不再只是被动接需求而是能主动给产品提流程优化建议。第三职业安全感和议价能力提升了。当你能在团队里推动“AI前端”结合的方向时你的不可替代性不是在下降而是在上升。所以别把“转AI Agent”当成一个非黑即白的选择题。主业前端不能丢AI Agent是给主业赋能的新技能包更是给自己留的第二条职业曲线。操作总结与下一步计划第61天回看这个“前端面试评估Agent”说实话它还远远不够完善不支持多轮追问、评估维度还不够细、偶尔还有幻觉输出。但这不重要重要的是它已经完整跑通了Agent开发的全流程任务设计、工具开发、模型调用、输出校验、异常兜底。根据我自己的体会这条路上最容易放弃的不是前期学习而是中期开始做第一个完整项目的时候。因为零散demo很好做端到端项目才会暴露各种痛苦问题。但我建议所有人把第一个项目选得“小一点、真一点、身边的人能用上”而不是一上来就做那种宏大叙事的Agent。就像前端没人一开始就去写中后台复杂系统一样Agent开发也是一步步迭代出来的。最后再给你一个可以立即执行的建议找到你日常工作中最烦、最重复、最规则化的一个小动作试试用一个带Function Calling的Agent把它自动化。不需要复杂框架一个OpenAI API加一个Node脚本就够了。跑通的那一刻你大概就能理解我为什么要坚持到DAY61了。