读前先明确一个前提：MasterGo AI 目前还不能直接生成小程序的原生代码（比如微信小程序的 WXML 和 WXSS），但它确实能高效产出符合微信小程序设计规范的主题 UI 界面图。换句话说，你拿到的是一张成熟的设计稿，再通过手动适配或者转译通用前端代码，就能快速落地。关键就看你描述得够不够准、参数选得对不对、以及会不会用调整指令来微调。
那么，具体要怎么做？
明确小程序平台与设计规范
微信小程序有它自己的一套视觉约束。比如安全区域、底部 TabBar 的高度（大约 50px）、顶部导航栏的高度（44–64px）、rpx 这种独特的布局逻辑、圆角普遍偏小（常用 8px）、图标尺寸统一（比如 24×24 或 48×48）。这些细节，在输入描述时都得主动体现出来。
举几个例子：
- 开头直接注明“微信小程序首页”，而不是含糊地说“移动端”
- 写明“顶部固定导航栏，高度44px，背景色#FFFFFF，文字深灰#333”
- 强调“底部TabBar含4个图标：首页、分类、购物车、我的，选中态高亮色#FA2549”
- 要求“所有间距使用8px/16px/24px等偶数倍，禁用非整数像素值”
这些小细节，决定了生成结果是否能用。
输入精准的主题化描述
主题 UI 的核心是风格一致性。别只写功能，要带上设计语言。比如：
- 用颜色锚点：像“主色#FA2549，辅助色#666，背景色#F8F8F8，文字默认#333，禁用纯黑#000”
- 定圆角与阴影：“按钮圆角8px，卡片圆角12px，仅在卡片和弹窗加轻微阴影（box-shadow: 0 2px 8px rgba(0,0,0,0.06)）”
- 指定字体层级：“标题用18px加粗，正文14px常规，辅助说明12px浅灰#999”
- 加入小程序典型组件：“使用微信风格的‘搜索框’组件（带放大镜图标+占位文字），‘加入购物车’按钮采用绿色渐变底色”
描述越具体，AI 越能理解你想要的效果。
生成后快速适配小程序开发
AI 交给你的是设计图，不是现成的代码，但可以大幅缩短开发路径。具体操作有这几步：
- 点击“插入到画布”后，在 MasterGo 中右键图层 → “导出为 SVG/PNG”，用于替换小程序静态资源
- 用“代码导出”功能生成 Vue 或 React 版本（基于 Tailwind CSS），再对照小程序语法手动转译。比如把
class="flex items-center"改为class="flex flex-row items-center"，把v-if换成wxs:if - 利用生成图的尺寸标注（MasterGo 自带标尺和间距提示），直接套用 rpx 单位。例如图中按钮高 44px → 小程序中设为
height: 88rpx（按 2:1 换算） - 对 TabBar、导航栏等高频模块，生成后保存为“设计系统组件”，后续页面复用，保证主题统一
这套流程跑熟了，效率会明显提升。
常见问题处理技巧
生成结果要是偏离预期，别急着重来。用微调指令快速修正更高效：
- “把所有按钮文字改为14px，字重500”
- “TabBar 图标尺寸统一为48×48，间距调至20px”
- “将轮播图高度设为300px，图片圆角12px”
- “移除所有下划线，链接改用颜色区分（#FA2549）”
这些小调整，往往能解决大部分问题。