淘天自营前端开发的AI增效实践总结-低调大师

淘天自营前端开发的AI增效实践总结

2025-05-07 201

本文是一篇关于前端AI实践的技术总结文章。文章提出了“AI四象限”决策模型，并介绍了鸿雁AI Coder和Nextdy Aone Copilot两款工具链的应用与成效。通过十余个最佳实践案例，展示了AI在前端领域的落地场景及未来发展方向。

前言

在过去的一段时间里，AI 席卷了各行各业。大家用它创作、聊天、获取情绪价值、给自己打工……而对技术团队来说，如何用 AI 重构工作内容、提升人效，是我们最为关心的命题，更是个常看常新的命题。从最开始功能独立的 AI 工具到融合开发生态的 AI 插件，再到包罗万象的 AI 平台，什么才是最适合我们、最适合业务、最适合真正落地的方案呢？

在AI重塑生产力的时代浪潮中，技术团队始终在探索效率的边界。作为前端领域的实践者，我们以「AI工作流+工程化闭环」为核心，通过十余个最佳实践案例，走出了一条独具特色的提效路径。本文将说明我们如何构建「AI四象限」决策模型，打造鸿雁AI Coder + Nextdy Copilot工具链，并实现生产级代码的自动化生成。

「AI 四象限」

前端研发中存在部分重复性高、规则明确的工作场景（如UI生成、代码适配、组件开发等），天然适合 Al 提效。但如何科学评估投入产出呢？在逐步探索 Al 落地前端业务场景的同时，我们根据 10+ 最佳实践梳理出了「AI 四象限」模型，以「Al 投入程度」与「可联调时长」为坐标轴，量化开发场景，辅助判断该需求的 Al 投入可行性。

随着 AI 工具的完善和熟练度，我们希望

1. 第二象限往第一象限迁移，高 AI 投入的需求尽量在 1 天能交付；

2. 第三象限往第二象限迁移，复杂的事情也可以让 AI 拆解、完成。这可能是未来提效的重心。

鸿雁 AI Coder：全链路智能开发平台

作为一线研发同学，在实际使用 AI 工具开发时，流程是分散的：设计、编码、联调需跨多个平台。先在研发平台中创建迭代、代码平台创建仓库，再在鸿雁 ABC 工作台新增页面模块、在 VSCode 里用Copilot 类插件辅助 coding……在提效的大背景下，C 端研发追求又快又好。一方面，代码工程需要快速响应需求迭代，另一方面，基于集团搭建能力自研的鸿雁工作台作为 C 端页面搭建、数据投放与发布的中枢，需要更高效的模块生产支持。

鸿雁 AI Coder 是一款面向开发者和非开发者的工具，它既适配了开发者的真实开发场景、又支持非技术人员发散思维进行原型创作，实践中能够普遍提效 30% 以上，真正实现了业务场景下的效率跃迁。

▐ 核心理念

我们的核心理念是两段式D2C以及插件式交互。

基于两段式D2C，可以更好地做一个页面的任务分解，把之前沉淀的大量业务组件用起来。

基于插件式交互，可以更好地用上我们的鸿雁 ABC 工作台，通过插件串联研发流程，更丝滑。

与鸿雁 ABC 工作台深度集成，实现“一站式”开发到投产，模块、迭代、仓库、代码都有了，你需要做的只是点点按钮，改改细节。

*鸿雁 ABC 工作台是面向 C 端页面生产的效率平台。它支持技术同学和非技术同学像搭积木一样，用组件/模块搭建一个页面，注入数据，并发布上线。

▐ 系统架构

全流程链路：上传 → 解析 → 生成 → 部署 → 入库。

▐ 核心能力

RAG增强生成：结合RAG 挂载业务组件知识库生成可维护、可拓展的业务代码，避免通用工具造成代码失真
工程链路打通：在Bolt 架构下，是集团内首个打通 ICE3 前端框架 + 模块平台工程链路的方案
运行时适配：通过新增编译插件，创新性解决 WebC 运行时容器对 ICE3 框架的支持问题

AI 生码工作流

以集团内部 Agent 应用平台为载体，结合imgcook（图像大厨）和业务组件知识库，基于 AI Workflow 生成可维护可扩展的业务代码。与传统的通过imgcook生成代码、再通过大模型优化代码的两段式生码方案相比，我们的工作流出码结果更加规范和灵活。

工程链路自动化

针对预览不支持 ICE3 的问题，我们把代码文件“套壳”成符合配置要求的冰马工程，再将代码文件编码上传，推送至发布服务。然后通过模块平台 API、研发平台 API 创建模块和迭代。最后通过 Node 服务创建临时目录拉取仓库内容，并在指定分支下解析、创建代码文件，将变更推送到远程代码平台的仓库中。此时的输出不再是一次性玩具代码，而是可维护的生产级代码。

WebC 运行时环境

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}>            <input              type="text"              className={styles.input}              placeholder="请输入19位数字卡号"              value={cardNo}              onChange={(e) => onInputChange('number', e.target.value)}              maxLength={19}            />            {cardNo?.length ? (              <Picture                source={{                  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}>            <input              type="text"              className={styles.input}              placeholder="请输入密码"              value={cardPass}              onChange={(e) => onInputChange('password', e.target.value)}            />            {cardPass?.length ? (              <Picture                source={{                  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 插件：智能改码新范式

针对存量代码改造难题，我们落地了Nextdy Aone Copilot 方案。

▐ 系统架构

▐ 核心能力

基于 Aone Copilot Extension 生态自建 Nextdy Copilot插件，提供在 VSCode 内闭环的自营消费前端改码工具集。

CI流水线

使用 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的深度交融中，我们致力于为消费者提供又快又好的电商体验。

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

本文分享自微信公众号 - 大淘宝技术（AlibabaMTT）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/u/4662964/blog/18348955

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Code Agent 都用过了吗，能打几分？

OSCHINA 编辑部【OSC 有问必答】栏目，聚焦开发者提出的实际问题，邀请行业专家、技术大咖或资深开发者进行深度剖析和解答，人话版呈现开发者们最关心的问题。欢迎各位开发者说出你最关心的技术难题，也欢迎资深开发 er、行业专家、学者大咖们自荐！交流可添加微信：JunoHsu1122 近两年在大模型技术的催化下，各种 AI 编程工具相继登场，用过的开发者可能会有一个感受——它们像是一个“超级补全工具”——你敲几个字母，它帮你补全代码。这也是过去 AI 编程工具被使用最多的功能。不过，今年的编程工具似乎又有了一个大的升级，不仅擅长续写，还能自己规划任务、调试代码、甚至独立完成一个简单项目。这就是 Code Agent，代码智能体。从“补全”到“自主”：Code Agent 是什么？传统 AI 编程就像一本高级词典：你输入关键词，它给出建议，但每一步都需要人类主导。比如你想写一个网页登录功能，它会帮你补全代码片段，但整体架构设计、错误调试还得你自己来。 Code Agent 则更像一个全栈工程师：你只需要告诉它“开发一个人脸识别的登录系统”，它就会自己拆解任务——调用摄像头接口、...

2025-05-09

240

当企业规模越来越大，战略与执行的断层问题也就越来越明显。 1997年的华为正处于“成长的十字路口”。产品开发周期长、各部门协作不畅等诸多挑战让产品研发的压力越来越大，彼时的研发与交付主要依赖于能力突出的个人和执行过程的随机应变。而项目延期、质量问题的屡屡出现，就像企业脸上的疤，永远遮不住。看似稳定运行的研发流程体系实际岌岌可危，那这场耗资数十亿的变革，有什么特点？一、华为：要么变革，要么滑向深渊 1997年，当任正非在IBM总部看到规范化的产品开发流程时，这位中国企业家敏锐地意识到：在行业的竞争和成长中，华为需要的不仅是技术突破，更是一场深刻彻底的管理革命。由此，华为踏上了向IBM学习IPD（集成产品开发）的路。“先僵化，再固化，后优化”是华为落地IPD的底层逻辑，“先试点，再逐步推广”是落地的基本手段。引入初期，华为IPD的第一个试点产品（无线业务部大容量移动交换机VMSC6.0）也在IBM顾问的指导下完成了首次IPD流程的试运行。经过一年的试点，在多个产品中落地IPD后，华为的产品研发周期也缩短了50%左右。试点过程中，华为不断总结经验教训，对IPD流程进行优化和完善，使其更贴合...

2025-05-09

207

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。