你在 Cursor 里输入"做一个注册页面"，AI 生成了——一个只有用户名和密码的简单表单。你说"还要选性别、兴趣爱好、出生日期、上传头像"，AI 又加了一轮。你说"性别只能选一个、兴趣可以选多个、出生日期要点日历选"，AI 改了三轮。
问题出在哪？你没有告诉 AI 用哪些控件。如果你是跟一个设计师沟通，你会说"性别用单选框、兴趣用复选框、生日用日期选择器"。跟 AI 也是一样——说出控件的准确名字，一次性搞定。
VibeHub 的"填写与选择"分类列出了 18 种表单控件。你不需要全记住，但需要知道"遇到什么场景该叫什么名字"。下面按使用频率分组教你怎么说。
最常用的 4 个（覆盖 80% 场景）
1. 输入框（Input）
用户填一行文字用的。用户名、邮箱、搜索关键词、手机号——凡是只写一行不需要换行的，都用 Input。
VibeHub 里的原话："输入框是让用户填写一行自由文本的表单控件。"
喂给 AI 的话："加一个 Input 输入框，标签'邮箱'，placeholder 显示'请输入邮箱地址'，校验规则：必填、邮箱格式。"
2. 选择器（Select）
给用户一个下拉列表，从里面选一个。状态筛选、城市选择、分类选择——选项固定且比较多的时候用。
VibeHub 里的原话："选择器是从固定选项列表中选择一个或多个值的表单控件。"
喂给 AI 的话："加一个 Select 选择器，标签'城市'，选项：北京/上海/广州/深圳/杭州，默认显示'请选择城市'。"
3. 日期选择器（DatePicker）
用户点一下弹出一个日历小窗口，选一个日期。出生日期、预约时间、下单日期——凡是涉及日期的都用它。
VibeHub 里的原话："日期选择器是用日历选择某一天或一段日期的表单控件。"
喂给 AI 的话："加一个 DatePicker 日期选择器，标签'出生日期'，限制可选范围 1950-01-01 到今天。默认显示'请选择日期'。"
4. 上传（Upload）
用户从自己电脑选一个文件上传。头像、附件、证件照——凡是传文件的都用它。
VibeHub 里的原话："上传是选择本地文件并将其传输到服务端保存的交互流程。"
喂给 AI 的话："加一个 Upload 上传组件，标签'头像上传'，支持点击或拖拽上传，限制 JPG/PNG 格式，不超过 5MB，上传后显示图片预览。"
容易搞混的 3 组
第一组：单行 vs 多行（Input vs Textarea）
Input 是一行文字，Textarea 是多行文字。你让 AI 加一个"简介输入框"，它可能给 Input。你应该说"加一个 Textarea 多行文本域，用来填个人简介"。
VibeHub 原话 - Textarea："多行文本域是让用户输入或编辑多段自由文本的表单控件。"
第二组：单选 vs 多选（Radio vs Checkbox）
Radio 是一组选项里"只能选一个"，Checkbox 是一组选项里"可以选多个"。性别（男/女/其他）用 Radio，兴趣爱好（运动/音乐/阅读）用 Checkbox。
VibeHub 原话 - Radio："单选框是一组只能选中其中一个选项的表单控件。" VibeHub 原话 - Checkbox："复选框是让用户独立选中一个或多个选项的表单控件。"
喂给 AI 的话（Radio）："加一组 Radio 单选框，标签'性别'，选项：男/女/其他，默认选中'男'。"
喂给 AI 的话（Checkbox）："加一组 Checkbox 复选框，标签'兴趣爱好'，选项：编程/设计/音乐/运动。"
第三组：三层选择器递进（Select vs Cascader vs TreeSelect）
这三样都是"从列表里选东西"，但层级不同：
- Select：扁平列表，从一行行选项里选一个。比如选城市：北京/上海/广州。
- Cascader（级联选择器）：多层联动，选了第一级才显示第二级。比如选地址：省→市→区，选了广东才显示广州/深圳。
- TreeSelect（树选择）：树状结构，可以展开收起。比如选部门：研发部→前端组→张三。
VibeHub 原话 - Cascader："级联选择器是沿父子层级逐级选择路径的表单控件。广东省 / 深圳市 / 南山区。" VibeHub 原话 - TreeSelect："树选择是从树状父子选项中选择一个或多个节点的表单控件。研发部 → 前端组 → 后端组 → 设计部。"
一句话记住：扁平列表用 Select，多层联动用 Cascader，树状结构用 TreeSelect。
其他 7 个（偶尔用到，知道名字就行）
数字输入框（InputNumber）
专门用来填数字的，右边有加减按钮，可以设定范围。
喂给 AI 的话："加一个 InputNumber 数字输入框，标签'数量'，最小值 1，最大值 99，步长 1。"
开关（Switch）
表示"开"或"关"两种状态，点了立即生效。消息通知、深色模式、隐私设置。
喂给 AI 的话："加一个 Switch 开关，标签'消息通知'，开启时绿色，关闭时灰色。"
滑块（Slider）
拉杆拖来拖去调数值的。音量、亮度、价格范围。
喂给 AI 的话："加一个 Slider 滑块，标签'音量'，范围 0-100，拖动时实时显示当前值。"
评分（Rate）
五个星星让用户打分的。商品评价、服务评分。
喂给 AI 的话："加一个 Rate 评分组件，5 星制，允许半星，默认 0 星。"
自动完成（AutoComplete）
输入的时候下面会弹出匹配的候选项，但用户也可以不选候选项自由输入。搜索框、标签输入。
喂给 AI 的话："搜索框用 AutoComplete，输入时匹配已保存的搜索关键词，最多显示 5 条建议。"
时间选择器（TimePicker）
选具体时间点用的。会议时间、预约时间、营业时间。
喂给 AI 的话："加一个 TimePicker 时间选择器，标签'会议时间'，范围 09:00-18:00，步长 30 分钟。"
颜色选择器（ColorPicker）
弹出一个色盘让用户选颜色。主题色设置、标签颜色、品牌色选择。
喂给 AI 的话："加一个 ColorPicker 颜色选择器，标签'主题色'，默认值 #7257D8。"
两个"不是控件但必须知道"的
表单（Form）
Form 本身不是一个输入控件，它是一个容器——把所有输入控件包在一起，管"提交时一起校验、一起发送"这件事。
VibeHub 里的原话："表单是把多个相关字段组织为一次填写、校验和提交任务的界面结构。"
正确的写法：先告诉 AI "用 Form 包裹整个注册表单"，然后在 Form 里面放各种输入控件。
喂给 AI 的话："用 Form 包裹以下所有输入控件。提交按钮在 Form 底部，点击时校验所有必填字段。校验不通过的字段下方显示红色错误提示。"
表单标签（Label）
每个输入框前面的说明文字叫 Label。比如"邮箱"、"密码"、"姓名"。
VibeHub 里的原话："表单标签是说明一个输入控件需要填写或选择什么的可见文字。"
喂给 AI 的话："每个 Input 上方加 Label。必填字段的 Label 旁边加红色 * 号。"
现学现用：完整的注册页面
把上面学的全部用在一条 prompt 里：
"用 Form 包裹一个注册表单。包含以下字段：
- 用户名 — Input，必填，6-20 位字母数字
- 密码 — Input 类型 password，必填，至少 8 位
- 性别 — Radio 单选框，选项：男/女/其他，默认男
- 兴趣爱好 — Checkbox 复选框，选项：编程/设计/音乐/运动
- 城市 — Select 选择器，选项：北京/上海/广州/深圳/杭州
- 出生日期 — DatePicker 日期选择器，范围 1950-01-01 至今
- 个人简介 — Textarea 多行文本域，最多 200 字，右下角显示字数
- 头像 — Upload 上传，JPG/PNG，不超过 5MB
- 评分 — Rate 评分，5 星 底部一个'注册'提交按钮。"
AI 会一次性生成完整的注册页面，每个控件用正确的类型。你省了 5 轮"不对，这个不是下拉框"的来回修改。
AI 速览
