6.AI生码与传统工程融合实践-令狐.pdf

《6.AI生码与传统工程融合实践-令狐.pdf》由会员分享，可在线阅读，更多相关《6.AI生码与传统工程融合实践-令狐.pdf（15页珍藏版）》请在三个皮匠报告上搜索。

1、AI生码与传统工程融合实践自然语言=（AIGC原子能力+业务架构）=C端应用蚂蚁终端体验科技大会熊洋（令弧）重庆蚂蚁消金 体验技术负责人 个人介绍重庆蚂蚁消金 体验技术负责人前 Vue.js 团队核心成员主导消金公司前端技术在 AI 时代下的体系建设熊洋/令弧Github:gebilaoxiong(隔壁老熊)邮箱:花呗借呗支付场景中心化运营场景化探索 动因与价值：传统交付模式难以匹配业务发展速度“代码，一定要人来写吗？”手机电脑美容仪器电器类家装家居类生活用品服装类面临问题交付周期长 12月研发成本高 需求频繁变更效率低 各工种沟通成本高拓展催化创新【文生应用】通过自然语言输入驱动AI自动生成

2、商户所需的定制化信贷产品“给高德打车生成个场景金融产品”商家类别 技术难点：AI对复杂任务的理解与表达能力有限，难以实现端到端交付“为什么AI不行？如何解决？”业务理解模型限制文生应用的问题应用：超出模型的交付能力风格：同质化程度高页面：字段&布局错乱，可用性低借鉴Manus任务规划、工具调用与自我校正机制，将复杂任务降维三大核心能力（=页面结构 视觉调优 代码生成 项目集成）=ni=0测评机制用户需求代码产物解决思路优化提示词，提升页面可用性定向生成引入文生图能力，优化视觉体验视觉体验增强抽象业务架构，产物无缝嵌入一体化集成01提示词程01引导AI定向生成符合业务要求的页面，提升可用性与个性

3、化 提示词架构：通过三层提示词逐层推理，解决单次生成采纳率低的问题“如何生成符合要求的页面？”#角色与目标你是一名前端开发专家。你唯一的目标是：通过调用相关工具自动生成一个 H5 应用，包含开通页和支用页#工具清单-generateH5Layout:生成*开通页*的页面布局结-generateH5Code:生成*开通页*的代码#角色与目标你是一位顶尖的前端组件开发者，能够精准理解并执行复杂的指令来生成高质量的React组件#代码要求-使用antd-mobile的组件开发-样式使用LESS编写，采用rem单位#角色与目标你是一位具备丰富金融产品设计经验的资深设计师与产品经理，你的任务是构思并输出

4、一份用于信贷H5页面的页面结构描述提示词#页面字段产品介绍、品牌标识、额度信息、补充说明、产品介绍支持 pipeline 编排个性化视觉规范代码规范约束需求描述前端页面1.任务拆解2.界面设计3.代码生成AgentToolTool字段&布局混乱代码不可用注意力分散单次生成问题 视觉规范生成：基于Few-shot反推提示词，解决页面同质化问题“让AI能自主推理最优页面结构”内容“用文字告诉AI页面长什么样”UI设计布局#优秀案例参考 -优秀案例1 -优秀案例2 -优秀案例3怎么做？最终效果对比 什么是Few-shot？“通过少量示例（15 个）引导模型解答”激发 AI 创造性、同时保障内容准确性

5、基于设计图反推优秀布局案例e.g.#页面结构顺序1.额度信息区2.金额输入区3.核心功能卡片区4.底部操作区（按钮+导航）#1.页面背景与全局样式-背景：线性渐变 linear-gradient(180deg,#90EE90 0%,#EAFBF0 12%,#FFFFFF 5rem)。-主色调：#90EE90（按钮/高亮元素）。-辅色：-文字主色：#333333 -文字次色：#666666 -分割线：#EEEEEE-字体：-中文：PingFang SC（iOS）/Noto Sans（Android）-数字：?ibaba Sans-字重：标题 Regular，正文 Regular-圆角基数：0.4

6、rem-阴影：卡片阴影 0 0.1rem 0.4rem rgba(89,123,141,0.15)引入文生图技术与测评机制完善页面细节，提升页面美观度0102视觉体验优化-视觉表现力不足，缺乏页面素材支持-缺少度量工具，难以量化评估创意质量提示词工程的局限 视觉优化：通过文生图技术生成高质量素材，提升页面视觉美观度“让页面摆脱AI味儿”前后效果对比背景图：氛围烘托图标:识别度实现机制任务拆解UI设计素材生成代码生成工作流生图服务MCP输入：name:Icon-1,size:480 x480,prompt:个呈45度