MasterGo AI 本身并不直接提供生成复选框组代码的功能——其核心能力聚焦于整页或模块级别的 UI 结构自动生成。不过，换个思路同样能实现目标：通过清晰的业务场景描述，配合后续的微调指令，AI 可以在设计稿中自然融入符合实际逻辑的复选框组，并支持导出为可直接使用的前端代码。关键在于，将「复选框组」置于真实的业务场景中进行阐述，而不是仅仅抛出一个控件名称。
明确场景后再描述，避免只说「我要一个复选框组」
AI 对抽象术语的理解能力有限，但对具体行为模式非常敏感。例如：
- ❌ 不推荐：「加一组复选框」
- ✅ 推荐：「用户注册页，性别选择用单选按钮，兴趣标签用多选复选框组，选项包括：健身、瑜伽、跑步、游泳、力量训练，最多选3项，超出时提示『最多选择3项』」
按照这样的描述，MasterGo AI 会自动执行以下操作：根据屏幕尺寸判断横向或纵向排列，配置合适的间距、对齐方式与文字大小，并为每个选项添加可点击区域与状态反馈样式。当导出 React 代码时，还会生成包含 useState 和校验逻辑的完整组件。
生成后快速补全或修正复选框逻辑
设计稿插入画布后，如果复选框的样式或数量不符合预期，无需推倒重来。直接在 AI 输入框中追加指令即可：
- 「将『兴趣标签』复选框改为横向排列，圆角设为4px，未选中状态边框颜色#D9D9D9」
- 「给第3个复选框添加禁用态，标注『VIP专属』」
- 「所有复选框右侧文字统一使用14px字体，行高1.5」
这些微调指令响应速度很快，通常1到2秒即可刷新预览，比手动拖拽操作效率高出不少。
导出代码时注意框架适配细节
MasterGo AI 支持导出 Vue、React、HTML 等格式，但复选框的行为逻辑需要结合框架特性进行适配：
- React 版本使用
checked+onChange控制受控组件，自动绑定数组状态 - Vue 版本默认采用
v-model绑定数组，包含.sync或@update:modelValue兼容写法 - HTML 版本仅包含结构与基础 class，交互逻辑需要后续补充 JavaScript
导出前建议勾选「包含交互示意」选项（如果界面有点击反馈效果），AI 会额外生成伪类状态（:checked、:disabled）的 CSS 规则。