1. AI生码与传统工程融合实践 自然语言 =>（AIGC原子能力 + 业务架构）=> C端应用 熊洋（令弧）・重庆蚂蚁消金 体验技术负责人 蚂蚁终端体验科技大会

2. 🤝 个人介绍 • 重庆蚂蚁消金 体验技术负责人 熊洋 / 令弧 Github: gebilaoxiong (隔壁老熊) 邮箱: gebilaoxiong@gmail.com • 前 Vue.js 团队核心成员 • 主导消金公司前端技术在 AI 时代下的体系建设

3. 🤔 动因与价值：传统交付模式难以匹配业务发展速度 “代码，一定要人来写吗？” 面临问题 手机电脑 交付周期长 1~2月 美容仪器 场景 … 电器类 研发成本高 需求频繁变更 家装 中心化运营 场景化探索 效率低 各工种沟通成本高 拓展 花呗 借呗 家居类 生活用品 催化创新 “给高德打车生成个场景金融产品” 服装类 支付 【文生应用】通过自然语言输入 [商家类别] 驱动AI自动生成商户所需的定制化信贷产品

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

5. 01 提示词 程 引导AI定向生成符合业务要求的页面，提升可用性与个性化

6. 💬 提示词架构：通过三层提示词逐层推理，解决单次生成采纳率低的问题 “如何生成符合要求的页面？” 单次生成问题 注意力分散字段&布局混乱代码不可用 AgentToolTool 1.任务拆解2.界面设计3.代码生成 需求描述 支持 pipeline 编排 前端页面 个性化视觉规范 代码规范约束 ## 角色与目标## 角色与目标## 角色与目标 你是一名前端开发专家。你唯一的目标是：通过调用相关工你是一位具备丰富金融产品设计经验的资深设计师与产品你是一位顶尖的前端组件开发者，能够精准理解并执行复 具自动生成一个 H5 应用，包含开通页和支用页经理，你的任务是构思并输出一份用于信贷H5页面的页面杂的指令来生成高质量的React组件 结构描述提示词 ## 工具清单 - generateH5Layout: 生成 **开通页** 的页面布局结 - generateH5Code: 生成 **开通页** 的代码 ## 页面字段 产品介绍、品牌标识、额度信息、补充说明、产品介绍 ## 代码要求 - 使用antd-mobile的组件开发 - 样式使用LESS编写，采用rem单位

7. 🌈 视觉规范生成：基于Few-shot反推提示词，解决页面同质化问题 “让AI能自主推理最优页面结构” UI设计 “用文字告诉AI页面长什么样” 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.4rem - 阴影：卡片阴影 0 0.1rem 0.4rem rgba(89, 123, 141, 0.15) 内容 布局 “通过少量示例（1～5 个） 引导模型解答” 最终效果对比 怎么做？ 基于设计图反推 优秀布局案例 ## 优秀案例参考 激发 AI 创造性、 同时保障内容准确性 什么是Few-shot？ - [优秀案例1] - [优秀案例2] - [优秀案例3]

8. 提示词工程的局限 01 02 视觉体验优化 引入文生图技术与测评机制完善页面细节，提升页面美观度 - 视觉表现力不足，缺乏页面素材支持 - 缺少度量工具，难以量化评估创意质量

9. 🌸 视觉优化：通过文生图技术生成高质量素材，提升页面视觉美观度 “让页面摆脱AI味儿” 你是一个专业的AI视觉助手，你的任务是根据指令，生成用于AI 前后效果对比 生图的提示词。 工作流 背景图：氛围烘托 # 输入 你将收到UI设计 档 (必需): 描述 元素的详细 本，可作为 你查找信息的主要来源。 任务拆解 # 工作流程 识别 档中的UI元素，包括插图和图标。并通过JSON格式输出 UI设计 输入： 实现机制 素材生成 生图服务 MCP { "name": "Icon-1", "size": "480x480", "prompt": " 个呈45度 度线，强烈传达速度感， 为#FFC107的 代码生成 图标:识别度 向上冲刺的 箭， 实 箭尾部有两条 箭主体为#FF5252的亮红 填充，上 廓和速度线细节，现代简洁科技 "count": 1 } 输出：[图片URL] 叠加稍粗的 格，纯 实 焰或速 填充， 线条勾勒出 背景。", 焰 箭轮

10. 🤖 评测机制：通过视觉模型衡量页面质量与可用性，驱动提示词持续优化 整体质量： 93.75

11. 让静态页面 run 起来 业务架构融合 接口数据01 03 点击事件参考新能源汽车，通过“油电混动”的方式 让AI生码与项目架构深度融合 自定义组件

12. 🚀 端到端交付：构建统一运行时基座，支持产物无缝嵌入与高效调试 “如何解决最后一公里问题？” STEP1STEP2STEP3 业务架构升级数据关联预览与调试 抽象页面容器生码提示词优化实时调整 页面容器 **组件接口要求：** \`\`\`typescript 预留页面插槽 接口数据 点击事件 业务逻辑 自定义组件 interface ComponentProps { logoUrl?: string; // 产品logo地址 前端页面 导入 Agreement?: React.ComponentType<any>; // 协议组件 amount?: string;// 额度数值（不包含单位元） yearRate?: string;// 年利率（不包含%符号） onOpenClick?: () => void; // 开通按钮点击事件 … 前端页面 WeaveFox内源组件

13. 📍 实践总结：借助AI工程，我们做到了什么？ “在自然语言和 C 端应用之间建立完整映射” 7天 交付周期 50 % 首次生成良品率 100 % 全流程自动化

14. ⚓ 探索与展望：以 AI 为支点，打造下一代智能金融新体验 更强、更通用、更智能的AI生码工具 AI占比浓度 探索方向 通用性 跨端能力 一体化生成 多端同构 Prompt自迭代

15. Thanks