mastergo ai 生成 web ui 的效果高度依赖提示词的清晰度和结构，需聚焦页面类型、核心模块、交互逻辑与视觉偏好；应明确终端场景、按视觉流顺序描述模块、指定关键视觉参数、精准微调结果，并可结合原型图提升准确性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成 Web UI 的效果，高度依赖提示词的清晰度和结构。它不是“越长越好”，而是要聚焦关键设计要素——页面类型、核心模块、交互逻辑和视觉偏好。下面这些提示方法经过实测验证，能显著提升生成质量。
明确页面类型和终端场景
AI 需要先判断是网页、移动端还是后台系统，这直接影响布局逻辑和组件尺寸。避免模糊表述如“做一个网站”，改用具体指令：
- “生成一个响应式电商网站首页，适配桌面端和手机端”
- “设计健身器材后台管理系统，网页版，深色主题”
- “为微信小程序生成商品详情页，顶部轮播图+规格选择+悬浮购买按钮”
描述结构模块时按视觉流顺序写
从上到下、从左到右描述，符合人眼阅读习惯，也更易被 AI 解析为合理布局：
- 错误示范：“有搜索框、轮播图、商品列表、底部导航”（无顺序、无归属）
- 正确示范：“顶部固定导航栏含 Logo、搜索输入框、用户头像；下方是全宽轮播图；接着是分类图标网格（4列）；再下面是‘热销商品’标题+3×2 商品卡片网格（含图片、名称、价格、评分、加入购物车按钮）；页面底部为 Tab 导航：首页、分类、购物车、我的”
指定关键视觉参数，不依赖默认值
颜色、圆角、明暗模式、字体大小等若不说明，AI 会按通用风格处理，可能偏离预期：
- “主色调使用 #FA2549，按钮圆角设为 8px，整体采用浅色模式”
- “文字层级：标题 20px，正文 14px，行高 1.6；所有卡片阴影统一为 0 2px 8px rgba(0,0,0,0.08)”
- “表格行高设为 48px，表头背景 #F5F5F5，悬停态背景 #F9FAFB”
对生成结果做精准微调提示
初次生成不满意时，不用重写整段描述，直接针对问题点下达指令：
- “把所有按钮文字放大 1.2 倍”
- “将商品卡片之间的垂直间距从 16px 改为 24px”
- “让轮播图指示器居中显示在图片下方”
- “把筛选栏中的‘价格区间’滑块改为双滑块样式”
结合原型图或参考样例更高效
文字描述有局限，上传手绘草图、线框图或竞品截图后，再加一句提示，效果更稳：
- “根据上传的草图，生成高保真 Web 页面，保持左侧导航宽度 220px，右侧内容区使用栅格系统布局”
- “参考这张 Ant Design 管理后台截图，生成相同风格的数据看板，包含销售额趋势折线图、热销榜表格、环形图”
