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

效果预览

全部自动化 AI 写作数据分析团队协作安全合规

适合用在哪

电商分类、内容频道、日期选择、移动端筛选区。

容易踩的坑

隐藏滚动条又不加两端渐隐，用户不知道右侧还有更多分类。
chip 触摸高度不足 44px 且间距小于 8px，手指容易点到相邻标签。
选中后未 scrollIntoView，选中项停在屏外，用户以为点击没生效。

设计提示词 · Prompt

横滑筛选标签（Scrollable Filter Chips）：横向 overflow-x:auto 隐藏滚动条，chip 不换行（white-space:nowrap）flex:0 0 auto。两端渐隐 mask 暗示可滑。选中 chip 深色实底 + 650 字重。首个 chip 前、末个 chip 后留 16px 边距。选中后自动 scrollIntoView({inline:"center"}) 让选中项居中。数据联动：chips 切换时下方列表用骨架屏过渡。chips 数量 4-10 个；固定"全部"在最前。与桌面端 select 组件相比，chips 让所有选项可见——移动端优先选 chips。

Scrollable Filter Chips: Horizontal overflow-x:auto with a hidden scrollbar; chips don't wrap (white-space:nowrap) with flex:0 0 auto. Fade masks at both ends hint that it's scrollable. The selected chip gets a dark solid background + 650 font weight. Leave 16px margin before the first chip and after the last. After selection, auto scrollIntoView({inline:"center"}) to center the selected item. Data linkage: when chips switch, the list below transitions with a skeleton screen. 4-10 chips; pin "All" first. Compared with a desktop select component, chips keep every option visible — prefer chips on mobile.

常见搭配

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

筛选标签Filter Chips 骨架屏Skeleton Loading 底部标签栏Bottom Tab Bar Peek 轮播Peek Carousel

演示 HTML 结构

<div class="s d-mchips">
  <span class="d-mchip is-on">全部</span>
  <span class="d-mchip">自动化</span>
  <span class="d-mchip">AI 写作</span>
  <span class="d-mchip">数据分析</span>
  <span class="d-mchip">团队协作</span>
  <span class="d-mchip">安全合规</span>
</div>