---

AI Coding 实践：PRD 到代码直出的探索

• 分享分为四个环节：
  1. AI Coding 在客户端领域的发展阶段与现状
  2. 客户端AI Coding的关键解法
  3. 实际业务场景与需求分析
  4. 总结与展望

---

AI Coding 发展史和现状

AI模型发展速览

自2017年Google提出Transformer后，AI在各领域实现突破。
2023年起，大语言模型商业化加速，年增速达30倍以上。
AICoding 领域是发展最快的学科之一，因为反馈机制明确（“对就是对，错就是错”）。

AI Coding 发展的五个阶段（人机协作视角）

阶段	描述	人机角色	典型能力
L1	人类主导，Agent实时辅助	人主导，AI辅助	代码提示（如GitHub Copilot）
L2	人类布置任务，Agent生成代码	人布置单一任务	单一任务代码生成
L3	人类设定范围，Agent推进多环节流程	人设定范围，AI推进流程	生成方案 + 生成代码
L4	人类输入PRD，Agent端到端交付	人输入PRD，AI端到端交付	需求解析 + 架构设计 + 编码
L5	人定义目标，多Agent分工协作	人定义目标，多AI协作	多Agent模拟完整软件团队

• L4阶段 前端领域已有产品（如“Lovable”），

“直出”型产品的现状与挑战

• 文字稿提到：
  • 前端已有“直出”产品（如Lovable、Bolt.new），可用自然语言直接生成可运行应用。
    • 
  • 客户端领域曾有一款叫 Builder.ai 的产品，但在2025年7月左右“爆雷”，据称背后有700多名工程师，被质疑是否真为AI驱动。公司估值从18亿跌至零，客户端直出仍存巨大挑战。
    • 

客户端AI Coding的独特困境

从技术栈视角看客户端

• 技术栈碎片化：
  • 前端：标准化高（HTML/CSS/JS）、框架集中（React/Vue）。
  • 客户端：平台碎片化（iOS/Android API版本差异）、框架分散（SwiftUI、UIKit、Jetpack Compose等）。
• 构建与调试：
  • 客户端编译耗时、真机调试必要，反馈循环慢。
• 开发模式：
  • 前端热重载实时反馈；客户端生命周期复杂，架构模式多样（MVVM、VIPER等）。

从AI 模型视角看客户端

• 构建与调试复杂：编译时间长、真机调试必要，反馈循环缓慢。
• 训练数据稀缺：高质量客户端代码多在企业内部未开源，公开数据规模小。
• 代码模式多样：架构演进复杂（如Android从Activity到MVVM+Compose），上下文理解成本高。

结论

“前端开发像是在标准化、开放的乐高环境中工作；客户端则像是在碎片化、半封闭的复杂系统中进行精密工程。”

---

客户端AI Coding的关键解法

Mobile-SWE-bench

科学评测体系的建立：从SWE-bench到Mobile-SWE-bench

• **SWE-bench**：由普林斯顿与芝加哥大学推出，基于真实GitHub Issue，要求AI生成PR来修复问题，以单元测试通过率为评测标准。

  • 

• 局限性：侧重于Bug修复而非功能实现，项目多集中后端，缺少移动端特有考量（如UI还原、多模态输入）。

• 移动端评测 Mobile-SWE-bench：

  • 核心要素：高质量真实PRD、多模态输入（PRD+Figma）、详细测试用例、历史Commit基线、多维度评测方法。
    • 
  • 评测方法：人工评测、自动化测试、渲染树约束检查、视觉语言模型评估。
    • 

热门Coding Agents表现如何

把整个需求的测评级分成三类, 可以看到哪怕是业界比较火的一些模型放在测试集中表现也
一般, 30%已经算是很高了.
为什么这些 Code Agent 都表现不佳?

PRD的拆解与微调：将需求转化为结构化任务

PRD 是 “产品需求文档”(Product Requirements Document) 的缩写. 在传统的软件和产品开发流程中，PRD 是一个核心文档。它由产品经理（或业务分析师）撰写，详细描述了一个产品、功能或项目应该做什么、为谁而做以及要达到什么目标。

一个典型的 PRD 通常包含：

1. 背景与目标： 为什么要做这个功能？要解决什么问题？业务目标是什么？
2. 用户角色与画像： 为哪些用户设计？
3. 功能需求： 详细的功能描述，包括用户场景、操作流程。
4. 非功能需求： 性能、安全性、兼容性等要求。
5. 成功指标： 如何衡量功能是否成功（如用户使用率、性能提升等）。
6. 设计原型/线框图： 可视化地展示界面和交互。

这里探讨的是一种前沿的、由AI驱动的开发范式。在这个范式中，PRD 的角色发生了根本性的转变：

1. 从“给人看”到“给AI看”：
   • 传统PRD是写给开发、测试、设计等团队成员看的，需要人类的理解和解读。
   • 在AI Coding实践中，PRD（或其结构化、AI友好的变体）是直接输入给AI智能体或大语言模型的“高级指令”。
2. 成为AI的“蓝图”：
   • AI（例如GPT-4、Claude 3、DeepSeek等）会分析、理解PRD中的需求。
   • 基于对需求的理解，AI可以自动或半自动地执行后续开发任务，例如：
     • 生成技术设计： 设计系统架构、数据库Schema、API接口。
     • 直接生成代码： 产出前端、后端、测试代码的初稿。
     • 生成测试用例： 根据需求描述编写测试场景和脚本。
3. 对PRD质量的要求更高：
   • 必须更加清晰、无歧义、结构化。 AI无法像人类一样通过模糊的上下文或沟通来“猜”出真实意图。
   • 可能需要使用更标准化、机器可读的语言来描述需求，或者结合结构化数据（如流程图、状态图、清晰的验收标准列表）。

核心上下文 - PRD

• 核心上下文 - PRD：PRD是核心上下文，但当前PRD质量参差，AI难以聚焦。
  • 
  • 问题本质：PRD拆解是一个领域特定的命名实体识别（NER）任务，即从PRD中识别“UI控件实体”。
    • 
  • 控件实体分类：参考Apple HIG与Material Design，分为输入类、按钮类、浮层面板、导航栏、内容展示类等。
    • 
    • 
  • 微调方法：采用LoRA（低秩适配） 对模型进行轻量微调，显著提升控件识别的准确率与召回率。
    • 
    • 
  • 微调效果：带图评测的多模态模型F1分数达0.85，显著高于基线（0.57）。
    • 
    • 

UI高还原度出码：从设计稿到代码的准确转换

• 低还原度原因：
  • 
  • Figma设计稿不规范（绝对布局、标记不清）
  • 大模型存在幻觉（布局复杂时推理错误）
  • 还原度低，人工审核成本高
• 还原度检测流程：
  • 
• 还原检测方案和挑战：
  • 
• 还原度检测方案对比：
  • 
  • 静态代码分析：通过LLM推断约束关系，检测率**88.5%**，无需编译，易集成。
  • 运行时渲染树检测：需编译运行，检测率仅55.4%，链路集成难度大。
• 优选静态方案：通过约束信息与样式Token比对，实现高效高精度检测。
  • 

UI组件召回：避免重复造轮子，提升代码采纳率

• 组件召回闭环迭代
  • 问题：AI生成代码未使用企业内部组件，导致采纳率低。
    • 
  • 解法：基于代码上下文与开发意图，智能召回组件库中的最佳匹配组件。
  • 进化机制：通过UI自动化采集运行时属性与截图，自动构建训练数据集，实现组件的持续自学习与迭代。
    • 

---

典型业务场景与需求分析

一个实际的业务场景和需求分析, 用户登录页面，包含手机号输入框、密码框、登录按钮、忘记密码链接及成功/失败反馈。
流程:

1. PRD
2. 控件识别（手机号输入框、密码框、登录按钮、忘记密码链接）
3. 逻辑聚合(登录成功Toast、失败弹窗）
4. 结合企业组件库与设计规范生成代码

端到端提升：定制化Code Agent在Easy/Medium/Hard需求集上，比通用Agent（如GPT-5、Claude）提升约10%。

---

总结与展望

核心结论

客户端实现PRD到代码的完全直出目前尚不可能，但可通过“评测驱动子能力提升”路径逐步推进。
应关注四个关键课题：
1. 如何构建科学的端到端评测体系？
2. PRD该如何拆解、拆解到什么粒度？
3. 如何保证UI高还原度出码？
4. 如何实现组件的智能召回与闭环迭代？

未来方向

• 生产级评测集：积累真实PRD、Figma、Commit、测试用例等数据。
• 流动闭环的企业知识库：融入自动化流程，实现数据自收集与模型自进化。
• 全周期覆盖：从编码扩展至测试、CR、Bug修复、发布全流程。
• 跨平台垂类Agent融合：实现跨系统复杂任务的端到端闭环。

AICoding 核心价值

• AI Coding不是完全替代开发者，而是作为“副驾驶”提升效率、规范流程。
• 客户端AI落地的关键在于：高质量数据、领域适配、工程化闭环。
• 长期来看，AI将重新定义软件生产流程，推动研发模式向智能化、自动化演进。

这边文章是 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人工智能席卷而来的浪潮里面抓住机遇勇于创新, 说不定会有意想不到的惊喜和收获.