[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-26":3,"comments-26":37},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":30,"likeCount":9,"collectCount":9,"commentCount":9,"status":31,"publishedAt":32,"contentMd":33,"contentHtml":34,"likedByMe":35,"collectedByMe":35,"updatedAt":36},26,"从 Copilot 到 Coding Agent：前端开发正在进入 AI Agent 时代","以前 AI 帮我们写代码 现在 AI 开始帮我们完成开发任务","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002Fbfad238e-c627-4765-8f2d-3a49c8eae780.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,26],{"id":15,"name":16,"slug":17},3,"人工智能","ai",{"id":19,"name":20,"slug":21},2,"前端","frontend",{"id":23,"name":24,"slug":25},9,"工具","tools",{"id":27,"name":28,"slug":29},4,"Vue","vue",23,"published","2026-09-16T15:11:41.521Z","过去几年，AI 对程序员最大的帮助是：\n\n“帮我写一段代码。”\n\n比如：\n\n帮我写一个 Vue3 的分页组件。\n\nAI 给你代码。\n\n然后你复制、修改、运行。\n\n但现在开发方式正在发生变化。\n\n我们开始从：\n\nAI = Copilot\n\n逐渐走向：\n\nAI = Coding Agent\n\n两者最大的区别，并不是模型有多聪明，而是AI 能不能真正参与整个开发流程。\n\n一、传统 AI Coding 是什么？\n\n传统方式通常是：\n\n程序员\n ↓\n提出问题\n ↓\nAI生成代码\n ↓\n程序员复制\n ↓\n修改\n ↓\n运行\n ↓\n继续问AI\n\nAI 更像一个：\n\n高级代码补全工具\n\n它可以帮你写：\n\nVue Component\nTypeScript 类型\nAPI 请求\nCSS\n正则\n单元测试\n工具函数\n\n但项目上下文通常还是需要程序员自己提供。\n\n二、Coding Agent 改变了什么？\n\nAgent 的工作方式更接近：\n\n需求\n ↓\nAgent 分析项目\n ↓\n读取相关文件\n ↓\n制定修改方案\n ↓\n修改代码\n ↓\n运行 npm \u002F pnpm\n ↓\n运行测试\n ↓\n发现问题\n ↓\n继续修改\n ↓\n再次验证\n ↓\n输出结果\n\n也就是说：\n\nAI 从“写代码的人”变成了“执行开发任务的 Agent”。\n\n这也是为什么现在 Cursor、Claude Code、Codex 等工具的工作方式越来越接近一个真正的开发环境。不同 Agent 的优势也开始围绕 IDE、终端、GitHub、浏览器等工作场景展开。\n\n三、前端最适合 Agent 的场景\n\n例如：\n\n帮我给这个 Vue 项目增加一个用户列表页面。\n\n要求：\n\n1. 使用现有 Ant Design Vue\n2. 复用项目已有 Table\n3. 接入 \u002Fapi\u002Fuser\u002Flist\n4. 支持分页\n5. 支持搜索\n6. 保持现有代码风格\n7. 添加 loading\n8. 添加错误处理\n9. 完成后运行 lint 和 type-check\n\n以前：\n\n你需要自己：\n\n找组件\n↓\n找 API\n↓\n找类似页面\n↓\n写代码\n↓\n调样式\n↓\n跑测试\n\nAgent 可以把这些步骤串起来。\n\n真正的效率提升，不是：\n\nAI 每分钟写 100 行代码。\n\n而是：\n\nAI 能不能帮你减少上下文切换。\n\n四、前端工程师真正需要学习什么？\n\n未来不一定是：\n\n谁写代码最快\n\n而更可能是：\n\n谁最会拆任务\n谁最会描述约束\n谁最会提供上下文\n谁最会验证结果\n\n因此开发模式会逐渐变成：\n\n需求分析\n    ↓\n任务拆解\n    ↓\nAI 执行\n    ↓\n自动验证\n    ↓\n人工 Review\n    ↓\nMerge\n\n这意味着前端工程师的价值会逐渐从：\n\n“我能写出这个页面。”\n\n转向：\n\n“我能让 AI 按照工程规范稳定地交付这个页面。”\n\n结语\n\nAI Coding 的第一阶段是：\n\nAI 帮程序员写代码。\n\n第二阶段是：\n\nAI 帮程序员完成任务。\n\n而 Agent 真正有价值的地方，也不是“写得快”，而是能够连接：\n\n代码\n工具\n浏览器\nGit\n测试\n文档\n设计稿\nCI\u002FCD\n\n这也就自然引出了下一步：\n\n如果每次都要告诉 AI 项目规范，那为什么不直接教会 AI？\n\n这就是 Skill。","\u003Cp>过去几年，AI 对程序员最大的帮助是：\u003C\u002Fp>\n\u003Cp>“帮我写一段代码。”\u003C\u002Fp>\n\u003Cp>比如：\u003C\u002Fp>\n\u003Cp>帮我写一个 Vue3 的分页组件。\u003C\u002Fp>\n\u003Cp>AI 给你代码。\u003C\u002Fp>\n\u003Cp>然后你复制、修改、运行。\u003C\u002Fp>\n\u003Cp>但现在开发方式正在发生变化。\u003C\u002Fp>\n\u003Cp>我们开始从：\u003C\u002Fp>\n\u003Cp>AI = Copilot\u003C\u002Fp>\n\u003Cp>逐渐走向：\u003C\u002Fp>\n\u003Cp>AI = Coding Agent\u003C\u002Fp>\n\u003Cp>两者最大的区别，并不是模型有多聪明，而是AI 能不能真正参与整个开发流程。\u003C\u002Fp>\n\u003Cp>一、传统 AI Coding 是什么？\u003C\u002Fp>\n\u003Cp>传统方式通常是：\u003C\u002Fp>\n\u003Cp>程序员\u003Cbr>\n↓\u003Cbr>\n提出问题\u003Cbr>\n↓\u003Cbr>\nAI生成代码\u003Cbr>\n↓\u003Cbr>\n程序员复制\u003Cbr>\n↓\u003Cbr>\n修改\u003Cbr>\n↓\u003Cbr>\n运行\u003Cbr>\n↓\u003Cbr>\n继续问AI\u003C\u002Fp>\n\u003Cp>AI 更像一个：\u003C\u002Fp>\n\u003Cp>高级代码补全工具\u003C\u002Fp>\n\u003Cp>它可以帮你写：\u003C\u002Fp>\n\u003Cp>Vue Component\u003Cbr>\nTypeScript 类型\u003Cbr>\nAPI 请求\u003Cbr>\nCSS\u003Cbr>\n正则\u003Cbr>\n单元测试\u003Cbr>\n工具函数\u003C\u002Fp>\n\u003Cp>但项目上下文通常还是需要程序员自己提供。\u003C\u002Fp>\n\u003Cp>二、Coding Agent 改变了什么？\u003C\u002Fp>\n\u003Cp>Agent 的工作方式更接近：\u003C\u002Fp>\n\u003Cp>需求\u003Cbr>\n↓\u003Cbr>\nAgent 分析项目\u003Cbr>\n↓\u003Cbr>\n读取相关文件\u003Cbr>\n↓\u003Cbr>\n制定修改方案\u003Cbr>\n↓\u003Cbr>\n修改代码\u003Cbr>\n↓\u003Cbr>\n运行 npm \u002F pnpm\u003Cbr>\n↓\u003Cbr>\n运行测试\u003Cbr>\n↓\u003Cbr>\n发现问题\u003Cbr>\n↓\u003Cbr>\n继续修改\u003Cbr>\n↓\u003Cbr>\n再次验证\u003Cbr>\n↓\u003Cbr>\n输出结果\u003C\u002Fp>\n\u003Cp>也就是说：\u003C\u002Fp>\n\u003Cp>AI 从“写代码的人”变成了“执行开发任务的 Agent”。\u003C\u002Fp>\n\u003Cp>这也是为什么现在 Cursor、Claude Code、Codex 等工具的工作方式越来越接近一个真正的开发环境。不同 Agent 的优势也开始围绕 IDE、终端、GitHub、浏览器等工作场景展开。\u003C\u002Fp>\n\u003Cp>三、前端最适合 Agent 的场景\u003C\u002Fp>\n\u003Cp>例如：\u003C\u002Fp>\n\u003Cp>帮我给这个 Vue 项目增加一个用户列表页面。\u003C\u002Fp>\n\u003Cp>要求：\u003C\u002Fp>\n\u003Col>\n\u003Cli>使用现有 Ant Design Vue\u003C\u002Fli>\n\u003Cli>复用项目已有 Table\u003C\u002Fli>\n\u003Cli>接入 \u002Fapi\u002Fuser\u002Flist\u003C\u002Fli>\n\u003Cli>支持分页\u003C\u002Fli>\n\u003Cli>支持搜索\u003C\u002Fli>\n\u003Cli>保持现有代码风格\u003C\u002Fli>\n\u003Cli>添加 loading\u003C\u002Fli>\n\u003Cli>添加错误处理\u003C\u002Fli>\n\u003Cli>完成后运行 lint 和 type-check\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>以前：\u003C\u002Fp>\n\u003Cp>你需要自己：\u003C\u002Fp>\n\u003Cp>找组件\u003Cbr>\n↓\u003Cbr>\n找 API\u003Cbr>\n↓\u003Cbr>\n找类似页面\u003Cbr>\n↓\u003Cbr>\n写代码\u003Cbr>\n↓\u003Cbr>\n调样式\u003Cbr>\n↓\u003Cbr>\n跑测试\u003C\u002Fp>\n\u003Cp>Agent 可以把这些步骤串起来。\u003C\u002Fp>\n\u003Cp>真正的效率提升，不是：\u003C\u002Fp>\n\u003Cp>AI 每分钟写 100 行代码。\u003C\u002Fp>\n\u003Cp>而是：\u003C\u002Fp>\n\u003Cp>AI 能不能帮你减少上下文切换。\u003C\u002Fp>\n\u003Cp>四、前端工程师真正需要学习什么？\u003C\u002Fp>\n\u003Cp>未来不一定是：\u003C\u002Fp>\n\u003Cp>谁写代码最快\u003C\u002Fp>\n\u003Cp>而更可能是：\u003C\u002Fp>\n\u003Cp>谁最会拆任务\u003Cbr>\n谁最会描述约束\u003Cbr>\n谁最会提供上下文\u003Cbr>\n谁最会验证结果\u003C\u002Fp>\n\u003Cp>因此开发模式会逐渐变成：\u003C\u002Fp>\n\u003Cp>需求分析\u003Cbr>\n↓\u003Cbr>\n任务拆解\u003Cbr>\n↓\u003Cbr>\nAI 执行\u003Cbr>\n↓\u003Cbr>\n自动验证\u003Cbr>\n↓\u003Cbr>\n人工 Review\u003Cbr>\n↓\u003Cbr>\nMerge\u003C\u002Fp>\n\u003Cp>这意味着前端工程师的价值会逐渐从：\u003C\u002Fp>\n\u003Cp>“我能写出这个页面。”\u003C\u002Fp>\n\u003Cp>转向：\u003C\u002Fp>\n\u003Cp>“我能让 AI 按照工程规范稳定地交付这个页面。”\u003C\u002Fp>\n\u003Cp>结语\u003C\u002Fp>\n\u003Cp>AI Coding 的第一阶段是：\u003C\u002Fp>\n\u003Cp>AI 帮程序员写代码。\u003C\u002Fp>\n\u003Cp>第二阶段是：\u003C\u002Fp>\n\u003Cp>AI 帮程序员完成任务。\u003C\u002Fp>\n\u003Cp>而 Agent 真正有价值的地方，也不是“写得快”，而是能够连接：\u003C\u002Fp>\n\u003Cp>代码\u003Cbr>\n工具\u003Cbr>\n浏览器\u003Cbr>\nGit\u003Cbr>\n测试\u003Cbr>\n文档\u003Cbr>\n设计稿\u003Cbr>\nCI\u002FCD\u003C\u002Fp>\n\u003Cp>这也就自然引出了下一步：\u003C\u002Fp>\n\u003Cp>如果每次都要告诉 AI 项目规范，那为什么不直接教会 AI？\u003C\u002Fp>\n\u003Cp>这就是 Skill。\u003C\u002Fp>\n",false,"2026-10-09T12:00:00.253Z",{"items":38,"nextCursor":43},[39],{"id":40,"articleId":4,"author":41,"content":42,"parentId":43,"replyCount":44,"createdAt":45},25,{"id":9,"username":10,"avatar":11,"bio":12},"写得太好了吧",null,0,"2026-09-16T15:12:33.366Z"]