AI 页面与交互迁移流程参考
需求背景
要把 A 项目的父子账号逻辑，迁移到 B 里面，模仿 A 中的交互、页面设计，但是不是完全照抄代码。
这是个典型的 AI 需求，即不清晰，也不明确，一开始只有大致的思路，借助 AI 边做边改。最终细化上线的流程。这篇只展示前端的流程。
flowchart TD
A[需求] --> B[A 项目提取相关页面]
B --> C[B 项目产出改造设计]
C --> D{人工核对页面和交互}
D -- 不通过 --> C
D -- 通过 --> E[进入实现阶段]
用到的 AI 工具
-
编码工具：Code X
用途：检索路由、页面入口、状态逻辑，生成映射和改造建议。
-
Playwright MCP
用途：按路由自动访问页面、截图、复现交互、沉淀证据。
流程步骤
步骤 1：在 A 项目提取页面样式和交互
flowchart TD
Start[启动本地 A 项目] --> Config[将本地启动前缀配置给 Codex]
Config -->|例如 http://localhost:3000| Command[给 Codex 下达提取指令]
Command --> MCP[调用 Playwright MCP]
MCP -->|自动搜索路由| Visit[访问所有父子账号相关页面]
Visit --> Snap[页面自动截图并提取交互和样式]
Snap --> Mark[在此基础上将需求点相关功能标注出来]
Mark -->|推荐: PICGO+GitHub 作图床\n可选: 本地存储| Doc[整理并输出为 Markdown 文档]
步骤 2：在 B 项目产出改造设计
参考步骤 1 产出的 Markdown 文档，对比 A、B 项目，确定需要在 B 项目前端页面和交互上的改动点，并在图上和文字中做明确说明。本篇 Markdown 的核心作用即是展示后续在 B 项目前端页面和交互上的具体改造方案。
flowchart TD
Doc1[参考步骤 1 输出的 Markdown 文档] --> Compare[对比分析项目 A 和项目 B]
Compare --> Find[找出项目 B 前端和交互需要修改的地方]
Find --> Mark[在页面截图上标出并用文字说明改动点]
Mark --> DesignDoc[生成最终指导 B 项目改造的 Markdown 文档]
步骤 3：文档评审关口
将步骤 2 生成的改造设计文档交由外部专业角色（如产品经理、UI 设计师等）进行评审。这是一个循环验证过程，确保理解和设计完全对齐。
flowchart TD
ReviewDoc[交付步骤 2 的需求和改造文档] --> Persons[产品和 UI 等专业人员进行审核]
Persons --> Judge{是否审核通过？}
Judge -- 否：存在问题 --> Modify[继续修改并对齐该文档]
Modify --> ReviewDoc
Judge -- 是：没有问题 --> Code[锁定设计，正式进入前端编码阶段]