筛选标签（Filter Chips）是什么：效果预览与 AI 设计提示词

效果预览

自动化 ✕ AI 写作 ✕ 数据分析团队协作模板

适合用在哪

商品筛选、文章分类、标签云、搜索条件组合。

容易踩的坑

选中态只靠颜色变化，没有图标或 aria-pressed，色盲与读屏用户难以分辨。
每点一个 chip 就立刻请求接口，快速多选时出现竞态与结果闪烁。
筛选后结果为零却没有空状态和「清空筛选」入口，用户卡死在空列表。

设计提示词 · Prompt

筛选标签（Filter Chips）：未选：白底描边灰字；选中：深色（或品牌色）实底白字 + 右侧小 ✕（点击单独移除）；悬停描边加深。整组上方可配"已选 N 项 · 清空"操作行。选择后列表区做 FLIP 动画重排（不闪白）。与 URL 查询参数双向同步（可分享、可后退）。chips 过多时横向滚动或"展开更多"。语义上：单选用 Radio 组、多选用 Checkbox 组，键盘可操作（空格切换）。chip 高度 32-36px，间距 8px。

Filter Chips: Unselected: white background, outline, gray text; selected: dark (or brand-color) solid background with white text + a small ✕ on the right (click to remove individually); outline darkens on hover. Above the group, an action row like "N selected · Clear". After selection, reorder the list area with a FLIP animation (no white flash). Sync bidirectionally with URL query parameters (shareable, back-button friendly). When there are too many chips, scroll horizontally or add "Show more". Semantically: single-select uses a Radio group, multi-select a Checkbox group, operable via keyboard (Space to toggle). Chip height 32-36px, spacing 8px.

常见搭配

同一页面里经常和「筛选标签」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

横滑筛选标签Scrollable Filter Chips 筛选条件构建器Filter Builder 空状态Empty State 分页控件Pagination

演示 HTML 结构

<div class="s d-chips2">
  <span class="d-chip2 is-on">自动化 ✕</span>
  <span class="d-chip2 is-on">AI 写作 ✕</span>
  <span class="d-chip2">数据分析</span>
  <span class="d-chip2">团队协作</span>
  <span class="d-chip2">模板</span>
</div>