MasterGo AI通过自然语言描述生成按钮组原型，关键在于明确功能定位、数量、排列方向、状态样式及交互逻辑；生成后可微调并保存为组件复用。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

MasterGo AI 自动生成原型按钮组，本质不是靠点击某个“按钮组生成器”，而是通过自然语言描述触发AI理解交互逻辑与视觉结构，再输出含按钮组的完整页面原型。关键不在按钮本身，而在你如何说清它的角色、状态和上下文。

明确按钮组的功能定位

AI需要知道这组按钮是导航栏、操作栏，还是表单提交区。比如写“底部固定TabBar，包含首页、发现、+、消息、我的5个图标按钮，选中态高亮为蓝色”，AI就能识别这是移动端导航按钮组，并按规范排布。

• 避免只说“做个按钮组”，要说明用途：是筛选标签？步骤流程？还是功能操作？
• 注明数量、排列方向（横向/纵向）、是否带图标或文字标签
• 如有交互反馈，可补充：“未选中灰色，选中后背景变蓝，文字加粗”

用典型场景代替抽象指令

直接描述真实使用情境，比罗列样式更有效。AI对“用户在订单页点击‘确认支付’跳转到支付方式选择”这类语句的理解，远胜于“画一个红色主按钮+两个灰色辅助按钮”。

MaterialDesign风格下拉菜单jquery插件

menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。

下载

• 示例有效提示：“商品详情页底部，三个横向按钮：‘加入购物车’（主色填充）、‘立即购买’（描边样式）、‘收藏’（图标+文字，无背景）”
• 复杂逻辑可分句说明：“筛选区域顶部有一排标签按钮，包括‘全部’‘新品’‘折扣’‘热销’，点击后对应商品列表实时刷新”
• 避免混用术语：“Button Group”“Ant Design风格”等词可能让AI过度联想框架细节，中文场景描述更稳

生成后快速微调按钮细节

首次生成的按钮组可能间距偏大、圆角不一致或颜色偏离预期，这时不用重写整段提示词，直接追加指令即可。

• 调整尺寸：“把所有按钮高度统一为48px，内边距左右24px”
• 优化视觉：“‘立即购买’按钮用渐变蓝，其余按钮保持白色背景+1px浅灰边框”
• 补交互示意：“在‘加入购物车’按钮右侧加一个小红点，表示有未读消息”

导出与复用按钮组结构

生成后的原型中，按钮组是可选中的图层组，支持单独复制、保存为组件或导出代码。若需多页复用，建议在MasterGo中将其拖入团队组件库。

• 右键按钮组 → “保存为组件”，命名如“通用底部TabBar”
• 后续新建页面时，在组件面板搜索调用，无需重复生成
• 导出React/Vue代码时，按钮组会自动转为或封装好的自定义组件