让AI“一句话生成页面”,早就不稀奇了。打开千问办公、qoder,两句提示词下去,一堆好看的HTML页面就出来了。
![]()
但这些页面真的能上线吗?很难。能投放到手淘端内和端外吗?不太可能。一堆AI直接生成的HTML,撑不起淘内的页面渲染体系——性能、埋点、商品数据动态渲染,通通不符合要求。
淘天集团营销&交易技术团队在方舟AI会场项目里,想解决的就是这道坎:让生成的页面“想法即生成,生成即可投放”。目前淘内已经有很多页面在投放上线中。
他们给会场Agent列了四个特点:内容实时策划,基于人群、场景、热点做互联网内容深度挖掘;淘天设计水准,沉淀淘系会场设计经验,生成高颜值的精修会场;真实货品运营,可以在会场中对淘内商品进行圈选并投放;C端线上投放,生成符合生产环境要求的会场,可投淘内或端外。
一份HTML,扛着三种约束
让AI随便生成一张好看的HTML比较容易,但要它可用、可运营、可投放,约束就来了。团队把约束分成三层。
视觉设计是软约束。visual-design与风格Skill守住气质、视觉层级和关键特征,相框、字体、层叠、留白仍可组合,让模型把设计做好,而不是照模板填空。
货品数据是认知约束。page-data建立选品、Slot与召回认知,字段协议规定内容如何进入页面;AI要分清哪些内容随页面保留、哪些来自商品字段。
生码是硬约束。page-build与Ark协议规定Section、卡片、字段的表达与装配边界;外观自由,但节点归属、字段位置、动态组件输入必须明确。
难点在于,同一棵DOM要同时承载布局、供给、字段绑定与转码要求。视觉设计看DOM结构与盒模型,数据链路识别Slot、组内位置与字段承载节点,转码链路提取楼层、组件与样式关系。这些关系可以对应,却不能强行合并成同一层级。
团队举了个具体的坑:给Slot包一层容器,Grid/Flex的直接子项就变了,跨行跨列与位置选择器都受影响;display: contents也会改变DOM父子关系。他们的做法是把供给写进属性——协议把data-ark-slot、data-ark-index直接写在卡片上,运行时按这两个属性定位卡片并绑定字段,两种分组分别表达。
运营改一句话,AI要推导出数据方案
用户提一句“第一个坑位固定主推A,紧接两位只放修护类,其余继续个性化,布局不动”,这句话里没提选品集,也没提数据。AI得先明白“第一坑”是位置不是商品ID,再按Skill建立准绳:selection-dataset说清有效选品条件,page-data说清数据插槽的共享规则。
然后落实成数据方案:A用商品ID条件建独立选品集与pin Slot,修护区建repair Slot,其余保留原recommend。执行前还要核验供给,候选不足要暴露出来,不能写静态卡片掩盖。最后主推位绑pin/0,修护区绑repair/0、1,其余继续引用原组,检查四个要求同时成立。
视觉这块,团队和设计师合作产出了30+ Design Skill,把会场设计语言变成AI可理解的规则:情绪、材质、排版、组件结构、色彩角色和禁用规则。比如“海报拍立得”保留倾斜黑板、摆正面板和粗描边,LOOKBOOK强调扁平、无投影和编辑式排版。
色值不靠模型看图猜。工程手段先做像素采样和统计,返回底缘色、主色簇等稳定可复核的色值,AI再按风格规范映射到背景、主色和强调色。
SubAgent:收益直接,协作成本也要算
SubAgent的收益很直接:把大段探索放进独立上下文,让专业规则更聚焦,让互不依赖的任务并行。策划结构明确后,洁面、修护、防晒可以分别创建选品集,各自在局部上下文里查询指标、预览样本,再并行交回结果。
但会场业务会连续修改同一份页面,协作成本躲不掉。团队列了三个容易踩的问题:交回了结果没交齐依据,选品子Agent只回“已创建选品集”,主Agent知道ID,却未必知道哪些商品因价格排除、哪些因敏感肌限制排除;追问交给谁,要先知道谁掌握足够依据;上下文各自独立,修改仍汇入同一份会场,设计侧按新确认改了卡片结构,绑定侧还基于旧节点形成修改,两份局部结果合在一起就可能错绑或覆盖。
他们的选择是:主Agent持续负责用户对话和业务主循环,Skill提供做事的方法,Task工具提供委派与并行执行能力。子任务结束后,执行记录记到工作区,Task返回结论并附上已归档执行记录的路径——结论进入主循环,过程保留为可重读的依据。
质检要确定性,但不能掐死创造力
设计阶段要灵活,交付阶段质量必须过关,质检工具因此有个前提和两个基本要求:不能阻碍AI在视觉设计和商品运营上的创造力;确定性高,检测速度快。
琐碎问题不少。掉坑检查先确认共同父容器,区分显式缺格与末行不满;倾斜卡片用变换前offsetWidth判断原始卡宽,避免把拍立得倾斜当成不齐;遮挡用3×3采样加elementsFromPoint检查层叠,外部浮层可能是贴纸,作warning交截图复核。允许设计不等于豁免重叠,商品卡超阈值重叠仍报error。
团队也把话说得很直:如果为减少错误把生成限制成几套模板,设计的创造力也会一并消失。
从一句话到线上会场,中间隔着的不是生成能力,而是一整套让生成结果可运营、可投放、可验收的环境。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.