在MasterGo AI里生成单选按钮,其实不像是直接画一个“圆圈加文字”那么简单。
MasterGo AI本身并不支持直接输出“单选按钮”这种原子级控件。它的逻辑是:根据你描述的交互逻辑和页面结构,在Dashboard设计稿中自动生成包含单选按钮的完整模块——比如数据筛选区、表单配置面板、状态切换栏等等。关键不在于“生成按钮”,而在于“理解你的意图,并生成符合规范的组件实例”。
明确告诉AI,你要的是什么场景
AI不会凭空猜你想要单选按钮。必须在提示词里说清楚它的用途和上下文,越具体越好。举个例子:
- “在数据筛选区域添加一组水平排列的单选按钮,选项为:全部、今日、本周、本月,选中态使用品牌主色 #FA2549”
- “用户设置面板中,‘通知方式’字段下方放置垂直单选组:邮件、站内信、信息,带图标和文字说明”
- “仪表盘顶部导航栏右侧,用单选按钮控制视图模式:概览 / 详情 / 对比”
提示词越具体,AI就越容易调用MasterGo内置的组件库(比如Ant Design或自定义UI Kit),生成语义正确、间距合规、可交互的实例。
双参考:设计稿链接 + 局部截图
只写文字描述,AI容易套用默认样式;只丢一张截图,它可能复制错层级或忽略状态反馈。推荐组合使用:
- 把MasterGo设计稿链接作为权威依据(确保颜色、圆角、字体、间距对齐)
- 额外提供一个含单选按钮的局部截图(比如你已有的规范组件图),放在reference文件夹里
这样AI就能识别出:“哦,这个项目用的是带描边+圆点选中态的风格,不是Material的墨水涟漪效果。”
生成后立刻检查,块状精修
首轮输出大概率只有基础结构——几个圆圈加文字,但没对齐、没间距、没有hover状态、没有绑定逻辑。这时候别全删重来,按「块状精修法」处理:
- 选中整个单选组 → 右键“转为组件”,方便后续批量改样式
- 单独选中未选中态的圆点 → 在右侧填充栏设为描边2px #999,背景透明
- 选中已选中态 → 填充主色 #FA2549,描边同色
- 用「Ctrl+D」复制一份,手动改文字和位置,再用「对齐工具」统一横向/纵向间距
需要注意的是,不要让AI一次性优化整页,它很容易打乱其他模块。一次只聚焦一个功能区块,效果会更可控。
需要代码交付时,记得开启研发模式
如果最终要给开发切图或生成代码,单选按钮这类交互元素需要明确语义:
- 在画布中右键该组件 → 选择「设置为表单控件」→ 类型选radio
- 进入「研发模式」→ 查看右侧「代码面板」,AI会自动标注role="radiogroup"、aria-label等可访问性属性
- 导出时勾选「带交互说明」,开发能直接看到“点击某项触发刷新图表”这类逻辑注释
这说起来其实走了一个很典型的逻辑,单选按钮的价值不在外观,而在它承载的业务判断。AI帮你搭形,你得帮它定意。
