用过 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 管理后台截图，生成相同风格的数据看板，包含销售额趋势折线图、热销榜表格、环形图”