AI时代体验技术新范式：生成式 UI-山糕.pdf

1、1成式 UI:AI时代体验技术新范式AI for frontend 付宝体验技术部前端程师糕2黄兆嵩支付宝体验技术部（山糕）演讲嘉宾前端程序员是否会消失？0.一位产品经理的Claude-UI生成方案。输入各类参考信息，循序迭代。重新定义设计研发AI第一章1.我们希望做到 数据驱动的自动化、智能化UI生产与投放LLM代码部署发布调试接入联调生产者投放渲染用户产出代码到上线发布的过程，仍充斥大量人工介入本质上还是针对场景由生产者生产页面没有做到千人千面生产者用户LLM监督数据输出数据驱动生产 智能生产智能投放21重新定义设计研发AI第一章2.想要落地，仍面临的几个挑战务设计和逻辑怎么接入业路怎么实

2、现标准化链时费卡的问题如何解决费重新定义设计研发AI第一章2.怎么实现最简生成式UI链路路怎么实现标准化链基于需要展示的内容和用户的自然语言输入，动态生成个性化界面和业务交互内容。为用户提供自然、精准、实时的人机交流渠道和千人千面的视觉表达。AI驱动的智能化生产方式 生成式 UI路的设计与实现链第二章3.账单场景案例展示内容绑定1动效生成3布局生成2#核心职责核心职责作为UI设计师和领域特定语言(DSL)程序员,严格遵守角色、技能、规则和工作流程。根据输入数据,设计和生成UI界面,输出JSON格式的DSL字符串.(UI设计或代码的要求如“符合移动端尺寸和iOS 设计规范”)#规则规则1.展示所

3、有的数据 2.避免展示重复信息 3.使用tailwind进行布局和样式编辑#工作流程工作流程1.深入理解输入数据.2.选择合适组件并设置参数(params),3.将选择好的组件组成成一个UI，采用总分结构布局UI内容.#Output demo#Output demo“name”:“div”,“className”:“flex”,“params”:,”children:name:组件name,params:XXXXXX:XXXXXXX,.,#参考下面的参考下面的mockmock 数据数据:#设计和布局参考下图设计和布局参考下图:.#Output#Output4.输出UI DSL的示例，同理可以输

4、出Markdown or XML等格式的UI划分数据输出布局输出UI输出布局输出UI输出UI方案一方案二方案三路的设计与实现链第二章设计参考2数据参考1#核心职责核心职责作为UI设计师和领域特定语言(DSL)程序员,严格遵守角色、技能、规则和工作流程。根据输入数据,设计和生成UI界面,输出JSON格式的DSL字符串.(UI设计或代码的要求如“符合移动端尺寸和iOS 设计规范”)#规则规则1.展示所有的数据 2.避免展示重复信息 3.使用tailwind进行布局和样式编辑#工作流程工作流程1.深入理解输入数据.2.选择合适组件并设置参数(params),3.将选择好的组件组成成一个UI，采用总分

5、结构布局UI内容.#Output demo#Output demo“name”:“div”,“className”:“flex”,“params”:,”children:name:组件name,params:XXXXXX:XXXXXXX,.,#参考下面的参考下面的mockmock 数据数据:#设计和布局参考下图设计和布局参考下图:.#Output#Output5.Agent似乎只需要了解字段的结构、名称、类型和数据特征(长短、多少)据全都拼进去数List length10value:numberList length10 namestock name:title,type:string,len

6、gth:31,name:totalAmount,type:number,name:dailyConsumption,type:List,length:31,value:name:date,type:string,length:15,name:amount,type:number,name:TopConsumptionDetails,type:List,length:5,value:name:name,type:string,length:20,name:amount,type:number,name:type,type:string,length:4,name:description,type