Codex 驱动的移动端AI全栈开发：从 Relay 原型图到可交付链路
内容提要
AI编程工具降低了移动端开发门槛，但“让AI写页面”不等于完成交付。移动端C端页面需严格遵循Relay原型图，将其拆解为视觉、交互、数据、业务、工程五类契约。后端收口复杂决策，前端执行设计表达，AI在约束内生成代码，并通过截图与链路双重验收。核心是受控生成，而非自由设计，确保页面既像设计稿又能真实走通业务链路。
延伸解读
PC与移动端：AI开发标准为何不同
文章指出，PC运营端页面以功能闭环为中心，用户是内部人员，容忍度高，AI只需快速搭建骨架即可。而移动端C端页面直接面向用户，承担品牌信任和业务转化，设计约束强。因此，AI全栈开发不能一概而论，必须先判断页面类型，否则容易把移动端页面做成“能跑的后台页面”。
Relay图不是截图，而是需求协议
Relay原型图常被误解为视觉参考，但文章强调它更像一份需求协议，包含页面结构、交互路径、视觉约束、数据需求和验收标准。AI开发的第一步不是写提示词，而是让Codex对Relay图进行结构化解析，拆解为视觉、交互、数据、业务、工程五类契约，从而减少AI猜测，降低返工风险。
后端收口决策，前端专注表达
移动端页面中，按钮跳转、状态展示等常依赖复杂业务逻辑，如订单类型、权益状态等。文章建议由后端统一判断并下发决策结果，前端只负责展示和触发。这样能避免端侧逻辑膨胀，保证多端状态口径一致，也便于隔离特殊场景，降低对公共链路的影响。
双重验收：视觉与链路缺一不可
移动端C端页面验收不能只看功能完成，需同时通过视觉验收和链路验收。视觉验收确保页面贴近设计稿，包括结构、间距、状态等；链路验收确保真实数据下接口、跳转、分支逻辑正确。只有两者都通过，页面才算真正可交付，避免“像但不可用”或“能用但不像”的问题。
Q&A
移动端C端页面与PC运营端页面在AI全栈开发中的核心区别是什么？
PC运营端页面以功能闭环为中心，设计约束较弱，本质是数据操作界面；移动端C端页面直接面对用户，强调用户体验，本质是用户任务界面，必须严格遵循Relay原型图，注重视觉、交互、信息层级和业务信任感。
Relay原型图在移动端AI开发中扮演什么角色？为什么不能只当截图看？
Relay原型图不是简单的视觉截图，而是需求协议，它定义了页面结构、交互路径、视觉约束、数据需求和验收标准。在AI开发中，它是Codex理解需求、拆解任务和生成代码的输入协议，需要被结构化解析，而不是仅仅作为参考图片。
移动端AI开发中，UI稿需要拆解成哪五类契约？各自包含什么内容？
五类契约包括：视觉契约（颜色、字号、圆角、间距等）、交互契约（用户操作方式、状态反馈）、数据契约（接口字段映射、空值处理）、业务契约（按钮背后的业务决策、跳转逻辑）、工程契约（组件、API、路由等工程约束）。
为什么移动端页面不能让AI自由设计？AI自由设计常见哪些问题？
因为移动端C端页面是产品体系的一部分，必须符合现有App的视觉语言和交互习惯。AI自由设计容易产生营销落地页风格、PC卡片流、多余信息展示、错误链接、忽略状态、不符合设计系统等问题，导致无法通过验收。
在移动端AI全栈开发中，后端的主要职责是什么？为什么不能只提供接口？
后端需要收口复杂业务决策，如按钮是否展示、文案、跳转链接等，而不是只提供CRUD接口。这样可以使前端更轻、业务状态口径统一、特殊逻辑隔离，避免端侧复杂度膨胀。
移动端AI全栈开发的推荐流程是什么？请简述七个步骤。
推荐流程包括：1.识别页面类型（PC还是移动端C端）；2.拆解UI稿（视觉、交互、状态等）；3.还原业务链路（入口、接口、跳转）；4.前置接口契约（真实JSON、字段消费表）；5.后端收口复杂逻辑；6.前端受控生成（在约束内生成代码）；7.双重验收（截图对比设计稿、真实链路走通）。
移动端C端页面的双重验收具体指什么？各自关注哪些方面？
双重验收包括视觉验收和链路验收。视觉验收关注页面是否贴近设计稿，如结构、卡片、间距、字号、状态等；链路验收关注真实使用是否可行，如接口请求、字段消费、跳转正确、特殊状态分支等。只有两者都通过才算完成。
给Codex的提示词为什么需要像交付协议一样？其结构应包含哪些部分？
因为移动端AI开发中，提示词需要显式化隐含约束，减少AI猜测，避免返工。结构应包含页面定位、Relay图解析、UI契约、业务链路、接口契约、工程边界、反例约束、验收标准等部分。
