Qcon 上海 2025 支付宝 AI Agent编码助手实战：面向KMP原生跨端实现研发提效

这边文章是 Qcon 上海站 2025 来自支付宝的KMP分享总结, 主题为”AI Agent编码助手实战：面向KMP原生跨端实现研发提效”
文章参考: 支付宝 MYKMP 原生跨平台解决方案
文章参考 : AI Agent 编码助手实战：面向 KMP 原生跨端实现研发提效

AI Agent编码助手实战：面向KMP原生跨端实现研发提效

背景介绍：支付宝KMP原生跨端架构

本次分享首先对相关核心技术术语进行说明：

术语名称	术语介绍
KMP（Kotlin Multiplatform）	JetBrains 基于 Kotlin 推出的一套跨端框架，允许开发者使用 Kotlin 语言编写一次业务逻辑代码，然后将其编译成适用于多个平台的原生应用、Web 应用或服务端应用。
CMP（Compose Multiplatform）	JetBrains 提供的一套基于 Compose 基础库的声明式 UI 跨端框架，支持在 Android、iOS、桌面和 Web 开发共享 UI。
支付宝 KMP 原生跨端	在 “Kotlin + Compose Multiplatform” 的基础上，为支付宝终端开发者提供一整套完善的跨端框架能力。
AntUI 组件库	基于 Compose 编写的支付宝 UI 组件库，包含丰富且风格统一的 UI 组件。
OHOS、Harmony	OHOS 是鸿蒙项目的开源操作系统基底，而 HarmonyOS 是基于 OHOS 打造的商用智能终端操作系统。

KMP原生跨端的核心优势在于显著减少为不同平台重复开发的工作量，同时能保持各平台原生的最佳用户体验。

支付宝在基础KMP架构上进行了深度扩展，构建了增强型跨端框架，其分层架构如下：

• MY CMP -> UI与体验层：
  • 双渲染管线：除CMP默认的Skiko引擎外，自研了Canvas渲染引擎，以在内存、滑动流畅性等方面实现性能优化。
  • AntUI高阶组件库：提供丰富的企业级UI组件。
  • 自动化能力：集成自动化埋点（无需手动添加点击等事件上报）、UI重组耗时检测工具。
  • 运行时监控：对线上ANR（应用无响应）、掉帧、无限重组等问题进行监控。
  • 原生组件嵌入：支持在Android、iOS、鸿蒙平台嵌入原生渲染的View。
  • 上层框架：封装了导航、事件、应用生命周期等统一框架。
• MY KMP -> Kotlin跨平台层扩展：
  • 平台API导出：将各原生平台常用API导出为Kotlin接口供开发者调用。
  • Runtime优化：对平台运行时进行优化，降低内存占用并提升加载性能。
  • 自研LLVM技术：支持编译插桩等高级操作。
  • 编译器优化：通过前后端编译器优化，显著减小产物包体积。
  • 鸿蒙通信通道简化：去除了传统KMP鸿蒙开发中必需的C语言桥接层，实现了Kotlin与eTS（鸿蒙开发语言）的直接高效通信。
• 跨端基座：
  • C++基础库：将网络库等原生C++能力封装并透出Kotlin接口。
  • 原生平台能力增强：在鸿蒙平台深度集成其Pipeline、事件中心、渲染、资源加载等原生能力至KMP框架。
  • Tecla API：基于自研IDL（接口描述语言）提供的跨端、跨技术栈API调用机制。开发者只需调用Kotlin接口，即可在安卓、iOS、鸿蒙三端使用支付宝的中间件能力。
• 工程体系集成：将KMP框架无缝融入支付宝现有的工程研发体系，提升开发效率。

目前，该KMP跨端架构已在支付宝多个核心业务场景（如“我的”、理财、直播、消息页，以及出行服务、健康管家等独立APP）中落地，覆盖安卓、iOS、鸿蒙三大平台，均实现了与原生开发对标的高性能体验。整体已支撑亿级PV，成为支付宝内重点发展的主流原生跨端技术栈。

KMP研发现状、痛点与AI工具调研

尽管KMP技术带来效率提升，但其研发全流程仍存在若干痛点：

1. 起步阶段：开发者需从头学习Kotlin、Compose及KMP/CMP特有语法，存在较高的学习成本。
2. 开发阶段：开发者不熟悉框架提供的跨端API（如AntUI、Tecla）是否能满足需求及具体调用方式。
3. 测试阶段：主要依赖人工测试，效率低下，缺乏自动化与AI辅助手段。
4. 上线运维阶段：三端（尤其是KMP特有）的崩溃堆栈反解与分析耗时较长，问题定位与优化成本高。

针对上述痛点，我们对现有AI编码工具进行了调研，结论是：目前缺乏一款能与客户端基础框架深度结合、支持KMP技术栈、并适配支付宝终端研发工程体系的专用编码助手。

具体对比如下：

• 内部两款热门助手：能力丰富，但不支持KMP跨端开发辅助。
• Cursor：支持KMP技术栈，但缺乏转码等深度能力，无法融入支付宝工程体系，且不了解CMP在鸿蒙平台的特定知识。
• Cline：与Cursor存在类似问题，且其推理步骤复杂度较高。

因此，我们期望打造一款具备跨端特色的AI编程伙伴，以解决实际研发问题，提升效率。

KMP编码助手：方案与实践

构建了KMP的编码助手，其核心目标是运用AI技术为KMP开发带来“二次加速”。以下从方案构思到核心功能实现进行剖析。

整体可行性评估与架构

项目初期，我们从四个维度评估了可行性：

1. 图生码/设计稿生码：通过让大模型学习AntUI组件，验证了其能直接输出对应界面代码的可行性。
2. 算法支撑：具备在终端研发场景下产出领域自研算法模型的能力，以增强生码效果。
3. 生产资料支撑：拥有完整的KMP（含鸿蒙）技术栈研发能力、四端AntUI组件库的开发和维护能力，以及可通过Tecla透出的丰富基础框架能力，能为大模型提供充足的学习素材。
4. 插件结合方式：确定以Android Studio（KMP研发主要IDE）的IntelliJ IDEA插件形式进行集成验证。

整体架构分为三层：

• 客户端层：作为Agent与用户的交互界面（IDE插件）。
• Agent框架层（核心）：进行了工作流编排、任务分解、知识图谱构建、UI转换等核心改造。
• 基础服务层：支撑AI能力的Prompt工程、RAG检索、MCP协议调用及代码补全等服务。

界面开发提效：从设计稿/图片到代码

为帮助开发者快速上手Compose UI，我们提供了两种生码方案：

设计稿生码

• 效果：可将Sketch设计稿中的图层高精度（还原度90%以上）转换为Compose UI代码，并在IDE中实时预览。
• 实现链路：

  • 启动链路：通过Node服务连接Sketch应用、IDE插件和Webview。

  • 设计稿转IR：将设计稿元素转换为中间表示（IR），包括类型、参数、样式及视图层级信息。

    • 

  • IR转Compose：依据规则将IR映射为Compose组件与修饰符。

    • 

  • 优化与输出：通过人工规则与模型二次优化，对生成的代码进行组件化、数据驱动等重构，输出高质量的生产级代码。

• 挑战：处理了设计稿不规范、IR与Compose属性映射差异（如margin）、DIV类型具体化、图片资源转换、CSS风格属性适配等一系列复杂问题。
  • 
• 解决：利用大模型进行二次优化，将界面布局进行组件化以及数据驱动的封装，比如一个平铺列表，最终优化成 ServiceItem 组件，对应传参 ServiceData，最终代码就可以直接用于生产。
  • 

再来整体对比下，从原始设计稿，到原始 Compose UI，再到模型二次优化的界面效果。这里能感受到模型二次优化后，基本上能够还原设计稿组件，但是代码更加直接可用。

• 稿生码的优点:
  • 转换后还原精度高，
• 缺点
  • 不支持基于支付宝 AntUI 组件库还原，
  • 设计稿不够规范影响还原效果。

我们自然而然的会想有更加简便，且支持高阶 UI 组件库的方案，就是图生码。

图生码

• 背景：设计稿生码不支持AntUI组件，且受设计稿规范度影响。图生码旨在实现更简便且支持高阶组件的生码方案。
• 方案演进：
  • 方案一（图到代码直出）：将高阶 UI 组价库的知识按照统一格式，输入给 MLLM 学习后，直接将图片转换成 Compose 代码。
    • 
    • 问题: 让大模型读图直接输出代码。效果欠佳，细节处理差，且技术栈绑定Compose，难以扩展。
  • 方案二（图→IR→代码）：采用自研图生码算法。使用后训练的多模态大模型识别图片中的基础组件和AntUI组件，输出IR，再复用设计稿生码的转换规则生成代码。(此方案更优)
    • 
    • 图生码算法能力建设的三个阶段
      • 

      1. 数据构造, 构建自动化流程，通过大模型生成随机Compose代码→渲染截图→生成精确的图文数据对，解决了训练数据匮乏问题。

         • 

      2. 模型训练, 采用LoRA（低秩适应）等参数高效微调技术，对多模态大模型进行SFT（监督微调）和强化学习，使其获得精准的UI页面解析能力，能识别AntUI高阶组件。

         • 

      3. 后处理增强, 针对模型幻觉导致的位置、颜色、布局偏差，结合传统图像算法进行校准，提升输出IR的精确度。

         • 
  • 优势与挑战：方案二效果更精准，直接支持AntUI，且IR协议可扩展至其他原生技术栈。当前挑战在于进一步提升AntUI组件识别准确度，并构造更多特殊案例数据。

逻辑开发与运维提效：智能问答与诊断

为帮助开发者快速上手KMP逻辑开发与解决线上问题，我们构建了基于RAG和MCP的智能助手。

基于RAG的智能问答

背景

• 内部文档质量参差不齐，内容多且繁杂，较难查找阅读
• 阅读；由于文档质量不高，导致机器人答疑质量不高

开发者常咨询这三类问题：

1. Kotlin 跨端能力库中是否包含某项能力？
2. 这个 API 能力调用代码该怎么写？
3. AntUI 组件库是否支持包含某个组件？

RAG 检索问答基本流程:

• RAG流程优化：
  • 源数据处理：面对复杂的JSON源数据（如含千条API记录），利用自建Agent将其转化为格式规整、模型可读的Markdown文档。
  • 检索效果提升：以FAQ（问答对）形式替代传统的文本切片，并借助大模型从文档中提炼生成近4000条FAQ知识，提高召回准确率。
  • 体系性问题回答：将知识图谱的实体关系作为检索语料，使模型能理解模块与接口的层级关系，回答体系性问题。
  • FAQ增强：让模型为同一答案生成多种问法，提升问题命中的灵活性。

具体问题诊断与解决

• KMP构建/闪退排查：构建“构建失败Agent”和“闪退日志Agent”。其工作流为：先运行脚本提取日志关键信息，再通过RAG从知识库召回解决方案，最后由Agent组织答案反馈给开发者。
• KMP应用框架快速接入：该框架用于抹平三端生命周期差异。我们提供模板代码自动生成工具，开发者可一键将框架集成到项目中，将原本需3人日的接入工作自动化。

KMP 模块在三端平台构建失败，无法定位原因

针对开发者不熟悉多端尤其是鸿蒙平台的痛点，我们通过定制Agent工作流解决问题：
KMP 模块在三端平台构建失败，无法定位原因
KMP 核心产物需要同时三端构建，一旦出现构建失败问题，传统排查方式效率比较低下，花费的时间从几分钟到一小时不等。

这里我们通过 Agent 工作流的方式，帮助开发者主动触发构建，利用 KMP 日志分析脚本，提取关键日志，再结合现有构建知识库进行召回，最终由模型整理组织答案。从而加快构建失败问题的排查速度。

安卓/ iOS /鸿蒙，三端闪退如何排查

开发者可以直接将闪退日志输入给 Agent ，Agent 会触发闪退分析的工作流，先用 KMP 堆栈反解工具提取关键内容并解析，再将解析结果返回给 Agent，由 Agent 结合当前的项目代码上下文，给出原因和解决方案。

基于MCP的工具集成

如何将众多工具（堆栈分析、模板生成、文件操作等）整合到大Agent中？我们采用了本地MCP（Model Context Protocol）路由机制。

• MCP作用：一种标准协议，使工具能适配不同大模型。通过编写MCP协议描述工具功能，Agent可根据用户提示词自动路由并调用相应工具。
  • 
• 示例：当用户输入“分析鸿蒙闪退堆栈”并提供日志时，Agent能自动匹配并调用“闪退堆栈分析工具”的MCP，执行分析并返回根因与建议。
  • 
• 架构扩展：除本地MCP工具集外，未来规划提供远程MCP市场和Agent市场。
  • 

未来展望

KMP编码助手将持续优化与创新，重点方向包括：

1. 生码能力增强：支持Figma设计稿生码；优化图生码IR协议；探索智能Compose UI视觉验收。
2. 声明式UI动态化：结合模型对数据与UI组件的理解，通过自研KMP JS运行时与动态化技术，实现数据驱动的动态界面渲染。
3. 技术架构扩展：以KMP技术栈为核心，逐步将AI辅助能力扩展至其他原生技术栈（如纯Android、iOS开发）。
4. 生态建设：建设开放的Agent与MCP工具市场。

总结：AIAgent重塑软件开发生命周期

最后再来看一下AI Agent面向软件开发整个的生命周期,你可以发现 agent正在以一个非常非常快的速度改变我们的工作方式. 从构思到开发到落地, agent在每一个环节都会驱动我们来进行一些创新.
比如

• 需求分析里面我们可以让AI来给出UI/UX设计建议
• 开发与编码阶段, 可以让agent来帮助我们进行代码审查和质量保证
• 测试阶段也很重要, 可以让agent智能测试以及报告
• 在部署与发布上, agent可以帮助我们进行一个自动化的配置
• 在维护与运营阶段, agent可以帮助我们分析用户的反馈以及线上的性能监控和优化

简而言之, AIAgent正在引领一场软件开发的全新的变革, 这将会深深地改变我们之后的一个工作方式, 那在这里呢也也祝愿大家能够在AI人工智能席卷而来的浪潮里面抓住机遇勇于创新, 说不定会有意想不到的惊喜和收获.