AI写的前端很丑，但是不知道怎么说怎么改？
一天一个 vibe coding 术语课，今天就讲讲 Tag 和 Chip。
一、什么是 Tag 和 Chip？
拿一个你自己做的记账小应用来说。
账单列表里，午餐后面写着「餐饮」，打车后面写着「交通」。
这些小块跟着每一笔账单，告诉你这笔钱被分进了哪一类。
这种用关键词标记、分类或者组织内容的小块，通常叫 Tag，也就是标签。
再看账单列表上方的「消费分类」。
页面正在显示这个月的账单，分类区里有「餐饮」「交通」和「购物」三个选项。
选中「餐饮」，列表就只显示这个月的餐饮账单。
这种用来选择或取消筛选项的紧凑控件，常叫 filter chip，也就是筛选 Chip。
两者经常都做成圆角胶囊，甚至都写着「餐饮」。
所以只看长相分不清，必须看它在页面里承担什么任务。
二、Tag 先说明内容是什么
先看午餐后面的「餐饮」。
它跟着这条账单出现，说明这笔消费属于餐饮分类。
用户沿着时间顺序往下看，能快速分清哪些钱花在吃饭上，哪些花在交通上。
除了分类，Tag 也常用来表示关键词、属性或者简短状态。
它的文字要短而明确。内容一长，用户就很难把它当成一个方便扫读的标签。
颜色可以帮助用户更快区分类别，但文字本身也要说清楚。
不能只给「餐饮」涂成黄色，却不写餐饮两个字。
在这个账单列表里，Tag 只是描述账单，点它不会发生任何事。
但这不是 Tag 的通用规定。
有些产品里的 Tag 可以被选中，也可以被移除。
比如编辑一条账单时，用户可以删掉已经选中的分类，再换一个新的。
因此，分辨 Tag 时，要先看它是不是在标记内容的类别、关键词、属性或者状态，不能把「能不能点」当成唯一标准。
三、Chip 更常承担选择和操作
再回到账单上方的消费分类区。
这里的餐饮、交通和购物，决定这个月的哪些账单会留下。
先选「餐饮」，列表只留下餐饮账单。
如果还想一起看交通支出，就再选「交通」。两项同时保持选中，餐饮和交通账单都会显示。
再取消「餐饮」，就只剩交通账单；把分类全部取消，则回到这个月的全部账单。
假设这个月没有购物支出，单独选中「购物」时，列表就应该说明「本月没有购物账单」，购物这一项仍然保持选中。
不能悄悄清掉筛选，让用户以为自己刚才的选择没有生效。
筛选 Chip 可以单选，也可以多选。这里用多选，是为了让用户能一起查看几个消费分类。
搜索账单时，用户还可能想找几家商户的消费记录。
在商户选择框里，选好「面馆」和「咖啡店」后，这两个名字可以各自变成一个带删除按钮的小块。
点掉「咖啡店」，框里仍然留着「面馆」，搜索结果也只保留面馆的账单。
这种把已经输入或选好的内容收在输入区域里的小块，常叫 input chip，也就是输入 Chip。
有些页面还会给出简短建议。
比如还没设置搜索条件时，出现「查看本月餐饮」。点一下，就直接显示这个月的餐饮账单。
这种可以直接采用的建议，也常用 Chip 来承载。
筛选、输入和建议，是 Chip 常见的几种任务，不是一张所有项目都必须照抄的分类表。
四、Tag、Chip 和 Badge 怎么分？
记账应用里，还有一些小块用来提醒你注意数量或状态。
提醒铃铛右上角的数字 3，是覆盖在对象边角上的数字 Badge。
银行卡账户后面的绿色小点和「已同步」，没有压在银行图标上，但在一些组件资料里仍然叫 status badge，也就是状态徽标。
这说明 Badge 不一定非得叠在某个元素上。
它更常见的任务，是用一小块醒目的信息，让用户快速看到某个数量、状态、变化或者简短属性。
Tag 的重点不同。
午餐账单后面的「餐饮」，是在给这条账单分类，帮助用户识别和整理内容。
Chip 则更像一个紧凑的控件。
消费分类区的「餐饮」和「交通」可以同时选中，让下面同时显示这两类账单。
放回这个记账应用里，可以这样叫：
铃铛上的 3，是 number badge。
银行卡后面的「已同步」，是 status badge。
账单后面的「餐饮」，是用来分类的 Tag。
消费分类区里可选择的「餐饮」和「交通」，是 filter chip。
四个东西有时长得很像，但它们分别在突出数量、提示状态、描述分类和执行筛选。
五、为什么换个项目，名字又可能变？
Badge、Tag 和 Chip 并没有一套所有产品都照着用的统一分界线。
有的组件资料把可选择、可删除的小块也叫 Tag。
有的把筛选、输入、建议和操作这一组叫 Chip。
还有的会把「已同步」这种状态小块叫 Tag，而不是 Badge。
这不是谁一定叫错了，而是不同项目采用了不同的命名规则。
进入一个具体项目以后，先看这个项目正在使用的组件说明，并在整个项目里保持一致。
和 AI 沟通时，也不要只说「加一个胶囊」或者「加一个标签」。
要把它的用途一起说出来：这是跟在账单后面的分类 Tag，还是用来筛选账单的 Chip。
如果它可以被移除，还要说清楚删掉的是哪一个条件，删完以后哪些条件继续保留。
最后检查画面给出的暗示是不是一致。
只负责展示的 Tag，不要做得像一个等着被点击的按钮。
用来选择的 Chip，要有清楚的选中、未选中、按下和不可用状态。
带删除按钮时，读屏软件也要知道删的是谁，比如「移除咖啡店」，不能只念一个没有对象的「关闭」。
看到这些小块，先别按形状猜名字。
先看它是在突出数量、状态和变化，描述或组织内容，还是让用户完成选择和操作；再回到项目正在使用的那套命名里确认。
