如何确保AI一次性生成合理结构？

AI无法揣测你的想法，它只会严格执行你的指令。所以关键在于你输入的提示词中，是否把信息架构定义清楚。具体来说，你需要做到以下几点：

• 页面类型要写明确。例如“后台管理首页”或“小程序订单确认页”，不要使用模糊表述。
• 模块顺序要逐一列出。比如“顶部导航栏 → 搜索栏 → 卡片式服务列表 → 底部Tab栏”，这样顺序和层级一目了然。
• 模块间的关系要详细说明。比如“服务列表中每项包含图标、名称和状态标签，并且支持横向滑动”，这样AI才能准确理解你的需求。
• 避免使用模糊描述。不要写“看起来专业”这类笼统表达，直接给出具体规范，例如“采用Ant Design风格，圆角8px，主色#2B6CB0”。

用预置组件库保证视觉一致性

MasterGo AI可以直接调用Ant Design、Element Plus等预置团队组件库，这些库自带规范的间距、字体和交互反馈。一旦启用，AI生成的按钮、表单、卡片就会自动对齐系统规范，视觉上自然就整齐统一了。

• 新建项目时，在AI生成界面直接点击“预置团队库”，选择对应的设计系统。
• 生成后如果发现某个控件不匹配，选中该控件，右键选择“替换为组件库内同类型元件”。
• 后续新增页面时，记得沿用同一个组件库，这样所有页面都能保持统一的栅格和留白，大幅减少手动微调的工作量。

多轮对话，让AI补全交互与逻辑

第一次生成的结果往往只是静态布局。真正的“整理”体现在交互逻辑和数据流上。此时，你需要通过对话指令来驱动AI逐步完善。例如：

• “为‘待处理订单’卡片添加点击跳转箭头，并关联到订单详情页。”
• “给搜索框增加一个清空按钮，同时设置聚焦时边框颜色变为蓝色。”
• “将用户头像区域设置为可点击状态，点击后弹出个人信息抽屉。”

每一条指令都在推动页面从一张静态图，向有逻辑、可交互的原型演进。这才是真正意义上的“整理”过程，也是MasterGo AI发挥价值的关键环节。

导出代码，反向验证结构是否合理

最后一步，点击“导出代码”（支持React/Vue/Ant Design等框架），然后检查生成的JSX或Vue模板。如果结构混乱、嵌套过深，或者语义标签使用不当（比如用div代替按钮），说明你的提示词或AI的理解存在偏差。此时需要回退，优化提示词后重新生成。

• 一个良好的HTML结构通常表现为：语义化标签（header/main/section）、合理的class命名（例如.order-list__item）、清晰的组件拆分。
• 如果导出失败或代码明显异常，多半是因为提示词中缺少“响应式布局”“移动端适配”等关键约束条件。
• 如果导出成功且结构干净，恭喜你，AI已经按照你的预期，把逻辑层“整理”得井井有条了。