粤ICP备17114055号
微信扫码
添加专属顾问
支持私有化部署
我要投稿
前沿AI技术在前端开发中的创新应用，助力工程效率飞跃。核心内容： 1. “AI四象限”决策模型，量化评估AI投入产出 2. 鸿雁AI Coder与Nextdy Aone Copilot工具链实践 3. 十余个前端AI落地案例，展示提效路径与未来方向
在过去的一段时间里，AI 席卷了各行各业。大家用它创作、聊天、获取情绪价值、给自己打工……而对技术团队来说，如何用 AI 重构工作内容、提升人效，是我们最为关心的命题，更是个常看常新的命题。从最开始功能独立的 AI 工具 到 融合开发生态的 AI 插件，再到包罗万象的 AI 平台，什么才是最适合我们、最适合业务、最适合真正落地的方案呢？
在AI重塑生产力的时代浪潮中，技术团队始终在探索效率的边界。作为前端领域的实践者，我们以「AI工作流+工程化闭环」为核心，通过十余个最佳实践案例，走出了一条独具特色的提效路径。本文将说明我们如何构建「AI四象限」决策模型，打造鸿雁AI Coder + Nextdy Copilot工具链，并实现生产级代码的自动化生成。
前端研发中存在部分重复性高、规则明确的工作场景（如UI生成、代码适配、组件开发等），天然适合 Al 提效。但如何科学评估投入产出呢？在逐步探索 Al 落地前端业务场景的同时，我们根据 10+ 最佳实践梳理出了「AI 四象限」模型，以「Al 投入程度」与「可联调时长」为坐标轴，量化开发场景，辅助判断该需求的 Al 投入可行性。
随着 AI 工具的完善和熟练度，我们希望
1. 第二象限往第一象限迁移，高 AI 投入的需求尽量在 1 天能交付；
2. 第三象限往第二象限迁移，复杂的事情也可以让 AI 拆解、完成。这可能是未来提效的重心。
作为一线研发同学，在实际使用 AI 工具开发时，流程是分散的：设计、编码、联调需跨多个平台。先在研发平台中创建迭代、代码平台创建仓库，再在鸿雁 ABC 工作台新增页面模块、在 VSCode 里用Copilot 类插件辅助 coding……在提效的大背景下，C 端研发追求又快又好。一方面，代码工程需要快速响应需求迭代，另一方面，基于集团搭建能力自研的鸿雁工作台作为 C 端页面搭建、数据投放与发布的中枢，需要更高效的模块生产支持。
鸿雁 AI Coder 是一款面向开发者和非开发者的工具，它既适配了开发者的真实开发场景、又支持非技术人员发散思维进行原型创作，实践中能够普遍提效 30% 以上，真正实现了业务场景下的效率跃迁。
我们的核心理念是两段式D2C以及插件式交互。
基于两段式D2C，可以更好地做一个页面的任务分解，把之前沉淀的大量业务组件用起来。
基于插件式交互，可以更好地用上我们的鸿雁 ABC 工作台，通过插件串联研发流程，更丝滑。
与鸿雁 ABC 工作台深度集成，实现“一站式”开发到投产，模块、迭代、仓库、代码都有了，你需要做的只是点点按钮，改改细节。
*鸿雁 ABC 工作台是面向 C 端页面生产的效率平台。它支持技术同学和非技术同学像搭积木一样，用组件/模块搭建一个页面，注入数据，并发布上线。
全流程链路：上传 → 解析 → 生成 → 部署 → 入库。
RAG增强生成：结合RAG 挂载业务组件知识库生成可维护、可拓展的业务代码，避免通用工具造成代码失真
工程链路打通：在Bolt 架构下，是集团内首个打通 ICE3 前端框架 + 模块平台工程链路的方案
运行时适配：通过新增编译插件，创新性解决 WebC 运行时容器 对 ICE3 框架的支持问题
以集团内部 Agent 应用平台为载体，结合imgcook（图像大厨）和业务组件知识库，基于 AI Workflow 生成可维护可扩展的业务代码。与传统的通过imgcook生成代码、再通过大模型优化代码的两段式生码方案相比，我们的工作流出码结果更加规范和灵活。
针对预览不支持 ICE3 的问题，我们把代码文件“套壳”成符合配置要求的冰马工程，再将代码文件编码上传，推送至发布服务。然后通过模块平台 API、研发平台 API 创建模块和迭代。最后通过 Node 服务创建临时目录拉取仓库内容，并在指定分支下解析、创建代码文件，将变更推送到远程代码平台的仓库中。此时的输出不再是一次性玩具代码，而是可维护的生产级代码。
Bolt.new 使用了 WebContainer 作为运行时环境。在集团内部， WebC同样提供了运行时能力，于浏览器中提供了虚拟文件系统以及 Node 的运行环境，借此可以实现最终代码产物在浏览器环境中的实时构建、预览以及基于 terminal 的命令交互。
通过 AI Coder完成大部分 UI 代码生成以及骨架屏过渡动画（2 小时可联调，UI 代码 92% AI 生成）。
schema
定制需求
生成效果
二次对话调整细节
通过 AI Coder完成大部分 UI 代码，整体提效 50%。
schema
{"taskId":"79FF21E3-54A5-4EA8-B90E-7ED2A7E38DC9","pluginVersion":"4.2.8","reference":"sketch","type":"Block","id":"Block_1","__VERSION__":"2.0","props":{"style":{"width":674,"height":478},"attrs":{"x":0,"y":0}},"artboardImg":"https://img.alicdn.com/imgextra/i1/O1CN01zM4hhd1cnShMg53He_!!6000000003645-2-tps-674-478.png","children":[{"__VERSION__":"2.0","props":{"style":{"backgroundColor":"#F8F8F8","width":674,"height":478},"attrs":{"x":0,"y":0}},"type":"Shape","selfId":"9C75CDA6-9F9E-4FCE-B4E2-021038A50A7C","children":[],"originType":"ShapePath","nodeLayerName":"矩形 571","id":"Shape_0"},{"__VERSION__":"2.0","props":{"style":{"color":"rgba(124, 136, 156, 0.80)","fontFamily":"PingFang SC","fontSize":36,"fontWeight":400,"lineHeight":40,"width":325,"height":40},"attrs":{"x":61,"y":40,"text":"请输入19位数字卡号","lines":1}},"type":"Text","selfId":"32E7211E-E803-47EB-B9A7-173DC65FAE950","children":[],"originType":"Other","nodeLayerName":"请输入19位数字卡号","id":"Text_1"},{"__VERSION__":"2.0","props":{"style":{"backgroundColor":"#D8D8D8","width":558,"height":1},"attrs":{"x":58,"y":120}},"type":"Shape","selfId":"A800DDED-3D88-4C56-96C3-1AB78C3902ED","children":[],"originType":"ShapePath","nodeLayerName":"矩形 578","id":"Shape_2"},{"__VERSION__":"2.0","props":{"style":{"color":"rgba(124, 136, 156, 0.80)","fontFamily":"PingFang SC","fontSize":36,"fontWeight":400,"lineHeight":40,"width":180,"height":40},"attrs":{"x":61,"y":161,"text":"请输入密码","lines":1}},"type":"Text","selfId":"55159A37-4AA5-4C30-8BEE-535ABC375E440","children":[],"originType":"Other","nodeLayerName":"请输入密码","id":"Text_3"},{"__VERSION__":"2.0","props":{"style":{"backgroundColor":"#D8D8D8","width":558,"height":1},"attrs":{"x":58,"y":241}},"type":"Shape","selfId":"531DD24A-69E2-4154-83CF-ED7BD81E4659","children":[],"originType":"ShapePath","nodeLayerName":"矩形 591","id":"Shape_4"},{"__VERSION__":"2.0","props":{"style":{"backgroundColor":"#FF4C78","borderTopLeftRadius":12,"borderTopRightRadius":12,"borderBottomRightRadius":12,"borderBottomLeftRadius":12,"overflow":"hidden","width":522,"height":92},"attrs":{"x":74,"y":291}},"type":"Shape","selfId":"A2B6D4F9-F571-4F96-ABD1-DA8B8C6AE3EA","children":[],"originType":"ShapePath","nodeLayerName":"矩形 575","id":"Shape_5"},{"__VERSION__":"2.0","props":{"style":{"color":"rgba(255, 255, 255, 1)","fontFamily":"PingFang SC","fontSize":40,"fontWeight":400,"lineHeight":44,"width":368,"height":44},"attrs":{"x":150,"y":315,"text":"领取专属80元猫超卡","lines":1}},"type":"Text","selfId":"AD34B5D3-D984-4EE0-9271-FF3055EDB00E0","children":[],"originType":"Other","nodeLayerName":"领取专属80元猫超卡","id":"Text_6"},{"__VERSION__":"2.0","props":{"style":{"color":"rgba(255, 76, 120, 1)","fontFamily":"PingFang SC","fontSize":26,"fontWeight":400,"lineHeight":30,"width":430,"height":30},"attrs":{"x":121,"y":401,"text":"现登录淘宝账号 :YAYAOOOOOOOO","lines":1}},"type":"Text","selfId":"CF0F2FCE-6872-49AD-A6F9-AA8F1653252E0","children":[],"originType":"Other","nodeLayerName":"现登录淘宝账号 :YAYAOOOOOOOO","id":"Text_7"}],"name":"组 2493"}出码效果
<div className={styles.container}><div className={styles.formGroup}><inputtype="text"className={styles.input}placeholder="请输入19位数字卡号"value={cardNo}onChange={(e) => onInputChange('number', e.target.value)}maxLength={19}/>{cardNo?.length ? (<Picturesource={{width: '36rpx',uri: 'https://gw.alicdn.com/imgextra/i1/O1CN01bj2paK28qGpddtbIL_!!6000000007983-2-tps-72-72.png',}}className={styles.closeIcon}onClick={() => setCardNo('')}/>) : null}<div className={styles.divider} /></div><div className={styles.formGroup}><inputtype="text"className={styles.input}placeholder="请输入密码"value={cardPass}onChange={(e) => onInputChange('password', e.target.value)}/>{cardPass?.length ? (<Picturesource={{width: '36rpx',uri: 'https://gw.alicdn.com/imgextra/i1/O1CN01bj2paK28qGpddtbIL_!!6000000007983-2-tps-72-72.png',}}className={styles.closeIcon}onClick={() => setCardNoPass('')}/>) : null}<div className={styles.divider} /></div><button className={styles.submitButton} onClick={handleSubmit}>领取专属80元猫超卡</button>
生成效果
针对存量代码改造难题，我们落地了Nextdy Aone Copilot 方案。
基于 Aone Copilot Extension 生态自建 Nextdy Copilot插件，提供在 VSCode 内闭环的自营消费前端改码工具集。
使用 Aone CI 流水线定制 CI 任务，在 CI 任务中批量进行代码的修改。
针对不同的代码改造场景，使用源代码进行提示词的加工，与模型进行一轮或者多轮对话后完成代码转换。
改造完成后通过工程链路进行代码提交和CR创建。
整体的工作流从Extension 的意图识别开始，路由至指定的改码工具后，执行工具的主脚本进行一系列预处理，最终触发 CI 任务进行代码转换和提交。
旧版日志迁移自动将猫超历史的arms异常上报修改为sls上报。 |
rax天马模块迁移rax天马模块改造 ice，实现 css module 改写、猫超组件升级及属性兼容等功能。 |
无障碍适配改造实现前端代码无障碍功能适配。 |
AI改码通用工具提供在 vscode 内闭环的 AI 改码简易工作流，能够简化项目中重复、规律的代码改造工作。 |
当前的鸿雁 AI Coder 已解决了前台预览和后台工程自动部署的问题，缩短了研发链路，但前置的设计稿上传环节仍然需要借助 imgcook 工具 在 sketch 中完成。
这一部分工作包含设计稿整理和组件打标，工作量取决于设计稿的规范程度。后期我们希望能实现设计稿优化、自动整理和智能打标，并将这个能力沉淀在鸿雁 AI Coder 中。用户仅输入原始设计稿，就能获得完整产物，即实现"从设计稿到部署，全程无需离开当前页面"。
目前鸿雁 AI Coder 的主要用户仍然是前端开发同学，但随着文本大模型和多模态大模型的发展，输入口语化的描述，就能得到优质的文档/原型图，也能够为其他领域的工作提效。运营同学可以用它来创造样式丰富的活动页面，产品经理也不用再手画原型图，服务端可以用它生成表单列表页。后期不仅能让 C 端开发者用起来，也能让运营同学、PD、服务端用起来。
在AI重构开发的征程中，我们始终相信，最好用的工具永远是下一个。
本文共同作者梦惟、鸿屿、珦北，来自淘天集团-自营技术团队。本团队支撑诸如天猫超市等全部淘天自营业务。依托淘宝APP亿级流量入口的核心购物场景，我们已经沉淀了一些Al时代研发、运营的基础设施。在海量生产要素与前沿Al的深度交融中，我们致力于为消费者提供又快又好的电商体验。
53AI，企业落地大模型首选服务商
产品：场景落地咨询+大模型应用平台+行业解决方案
承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业
2025-05-07
重磅福利：Cursor 向学生免费开放一年！
2025-05-07
为什么现在做AI的产品经理，都是在亏钱？
2025-05-07
更好地使用AI来提升个人能力和效率
2025-04-30
AI提效：用微信和飞书多维表格打造票据自动处理工作流
2025-04-29
崇拜Agent和崇拜ABtest是同一种病
2025-04-29
Playwright + MCP：用AI对话重新定义浏览器自动化，助力提效300%
2025-04-29
牛逼！DeepSeek一键转word/excel/PDF文档，90%的人都不知道的隐藏技能
2025-04-29
DeepSeek实现办公自动化，从PDF数据提取到HTML图表生成
2024-04-02
2024-07-07
2025-02-02
2024-06-24
2024-04-27
2024-05-08
2024-06-06
2025-01-03
2024-04-02
2024-05-04
回到顶部