MasterGo AI 生成输入框组，这个功能看似简单，但背后遵循着一套核心逻辑：它并非在画布上单独绘制一个框，而是根据你描述的场景，自动组装出一整套“表单区块”——包含标签、输入框、占位符、辅助提示，甚至验证状态和关联按钮。换句话说，你向 AI 提出需求，它就能返回一个可直接使用的小组件。
先明确需求：你需要的输入框组扮演什么角色
这一步至关重要。同样是输入框，用在登录页面、搜索栏和注册表单上，样式截然不同。AI 会根据场景自动匹配不同的布局和交互方式。举个例子：
- 登录页：通常包含“用户名/邮箱”+“密码”，再加上“记住我”复选框和“登录”按钮，一气呵成。
- 搜索栏：大概率会带一个放大镜图标，占位文字写“搜索商品…”，右侧再配一个“×”清空按钮，交互更简洁高效。
- 注册表单：字段较多，垂直排列，包含姓名、手机号、验证码、密码、确认密码，还常伴有协议勾选和提交按钮。
因此，第一步不是急着写描述，而是先问自己：这个输入框组，究竟要用在哪个场景？
描述要具体，别让 AI 猜测
只写“加个输入框”，AI 给出的结果往往比较通用，但未必贴合你的需求。要让结果靠谱，必须把结构和行为说清楚。
例如：
- ✅ 理想的描述示例：
“在网页顶部导航栏右侧添加一个搜索输入框组：宽度自适应容器，左侧内置放大镜图标，占位符为‘搜索健身器材’，右侧带‘×’清空按钮，悬停时边框变蓝，聚焦时有蓝色光晕。” - ✅ 带交互逻辑的描述：
“生成用户注册页面，包含姓名、手机号、验证码（带60秒倒计时按钮）、密码、确认密码五个输入框，每项下方显示红色错误提示区域，提交按钮在底部居中。” - ❌ 过于模糊的描述：
“加几个输入框” 或 “做个表单”——AI 缺乏上下文，生成结果全靠运气。
简而言之，描述越精准，AI 越能理解你的意图，生成的结果也越接近预期。
别忘了风格统一：主题色、圆角、模式一起定
输入框组不是孤立的，需要与整个页面设计协调。因此在描述后面，顺手补充几项关键参数：
- 主题色：例如
主题色#FA2549，这样输入框聚焦时的边框、按钮背景、错误提示都会统一色调，避免颜色冲突。 - 圆角：例如
圆角8px，输入框和按钮共用同一曲率，视觉上更协调。 - 模式：例如
启用暗色模式，输入框背景、文字、边框会自动适配深色系，省去手动调整的麻烦。
加入这些参数后，AI 生成的组件能直接融入现有设计，无需二次返工。
微调不用重头来，直接修改即可
AI 生成后，难免有些细节不够完美：输入框太窄、标签对齐偏移、字体大小不对……这些都没关系，直接在画布中选中那个图层，再唤出 AI 助手，输入你的修改指令。例如：
- “把邮箱输入框宽度扩大到320px”
- “所有输入框的字体大小设为14px，行高1.5”
- “给密码框右侧添加眼睛图标，点击可切换明文/掩码”
这些指令会实时作用于选中的元素，无需删除重来，效率大幅提升。
进阶玩法：上传原型图，让 AI 看图说话
如果你已经有手绘稿或线框图，哪怕是纸笔画的草图，也别浪费。直接上传图片，点击 AI 图标，选择“根据图片生成界面”。AI 会识别图中输入框的位置、数量、大致样式，然后还原成高保真组件。相比纯文字描述，这种方法更直观，尤其适合已有产品规范、但不想重复造轮子的场景。