mastergo ai 生成 dashboard 输入框组需用结构化语言明确控件类型、用途、布局与交互意图，如“数据看板顶部筛选区：含日期范围选择器、品类下拉框、状态开关按钮”，并指定排列方式、样式规范、响应行为及语义化导出规则。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
明确输入框组的业务角色
AI 需要知道这些输入框是干什么用的。比如“筛选条件栏”和“新建表单”在视觉层级、间距逻辑、标签对齐方式上完全不同。
- 写成“数据看板顶部筛选区：含日期范围选择器（带日历弹窗）、品类下拉框（支持多选）、状态开关按钮（启用/禁用）”，AI 才会生成带图标、对齐线、合理留白的组合
- 避免模糊表述如“放几个输入框”，否则可能生成孤立、无标签、无间距的默认样式块
- 如果涉及搜索场景，可补充“搜索框右侧带放大镜图标，按回车触发查询”，AI 会自动添加图标并预留交互热区
指定布局与样式约束
Dashboard 页面强调信息密度与一致性，需主动告诉 AI 排列方式和视觉规范。
- 用关键词控制排列：“水平并排三列”“垂直堆叠，每项上下间距16px”“网格布局，每行显示2个输入项”
- 设定统一风格：“所有输入框圆角4px，边框色#D9D9D9，聚焦态描边#FA2549”——主题色会同步影响按钮、标签等关联元素
- 注明响应行为：“移动端下自动转为单列纵向排列”，AI 会在画布中生成适配断点的自动布局容器
生成后快速调整输入组细节
首次生成未必完全贴合，但 MasterGo AI 支持自然语言微调，无需重写整段描述。
- 选中已生成的输入区域，直接输入：“把下拉框宽度设为200px”“给日期选择器加右对齐标签”“所有输入框底部加1px分隔线”
- 若某输入项需要图标前缀（如用户头像上传框），补一句：“第一个输入框左侧加相机图标，尺寸20×20”即可刷新
- 想批量统一字体：输入“所有输入框内文字使用14号 Roboto，颜色#333”，AI 会穿透图层批量修改
导出时保留输入逻辑语义
生成的不只是视觉稿，后续导出代码时，输入框组的语义会被映射为真实字段名和校验规则。
- 描述中写明“销售额输入框，数值型，支持小数点后两位”，生成的 React 代码里会带 type="number" 和 step="0.01"
- “状态开关按钮：开启时显示‘启用中’，关闭时显示‘已停用’”，AI 会生成带状态绑定的 Toggle 组件，而非静态图形
- 导出 Vue 代码时，输入框命名会自动转为驼峰式（如 dateRangePicker），与前端开发习惯对齐
