筛选器是网页或后台系统的交互组件，常见于表格上方、侧边栏、弹窗内或卡片头部；需明确区分前台用户筛选（如价格、品牌）与后台运营筛选（如状态、时间范围）；字段须注明控件类型（如下拉单选、多选标签组、日期范围选择器、文本输入框），并说明实时筛选、重置按钮、默认展开/收起等交互细节；样式需指定设计规范（如ant design风格、主色#1890ff、圆角4px）或基础视觉要求（深色模式、聚焦发光、横向排列、移动端换行）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
直接用文字描述就能生成，不需要画线框或调参数。关键在于把筛选器的结构、交互逻辑和视觉特征说清楚。
明确筛选器类型和位置
先说明它是网页还是后台系统的组件，放在什么区域（比如顶部搜索栏下方、列表左侧边栏、表格上方）。例如：“在电商后台商品列表页顶部，添加一个筛选器区域”，这样AI能准确定位布局层级。
- 常见位置：表格上方、侧边栏、弹窗内、卡片头部
- 区分场景：前台用户筛选（如按价格/品牌/评分） vs 后台运营筛选（如按状态/时间范围/操作人）
写清筛选项与交互方式
列出具体字段，并注明控件类型。避免模糊词如“几个选项”，改用“下拉选择框”“多选标签组”“日期范围选择器”等标准表述。
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 示例写法：“包含4个筛选项：状态（下拉单选，选项为‘待审核’‘已通过’‘已驳回’）、分类（多选标签组）、上架时间（日期范围选择器）、关键词（文本输入框，带搜索图标）”
- 强调交互细节：是否支持实时筛选？是否需要“重置”按钮？是否默认展开还是收起？
指定样式与适配要求
告诉AI你用的设计规范或视觉偏好，它会自动匹配。比如企业已有 Ant Design 或 Element Plus 组件库，可直接提框架名；若无，就用颜色、圆角、尺寸等基础描述。
- 可用提示：“使用 Ant Design 风格，主色 #1890FF，圆角 4px，紧凑间距”
- 或：“深色模式，输入框带聚焦发光效果，筛选项横向排列，移动端自动换行”
生成后快速调整细节
首次生成可能不完全贴合，别反复重写整段描述。直接在原基础上追加微调指令，效率更高。
- 比如：“把‘状态’下拉框宽度设为120px”
- “关键词输入框右侧增加清空图标”
- “多选标签组默认显示3个，超出折叠为‘+2’”
