UI 页面还原
用于根据已经确定的 UI 效果图，在当前项目中还原页面。
原始 UI 效果图是最终视觉基准。
不要重新设计页面，不要增加效果图中不存在的业务、模块或视觉元素。
输入
执行时需要：
- 原始 UI 效果图
- 当前项目代码
- 目标页面、路由或业务模块
页面素材支持两条路线：
- 已有素材：用户已提前准备图片、插画等页面素材，并提供素材目录或具体文件路径。
- 生成素材：用户未提供素材时，根据原始 UI 效果图，使用当前模型的图片生成能力创建对应素材，并保存到当前项目对应的素材目录中。
如果没有提供具体页面文件，可以根据页面语义在代码库中查找。
如果找到多个可能的目标页面，不能自行选择，应立即向用户确认。
生成素材时，只创建原始 UI 效果图中已经存在的图片、插画等视觉内容，不重新设计，也不增加效果图中不存在的元素。
第一步：分析 UI
分析原始 UI 效果图，生成：
page-structure.md
提取后续实现需要的信息：
- 页面区域和层级结构
- 各区域之间的布局关系
- 元素尺寸和比例
- 间距和对齐关系
- 字体、颜色、圆角、边框、阴影
- 图片、插画、Logo、图标等视觉元素的位置
- 重叠、遮挡、溢出和裁切关系
如果存在 ui-ux-pro-max，可以使用它辅助分析，但不得使用其设计建议改变原始 UI。
定位原则
这一阶段只描述效果图中能够观察到的视觉事实，不提前决定具体代码实现方式。
对于标题、插画、卡片、表单等关键区域，重点记录：
- 相对于父区域的位置
- 元素之间的相对距离
- 对齐关系
- 重叠和遮挡关系
- 大致位置或比例
不要仅根据单张静态效果图擅自推断底部锚定、自动填充剩余空间或随屏幕高度变化的位置策略。
无法确定时不要猜测，按“待确认项处理原则”处理。
当前阶段不要修改页面代码。
第二步：查询现有实现
根据：
- 目标页面
page-structure.md- 当前代码库
生成：
implementation-mapping.md
如果存在 codebase-memory-mcp，优先使用它查询代码库。
优先查找：
- 相似页面或相似业务实现
- 可复用的页面布局
- 已有业务组件
- 当前页面需要的公共组件
- 与当前页面相关的已有样式
只记录对当前页面真正有价值的内容。
简单判断：
复用：可以直接使用调整：可以基于现有实现修改新建：没有合适实现，需要新增
不要对普通容器、文字或没有复用价值的节点逐一分析。
当前阶段不要修改页面代码。
第三步：登记页面素材
根据：
- 原始 UI 效果图
page-structure.mdimplementation-mapping.md- 已有素材，或根据原始 UI 效果图生成的素材
生成：
assets-list.md
如果用户已提供素材，逐个检查提供的素材文件。
如果用户未提供素材，则根据原始 UI 效果图识别需要独立图片文件的视觉元素，使用当前模型的图片生成能力创建对应素材，并保存到当前项目对应的素材目录中，再进行素材登记。
结合：
- 素材本身的视觉内容
- 原始 UI 效果图
page-structure.md中的页面区域
判断每个素材对应 UI 中的哪个区域或元素。
建立：
素材文件 → UI 区域 / 元素
的对应关系。
记录：
- 素材名称
- 实际文件路径
- 对应页面区域或元素
- 必要的使用说明，例如透明背景、裁切、溢出、遮挡关系
不要只根据文件名判断素材用途，应结合素材视觉内容和原始 UI 效果图进行匹配。
如果 UI 中必须使用某个独立素材：
- 已有素材路线中，在指定素材位置没有找到时，标记为
缺失。 - 生成素材路线中，先根据原始 UI 效果图生成该素材；如果无法生成，再标记为
缺失。
如果素材与 UI 的对应关系无法可靠判断，按“待确认项处理原则”处理。
由项目现有组件、图标库或代码实现的视觉元素，可以直接注明来源，不需要独立素材文件。
当前阶段不要修改页面代码。
待确认项处理原则
发现无法确定的问题时，先判断它是否会阻塞后续实现。
阻塞确认
如果不确认就可能导致以下内容做错：
- 目标页面
- 业务逻辑
- 主要页面结构
- 必须使用的素材
- 素材与 UI 的对应关系
- 其他会明显影响实现结果的关键决策
必须立即向用户确认。
如果当前客户端提供用户确认、交互式提问、表单或弹框能力，优先使用该能力发起确认。
如果当前客户端没有交互式确认能力，则立即在当前对话中向用户提问并停止执行。
不要只把阻塞问题写进 md 文件后继续执行。
非阻塞确认
如果问题可以在不改变主要结构和业务的情况下继续，例如：
- 少量尺寸误差
- 图片缩放比例微调
- 轻微位置偏差
- 阴影、圆角等视觉细节
不需要打断用户。
在对应文档中记录采用的默认处理方式，继续实现，并在视觉校验阶段调整。
第四步：实现页面
开始实现前确认：
page-structure.md已生成implementation-mapping.md已生成assets-list.md已生成- 没有页面必需的缺失素材
- 没有未解决的阻塞确认
存在非阻塞确认不影响页面实现。
开始实现目标页面。
实现时：
- 最终视觉以原始 UI 效果图为准
- 页面结构参考
page-structure.md - 代码复用参考
implementation-mapping.md - 页面素材参考
assets-list.md
不要重新设计页面。
不要为了复用现有组件而明显牺牲 UI 还原度。
对于标题、插画、卡片、表单等关键区域，以效果图中的视觉位置和相互关系为准。
不要为了填满屏幕或方便布局，擅自改变关键元素之间的距离。
第五步：视觉校验
页面实现完成后，运行页面并与原始 UI 效果图进行对比。
优先检查：
- 整体布局
- 主要区域的位置和尺寸
- 元素之间的间距和对齐
- 关键区域之间的位置关系
- 控件尺寸
- 字体大小和字重
- 图片和插画的位置、比例、裁切
- 颜色
- 圆角、边框和阴影
发现明显差异后直接修正，并再次对比。
非阻塞确认项优先在这一阶段根据实际渲染结果调整。
页面能够正常运行不代表还原完成。
最终以原始 UI 效果图为准。
使用示例
示例 1：使用已准备好的素材还原页面
用户：
/ui-replica
根据我提供的 UI 效果图还原登录页面。
目标路由：/login
页面素材在：src/assets/login/
预期：使用用户提供的素材完成素材登记、页面实现和视觉校验。
示例 2：没有现成素材时生成素材
用户：
/ui-replica
根据我提供的 UI 效果图还原首页。
目标路由：/home
没有额外素材，请直接根据 UI 效果图生成需要的图片或插画，并放到项目对应的素材目录中。
预期：根据原始 UI 效果图生成页面所需素材，登记到 assets-list.md，再完成页面实现和视觉校验。
