MasterGo AI 如何实现 AI 自动生成 Dashboard 的单选按钮？

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 帮你搭形，你得帮它定意。