Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
拿当前项目试一次：填写材料，生成本次任务
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
页面及需要修改的位置：【填写】
用户在这里要完成什么操作：【填写】
目前哪个地方不符合你的预期：【填写】
候选组件或参考截图：【填写，无则写无】
目标设备、已有样式和不改的内容：【填写】
只判断此处需要什么组件，先按使用任务选择，再考虑外观。说明为什么合适、什么条件下不合适，不生成整页。
请把本次结论按下面的内容写清楚：一个建议组件、一个必要时的替代项、适用状态，以及鼠标/键盘/触屏的具体检查动作与预期结果。FRONTEND & UI
前端与 UI
UI 是打开产品后看到和操作的界面；前端负责呈现这些内容与交互。先排清一条使用流程，再选需要的组件。
先选当前要完成的事
说明用途、颜色、间距和参考图，让 AI 先做一个页面。包含完整风格模板。
② 已有页面，只改一处标明位置、现状、期望和不改的内容。包含局部修改与组件修改模板。
③ 不知道组件叫什么再到下方词典按名称或用途查找，查看示例并补充给 AI。
先做清楚的一页，再扩展其他页。比如：一个记录工具先把“填写→保存→查看”排顺，不必先挑几十个组件。
组件词典 · 212 项 / 25 类
按名称、别名或用途搜索，打开详情查看提示词与可用示例。每项都有对应示例，并区分外观示意、操作练习和简化示例；示例不连接真实业务。
212
没有匹配。清空分类或试试更短的名称，如“标签”或“输入”。
不同内容区域切换。细线跟着文字走，不要叫 Slider。
滑动指示标签Tabs with Sliding Indicator · 操作练习标签切换时底部指示线平滑滑动。
胶囊标签Pill Tabs · 操作练习选项是独立胶囊，当前项填充。
分段控制Segmented Control · 操作练习同一数据集的短选项，如日/周/月。不是 Tabs。
卡片标签Contained Tabs · 操作练习标签贴在内容面板上沿。
文件夹标签Folder-style Tabs · 操作练习视觉上像文件夹页签。
垂直标签Vertical Tabs · 操作练习标签在左、内容在右。
图标标签Icon Tabs · 操作练习空间紧，需要额外说明。
图标文字标签Icon + Label Tabs · 操作练习图标和文字同时出现。
可滚动标签Scrollable Tabs · 操作练习标签超出宽度时横向滚动。
可关闭标签Closable Tabs · 操作练习类似浏览器页签。
可拖动标签Draggable Tabs · 操作练习允许重排顺序。
内容切换器Content Switcher · 操作练习同一数据集的不同视图。
数字步骤条Stepper · 操作练习多步表单、向导。
圆点步骤条Dot Stepper · 操作练习空间少、步骤名可省略。
鱼骨步骤条Chevron Stepper · 操作练习每步呈箭头并咬合下一步。
填充鱼骨步骤Filled Chevron Stepper · 操作练习强调已完成块的实心填充。
垂直步骤条Vertical Stepper · 操作练习步骤带说明、纵向阅读。
进度追踪Progress Tracker · 操作练习物流或订单状态。
主按钮Primary Button · 操作练习页面主操作。
次按钮Secondary Button · 操作练习与主按钮配对。
描边按钮Outline Button · 操作练习弱一点但仍是按钮。
幽灵按钮Ghost Button · 操作练习无背景，工具栏常见。
文字按钮Text Button · 操作练习最轻量操作。
链接按钮Link Button · 操作练习跳转感强的操作。
图标按钮Icon Button · 操作练习工具操作。
圆形图标按钮Circular Icon Button · 操作练习添加一类圆形强调。
浮动按钮Floating Action Button · 操作练习移动端主创建入口。
危险按钮Destructive Button · 操作练习删除、不可逆操作。
加载按钮Loading Button · 操作练习提交中防止连点。
禁用按钮Disabled Button · 操作练习当前不可用。
分裂按钮Split Button · 操作练习主操作加右侧更多。
下拉按钮Dropdown Button · 操作练习点开操作菜单。
按钮组Button Group · 操作练习相关操作并排。
开关按钮Toggle Button · 操作练习按下和未按下。
开关按钮组Toggle Group · 操作练习格式组。
图标工具栏Toolbar · 操作练习编辑器一排图标。
更多按钮Overflow Button · 操作练习竖三点溢出操作。
肉丸菜单Meatball Menu · 操作练习横三点更多。
快速操作菜单Speed Dial · 操作练习浮动按钮展开多个操作。
单行输入Text Input · 操作练习短文本。
多行输入Textarea · 操作练习长文本。
搜索框Search Field · 操作练习过滤列表或全局搜索。
密码输入Password Field · 操作练习敏感输入，可显隐。
数字输入Number Input · 操作练习直接键入数字。
步进数字Spinbutton · 操作练习带增减按钮的数值。
下拉单选Select · 操作练习固定选项里选一个，不能自由输入。
下拉多选Multi-select · 操作练习已选项以可删 Chip 出现在框内。
组合框Combobox · 操作练习可输入、过滤、选已有项。不是 Select。
自动完成Autocomplete · 操作练习输入时出建议，核心仍是文本框。
级联选择Cascader · 操作练习省市区这类层级路径。
树选择Tree Select · 操作练习层级多选或单选。
复选框Checkbox · 操作练习多项独立勾选。
单选组Radio Group · 操作练习一组里最多选一个。
开关Switch · 操作练习开/关二元状态，不要用 Radio 代替。
三态复选框Tri-state Checkbox · 操作练习全选、部分选、未选。
数值滑块Slider · 操作练习连续范围内选一个值。
范围滑块Range Slider · 操作练习选最小和最大两个值。
垂直滑块Vertical Slider · 操作练习音量等纵向场景。
步进滑块Stepped Slider · 操作练习只能落在刻度上。
日期选择器Date Picker · 操作练习选一天。
日期范围Date Range Picker · 操作练习开始日到结束日。
时间选择Time Picker · 操作练习选时分。
日期时间DateTime Picker · 操作练习日期加时间。
日历Calendar · 操作练习月视图点选。
周选择Week Picker · 操作练习选一整周。
月选择Month Picker · 操作练习选年月。
年选择Year Picker · 操作练习选年份。
验证码输入OTP Input · 操作练习分格输入，自动跳格。
标签输入Tag Input · 操作练习回车生成标签。
芯片输入Chip Input · 操作练习以 Chip 展示已输入项。
提及输入Mentions Input · 操作练习输入 @ 出人列表。
富文本编辑器Rich Text Editor · 简化示例所见即所得排版。
Markdown 编辑器Markdown Editor · 简化示例写 Markdown。
代码编辑器Code Editor · 简化示例编辑代码。
行内编辑Inline Edit · 操作练习点文字即编辑。
遮罩输入Masked Input · 操作练习格式锁定。
电话输入Phone Input · 操作练习区号加号码。
金额输入Currency Input · 操作练习货币符号与小数。
URL 输入URL Input · 操作练习网址。
颜色选择器Color Picker · 操作练习选颜色。
星级评分Rating Control · 操作练习1 到 5 分。
文件选择File Input · 操作练习系统文件框。
上传按钮Upload Button · 操作练习按钮触发选择。
拖放上传区Dropzone · 操作练习大虚线区域拖文件。
上传列表Upload List · 操作练习显示进度与完成。
下拉菜单Dropdown Menu · 操作练习按钮下展开操作。
上下文菜单Context Menu · 操作练习右键出现。
菜单栏Menubar · 操作练习File Edit View Help。
导航菜单Navigation Menu · 操作练习站点主导航下拉。
巨型导航菜单Mega Menu · 操作练习大站多列导航。
溢出菜单Overflow Menu · 操作练习空间不够时收进更多。
面包屑Breadcrumb · 操作练习显示层级位置。
分页Pagination · 操作练习翻页浏览。
侧边导航Sidebar Navigation · 操作练习后台主导航。
导航轨Navigation Rail · 操作练习比侧栏更窄的图标轨。
底部导航Bottom Navigation · 操作练习移动端主入口。
顶部导航Top Navigation · 操作练习站点顶栏。
锚点导航Anchor Navigation · 操作练习点击滚动到页内章节。
基础卡片Card · 外观示意内容分组容器。
悬浮卡片Elevated Card · 外观示意带一点阴影抬起。
描边卡片Outlined Card · 外观示意靠描边分层。
可点击卡片Interactive Card · 操作练习整卡可点。
可选中卡片Selectable Card · 操作练习套餐选择等。
指标卡片Metric Card · 外观示意关键数字和涨跌。
媒体卡片Media Card · 外观示意上图下文。
横向卡片Horizontal Card · 外观示意左右布局。
仪表卡片Dashboard Card · 外观示意仪表盘小部件。
表格Table · 操作练习静态数据表。
数据表Data Table · 操作练习可排序筛选的业务表。
数据网格Data Grid · 操作练习键盘导航、单元格交互。不是静态 Table。
可编辑表格Editable Table · 操作练习单元格内编辑。
展开表格Expandable Table · 操作练习行可展开详情。
树形表格Tree Table · 操作练习行可展开子行。
列表List · 操作练习线性条目。
结构列表Structured List · 操作练习带固定栏位的列表。
树Tree View · 操作练习文件夹式层级。
描述列表Description List · 外观示意字段名加值。
时间线Timeline · 外观示意事件按时间排列。
看板Kanban Board · 操作练习列中拖卡片。
甘特图Gantt Chart · 外观示意工期条。
日程表Scheduler · 外观示意资源乘时间。
日历视图Calendar View · 操作练习月历展示事件。
瀑布流Masonry Grid · 外观示意不等高图片流。
图片轮播Carousel · 操作练习水平轮播。
图片画廊Gallery · 操作练习点击切换大图。
徽章Badge · 外观示意数字或状态点，常挂在图标上。
类别标签Tag · 外观示意表示类别，通常不可点删。
芯片Chip · 操作练习可交互、常可关闭。不是 Tag。
筛选芯片Filter Chip · 操作练习筛选条件开关。
状态徽章Status Badge · 外观示意运行中等状态。
胶囊状态Lozenge · 外观示意紧凑状态文字。
手风琴Accordion · 操作练习多个垂直折叠项。
可折叠块Collapsible · 操作练习单个展开收起区。
显隐控件Disclosure · 操作练习接近 Collapsible 的独立模式。
工具提示Tooltip · 操作练习短说明，不能放复杂交互。
气泡卡片Popover · 操作练习可含按钮和表单。
悬停卡片Hover Card · 操作练习悬停预览资料。
对话框Modal · 操作练习阻断式编辑或确认。
警告对话框Alert Dialog · 操作练习必须回应才能继续。
气泡确认Popconfirm · 操作练习删除前的小确认。
抽屉Drawer · 操作练习从边缘滑入的面板。
滑入面板Sheet · 操作练习从边缘滑入。
底部弹层Bottom Sheet · 操作练习从底部升起。
警告条Alert · 外观示意块级结果提示。
行内提示Inline Alert · 外观示意嵌在表单字段旁。
横幅Banner · 外观示意跨页宽系统通知。
轻提示Toast · 操作练习短暂出现，弱打断。
快餐条Snackbar · 操作练习可带一个操作如撤销。
通知卡片Notification · 外观示意比 Toast 信息更多。
旋转加载Spinner · 操作练习不知道结构时的等待。
骨架屏Skeleton Loader · 操作练习先占位内容结构。
微光加载Shimmer Loading · 操作练习骨架上有流动高光。
进度条Progress Bar · 操作练习线性进度。
环形进度Circular Progress · 操作练习环形百分比。
不确定进度Indeterminate Progress · 操作练习不知还要多久。
确定进度Determinate Progress · 操作练习已知百分比。
空状态Empty State · 操作练习还没有数据，给下一步。
错误状态Error State · 操作练习加载失败可重试。
成功结果Success Result · 操作练习流程完成页。
异常页面Error Page · 操作练习整页错误。
可调整面板Resizable Panels · 操作练习拖分隔条改宽度。
分栏Split Pane · 外观示意左右或上下分屏。
窗口分隔条Window Splitter · 操作练习专门指可拖分隔线。
可拖列表Draggable List · 操作练习手柄拖排序。
可重排列表Reorderable List · 操作练习顺序可改。
可调整侧栏Resizable Sidebar · 操作练习侧栏宽度可拖。
主从布局Master-detail Layout · 操作练习左列表右详情。
属性编辑栏Inspector Panel · 操作练习选中对象的属性。
筛选栏Filter Bar · 操作练习一排筛选控件。
多条件筛选Faceted Filter · 操作练习多面筛选。
查询构建器Query Builder · 操作练习组合条件查询。
命令面板Command Palette · 操作练习模糊搜命令。
命令菜单Command Menu · 操作练习偏菜单分组的命令窗。
聊天输入框Chat Composer · 操作练习对话底部输入。
消息气泡Message Bubble · 外观示意对话气泡。
对话列表Conversation List · 操作练习历史会话。
Prompt 输入Prompt Composer · 操作练习给模型的主输入。
Agent 状态Agent Status Indicator · 操作练习运行、等待、出错。
工具调用卡Tool Call Card · 操作练习展示工具名与参数。
思考过程Thinking Panel · 操作练习可展开的推理过程。
终端面板Terminal Panel · 外观示意命令输出。
差异对比Diff Viewer · 外观示意加减行对比。
文件树File Tree · 操作练习项目文件。
JSON 树JSON Tree Viewer · 操作练习可展开 JSON。
日志查看Log Viewer · 外观示意可滚日志。
Markdown 预览Markdown Preview · 外观示意渲染 Markdown。
代码块Code Block · 操作练习展示代码。
可复制代码Code Snippet · 操作练习带复制。
输入建议Prompt Suggestions · 操作练习点芯片填 Prompt。
引用芯片Citation Chip · 操作练习引用源。
树视图Tree View · 操作练习通用层级树。
文件树File Tree · 操作练习文件资源管理。
树网格Treegrid · 操作练习树加表头列。
下拉刷新Pull-to-refresh · 操作练习列表下拉刷新。
左滑操作Swipe Actions · 操作练习左滑出删除。
长按菜单Long-press Context Menu · 操作练习长按出菜单。
页面指示点Page Indicator · 操作练习轮播页点。
滑动卡片Swipeable Cards · 操作练习卡片可滑走。
安全区域Safe Area · 外观示意避开刘海与底部横条。
顶部导航栏Navigation Bar · 外观示意移动端顶栏。
大标题导航Large-title Navigation Bar · 外观示意滚动时可收成小标题。
三栏布局Three-pane Layout · 外观示意侧栏、编辑器、检查器。
活动栏Activity Bar · 操作练习最左侧图标栏。
资源管理面板Explorer Panel · 操作练习文件或图层列表。
编辑器标签Editor Tabs · 操作练习打开文件的页签。
编辑器面板Editor Pane · 外观示意主编辑区。
属性面板Property Panel · 操作练习检查器里的属性表。
状态栏Status Bar · 外观示意底部状态。
命令栏Command Bar · 操作练习一排命令按钮。
可停靠面板Dockable Panel · 操作练习可停左右底。
浮动面板Floating Panel · 操作练习可拖动的浮层工具。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
【项目背景】粘贴已确认的项目简介；不确定项保留“尚未确定”。
【这个项目主要给谁使用】填写项目面向的人群，以及他们希望通过项目完成的事情。
【当前材料】当前页面或待制作的页面需求。 请读取附上的原文，不凭空补齐。
【本次目标】读取页面需求和风格说明，先做一个代表页面。说明内容顺序、操作反馈、手机排列；沿用既有规则。不确定的位置先询问，交付可操作预览和检查步骤。
【限制】沿用已确认范围，不擅自增加功能或更换方案。
执行要求：
1. 先说明材料是否齐全；缺少会改变结果的信息，先问一个关键问题。
2. 用普通话解释操作，告诉我需要在哪里点击、粘贴或确认；可由AI完成的整理和执行请直接完成。
3. 每次只完成本步目标，保留已有文件与可恢复版本。
4. 输出实际产物的位置、我应该看到的结果和具体检查步骤。
5. 把建议、已执行、已检查和未验证分开；不把文字回复当作已执行。
【本步完成标准】确认的界面风格说明与一个能实际操作的页面。
【继续方式】达到完成标准后说明下一步需要带哪些材料；涉及付费、删除资料或发布时先取得明确确认。常见混淆与下一步
切换不同内容用 Tabs（标签切换）；调整数值用 Slider（滑块）。若只有视觉变化但内容没变，先明确需要切内容还是改样式，再让 AI 修正。组件可用后回到完整流程检查真实提交和结果。
连接完整使用流程 →