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

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

发布日期：2025-05-07 19:58:20 浏览次数： 2602

作者：大淘宝技术

微信搜一搜，关注“大淘宝技术”

本文是一篇关于前端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>