A4--王凡--NatureCode-AI辅助源码研发实践.pdf

1、NatureCodeNatureCode-AIAI?王凡得物前端技术专家王凡得物-前端技术专家曾就职于菜鸟网络，负责菜鸟服务网关搭建，目前在得物主要负责商家前端团队，专注于AI技术在前端研发领域的实际落地发展，推动包括源码生成，单测生成，代码检测等具体应用方向落地提效。目录C O N T E N T S1.背景介绍2.AI生成源码代码3.AI生成单元测试4.落地总结&规划5.Q&A背景介绍01?代码成代码续写：根据上下提供代码的进补全然语成：基于描述或注释动成代码代码检查逻辑检测：识别潜在的逻辑问题，并提供修复测试&调试单测成：动成单元测试代码，提测试覆盖率调试建议：在调试过程中提供建议，帮助

2、问题定位代码重构&解读代码优化：根据最佳实践优化代码，提可读性注释档：动成代码注释，档，降低理解成本?AI?Cursor?IDE基于gpt4o的智能IDE，提供代码续写，生成，多模态等多种能力免费用户，每月提供50次gpt4o使用Github?CopilotGithub和 OpenAI 联合开发的AI编程助手，基于codex模型，更关注编码代码相关任务，支持Vscode，JetBrains等，用户每月10$资费?AI?Comate百度推出的AI智能编码助手，基于国产文心大模型，支持Vscode，JetBrains等，支持续写，自然语言生成，单测生成等，个人免费试用?阿里推出到的编码助手，基于通

3、义大模型，支持Vscode，JetBrains等，提供代码生成、代码优化，报错排查，以及研发问答等，个人免费试用AI?AI?现有价值针对通场景，代码续写，然语成 能极地减少代码开发成本。如具类函数，公共UI组件使等增量价值在前端领域，极少覆盖单测，通过AI辅助，能帮助前端侧不影响业务情况下，持单元测试能，提升稳定?20%8%?本输代码模型代码续写RAG向量匹配上下拼接成速度快需适配代码成模型幻觉代码库理解不充分输出细节不可调通场景策略定制场景策略前端代码特性组件定制业务中的封装组件较多，缺少相关训练数据架构规范业务团队中，不同团队架构不，规范不，需要特定满UI类代码量业务作包含UI切图实现，前

4、传统模型在此类较为缺AI生成源码代码生成源码代码02然语输RAG匹配AI中间层信息提取定制代码模板组件向量匹配AST代码插成NatureCode代码成思路成代码能直接使，符合团队架构要求成精度持对接内部API平台档，成类型持对接内部定义业务组件，代码成可充分定义定制场景幻觉&理解不充分输出细节不可调写个商品列表，筛选项包含品牌、订单号，列表项包含订单号、订单类型、创建、创建时间?务?&?然语输匹配到列表场景需求内容提取信息&格式化?务?&?加载场景模板代码解析业务配置组件向量搜索模板AST处理业务代码输出D2C?AI?D2C组件场景的AI实现思路根据矩形、文字等进行基础组件归类（按钮、输入框）

5、OCR识别矩形内部文字基础图形识别（矩形等）精细识别基础组件类型、ICON 等组件归类（规则引擎）多组件布局计算设计稿图片输入AI 根据组件使用示例生成组件使用代码代码生成D2C?AI?矩形提取过程基础图像获取视觉稿值图像通过线框识别矩形标准亮度公式进值转换边缘检测D2C?AI?组件特征提取验证流程组件开发者组件管理中心图形引擎AI大模型规则生成组件图片/代码图形/文字识别信息规则Schema信息提示词拼接识别矩形/文字存储规则1.反向验证矩形结果，失败重试2.混合历史规则验证是否冲突xx/custom-table组件D2C?AI?布局引擎行列计算空区域行列计算文本框填充模块B基础元素A基础元

6、素B模块A基础元素B文本框A模块B模块A模块B模块A文本框B遍历组件矩形中间点位置，进行模块归类归类分别得到行列分类根据模块宽高和矩形宽高得到margin值计算得到空白区域，补充div等遍历基础元素(输入框，按钮等)同理完成行列布局简单文本框矩形OCR，归类到矩形，计算margin值特殊标题型，全局OCR时，特殊处理D2C?AI?设计图输图预处理矩形边缘计算DOM结构构建Style构建组件匹配定制成多模态视觉解析PageDSLD2C直出代码的AI实现思路多模态PageDSL理解具象基于 Gpt4o多模态 的能力，大大降低原有视觉算法的解析成本通过引入中间