[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-35":3,"comments-35":33},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":26,"likeCount":9,"collectCount":9,"commentCount":9,"status":27,"publishedAt":28,"contentMd":29,"contentHtml":30,"likedByMe":31,"collectedByMe":31,"updatedAt":32},35,"AI 时代前端工程师的核心能力：从“写代码”转向“驾驭 Agent”","未来不是程序员消失，而是程序员的工作方式改变。","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002Fa3cff479-3aba-403b-882a-3168705be9e8.png",{"id":9,"username":10,"avatar":11,"bio":12},1,"DevShareAdmin","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F98609a86-e08d-437b-b921-1291fc5a1b4d.jpg","DevShare（技享）官方账号",[14,18,22],{"id":15,"name":16,"slug":17},3,"人工智能","ai",{"id":19,"name":20,"slug":21},2,"前端","frontend",{"id":23,"name":24,"slug":25},4,"Vue","vue",76,"published","2026-09-16T16:26:40.761Z","一、以前\n\n```text\n程序员\n ↓\n写代码\n ↓\n测试\n ↓\n上线\n```\n\n## 二、现在\n\n```text\n程序员\n ↓\n定义问题\n ↓\n拆解任务\n ↓\n设计约束\n ↓\n调度 Agent\n ↓\n验证结果\n ↓\n做最终决策\n```\n\n## 三、未来前端工程师需要强化的能力\n\n### 1. 架构能力\n\nAI 可以写：\n\n```text\n组件\n函数\n页面\n```\n\n但复杂系统的架构选择仍然需要工程判断。\n\n### 2. 问题拆解能力\n\n不要：\n\n```text\n帮我开发一个商城。\n```\n\n而应该：\n\n```text\n商品列表\n ↓\n商品详情\n ↓\n购物车\n ↓\n订单\n ↓\n支付\n ↓\n状态管理\n ↓\nAPI\n ↓\n测试\n```\n\n### 3. Context Engineering\n\n告诉 AI：\n\n```text\n项目是什么\n规范是什么\n可以使用什么\n不能使用什么\n在哪里找\n如何验证\n```\n\n### 4. Verification\n\nAI 越强：\n\n> **验证越重要。**\n\n不能：\n\n```text\nAI 说完成了\n ↓\n直接 Merge\n```\n\n应该：\n\n```text\nAI\n ↓\nTest\n ↓\nLint\n ↓\nType Check\n ↓\nBrowser\n ↓\nReview\n ↓\nHuman","\u003Cp>一、以前\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">程序员\n ↓\n写代码\n ↓\n测试\n ↓\n上线\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>二、现在\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-text\">程序员\n ↓\n定义问题\n ↓\n拆解任务\n ↓\n设计约束\n ↓\n调度 Agent\n ↓\n验证结果\n ↓\n做最终决策\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>三、未来前端工程师需要强化的能力\u003C\u002Fh2>\n\u003Ch3>1. 架构能力\u003C\u002Fh3>\n\u003Cp>AI 可以写：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">组件\n函数\n页面\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但复杂系统的架构选择仍然需要工程判断。\u003C\u002Fp>\n\u003Ch3>2. 问题拆解能力\u003C\u002Fh3>\n\u003Cp>不要：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">帮我开发一个商城。\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>而应该：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">商品列表\n ↓\n商品详情\n ↓\n购物车\n ↓\n订单\n ↓\n支付\n ↓\n状态管理\n ↓\nAPI\n ↓\n测试\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>3. Context Engineering\u003C\u002Fh3>\n\u003Cp>告诉 AI：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">项目是什么\n规范是什么\n可以使用什么\n不能使用什么\n在哪里找\n如何验证\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>4. Verification\u003C\u002Fh3>\n\u003Cp>AI 越强：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>验证越重要。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>不能：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">AI 说完成了\n ↓\n直接 Merge\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>应该：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">AI\n ↓\nTest\n ↓\nLint\n ↓\nType Check\n ↓\nBrowser\n ↓\nReview\n ↓\nHuman\u003C\u002Fcode>\u003C\u002Fpre>\n",false,"2026-10-09T12:00:00.243Z",{"items":34,"nextCursor":39},[35],{"id":36,"articleId":4,"author":37,"content":38,"parentId":39,"replyCount":40,"createdAt":41},26,{"id":9,"username":10,"avatar":11,"bio":12},"收藏了",null,0,"2026-09-16T16:29:34.462Z"]