Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
TABS
下划线标签
不同内容区域切换。细线跟着文字走，不要叫 Slider。
Underlined Tabs · Line Tabs, Flat Tabs
选这个组件前，先核对用途
什么情况下适合使用？同一页面有平级内容，需要在面板间切换。
什么情况下不宜直接照搬？有先后顺序的任务用步骤引导；改变数值用滑块。
下面的名称、条数和字段是示例。交给 AI 前换成本项目内容；实际示例仅证明演示交互，不代表业务已接通。
亲手试一下，再决定是否使用
按什么顺序试用这个示例？切换两个栏目，再回到第一个；关闭或拖动变体可试对应操作。
试用时应该观察什么？选中项与内容一致；关闭后仍有可用入口。
交互示例 · 不连接真实业务
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
本次只制作一个下划线标签（Underlined Tabs），不重做整页。
项目用途与使用人群：【填写】
组件所在页面和位置：【填写】
用户操作前看到什么：【填写】
用户点击、输入或选择后，应发生什么：【填写】
本项目实际文案、选项和资料：【填写】
目标设备与已有样式：【填写】
不允许改变的内容：【填写，无则写无】
先核对组件是否适合上述任务。不要照搬词典示例的姓名、品牌、条数或尺寸；需要补充时先问。
选中项与内容一致；关闭后仍有可用入口。
只实现确认范围，并列出操作步骤、预期和实际结果。默认、选中、禁用、空白、失败状态按本组件需要检查，不适用则解释原因。不把示例成功提示当作业务已接通。查看保留的原始规格
Build a single Underlined Tabs component, not a full page. Structure: a horizontal tab list on top and one content panel below. Default three tabs labeled Overview, Billing, and Settings, each revealing its own short panel. The active tab has a 2px underline aligned to the label width; inactive tabs have muted text, no fill, no card background, and no shared track. Interaction: click a tab to switch panels; only the active panel is visible; Left/Right keys when the list is focused. States: default, hover (slightly brighter text), selected (accent underline and stronger text), disabled (non-interactive, reduced contrast). Motion: instant panel swap is fine. Do not build pill tabs, a segmented control, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成一个下划线标签组件，不要整页。上方横排标签、下方一块内容。默认三项 Overview、Billing、Settings，点哪项只显示对应面板。当前项是贴着文字宽度的 2px 底线；未选项弱文字、无底、无卡片、无公共轨道。支持点击和左右键。状态含默认、悬停、选中、禁用。面板切换可即时。不要做成胶囊标签、分段控制或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。
做出的效果不一致，应该检查什么？
只画出了样子 → 把缺失的点击、键盘或状态变化逐项交给 AI；交互已存在但行为不同 → 提供实际步骤、预期和结果，要求只修正差异。先在示例资料上验证，再接入产品。
继续描述组件 →