VibeHub 前端术语速查手册
来源：https://vibe-hub.org/
VibeHub 是一个面向 Vibe Coding（用自然语言驱动 AI 写代码）的前端术语参考库。
每个术语都配有一句"大白话提示词"——你可以直接把它丢给 AI，让它生成对应的 UI 组件。
读了 15 分钟
更新于 8 月 5 日
网站概述
- 定位：Vibe Coding 前端术语词典
- 目标用户：非专业开发者 / 产品经理 / 设计师 / 刚接触 AI 编程的人
- 核心价值：把前端 UI 组件的专业术语，翻译成自然语言描述，让任何人都能跟 AI 描述清楚自己想要的界面效果
- 总计：120 个术语，覆盖 13 个分类
一、Web 基础（5条）
| 术语 |
大白话提示词 |
| Frontend（前端） |
人们总在说前端和后端，它们有什么区别？ |
| Component（组件） |
把这块重复出现的内容区域做成一个组件，改一处就全部更新。 |
| State（状态） |
点击提交按钮后显示"保存中"，成功或失败后更新提示信息。 |
| Markdown |
AI 写的文档里有一堆 # 号和星号，那是什么？能转成好看的格式吗？ |
| HTML |
AI 写的代码里有一堆尖括号和英文单词，那些是干什么用的？ |
二、按钮与链接（2条）
| 术语 |
大白话提示词 |
| Button（按钮） |
加一个按钮，点击后保存内容。 |
| Link（链接） |
让这段文字变成可点击的链接，跳转到另一个页面。 |
三、表单（18条）
| 术语 |
大白话提示词 |
| Input（输入框） |
加一个输入框，让用户输入邮箱地址。 |
| Textarea（多行文本） |
用户需要写一段比较长的留言，一行不够用。 |
| InputNumber（数字输入） |
只能输入数字，最好有加减按钮方便调整数量。 |
| Radio（单选按钮） |
这几个选项互斥，选一个时另一个自动取消。 |
| Checkbox（复选框） |
这些选项不冲突，允许同时选多个。 |
| Switch（开关） |
做成手机设置里的那种开关，打开再关上。 |
| Slider（滑块） |
做一个可拖动的滑块来设置价格范围。 |
| Rate（评分） |
让用户用星星来给产品打分。 |
| Select（下拉选择） |
选项太多，用一个下拉框让人点开再选。 |
| AutoComplete（自动补全） |
输入前几个字母时自动显示建议，点击就能选中补全。 |
| Cascader（级联选择器） |
选地址时，一层层选：省 → 市 → 区。 |
| TreeSelect（树形选择） |
选项是嵌套的，需要先展开一层才能选里面的。 |
| DatePicker（日期选择器） |
给一个日历让用户选日期，不要让他们手动打字。 |
| TimePicker（时间选择器） |
让用户选时间，不要让他们自己敲。 |
| Upload（上传） |
让用户可以上传自己的图片。 |
| Form（表单） |
做一个注册页面，用户填写信息后提交。 |
| ColorPicker（颜色选择器） |
让用户自己选主题颜色，而不是写死一个。 |
| Label（标签） |
每个输入框前面加上清晰的标签，让用户知道该填什么。 |
四、内容展示（23条）
| 术语 |
大白话提示词 |
| Table（表���） |
这些订单数据太乱了，用表格排列，一行一个订单。 |
| List（列表） |
把这些条目统一堆叠成一个列表，一个接一个。 |
| Card（卡片） |
每个产品做成一张可点击的卡片，图在上面，名称和价格在下面。 |
| Tag（标签） |
给每篇文章标上是"教程"还是"新闻"，让人一眼能区分。 |
| Badge（徽标） |
在消息图标上显示一个红色小数字，提示有多少未读。 |
| Avatar（头像） |
评论区里显示头像，让人知道谁在说话。 |
| Descriptions（描述列表） |
在详情页清晰列出名称、日期、状态，一个字段一行。 |
| Statistic（统计数值） |
首页放几个大数字，比如总用户数和销售额。 |
| Tabs（标签页） |
内容太多了，用标签页分开，点击切换视图。 |
| Segmented（分段控制器） |
把两三个选项并排放，点击切换，像 iPhone 控制中心那样。 |
| Collapse（折叠面板） |
问题很多，先只显示问题，点击后展开看答案。 |
| Timeline（时间线） |
按时间顺序显示物流更新，让人知道包裹到哪了。 |
| Tree（树形控件） |
做成文件夹的样子：点小箭头展开下一层。 |
| Carousel（轮播图） |
做几张主图自动轮播，左右有箭头可以手动切换。 |
| Empty（空状态） |
没有数据时显示一张图，告诉用户接下来可以做什么，别留白。 |
| Image（图片） |
让我在文章里加图片，手机上不要变形。 |
| File（文件） |
上传的附件显示文件名和大小，可以删除。 |
| Icon（图标） |
按钮上加个小图标，不用看字也能知道用途。 |
| Quote（引用） |
把这个人说的话单独拉出来突出显示，附上名字。 |
| Video（视频） |
在页面里放一个视频，点一下就能播放。 |
| Chat UI（聊天界面） |
做一个完整的聊天窗口：消息列表、输入框、发送状态、失败重试，别隐藏错误。 |
| Filter（筛选） |
只显示本周、未完成、指派给我的任务，其他的先隐藏。 |
| Chart（图表） |
用图表对比这六个月订单变化，不要让人靠颜色猜数值。 |
五、弹窗与反馈（12条）
| 术语 |
大白话提示词 |
| Alert（警告提示） |
页面顶部放一条黄色警告，告诉用户账号快过期了。 |
| Toast（轻提示） |
角落里弹出"已保存"，几秒后自动消失。 |
| Notification（通知） |
点右上角的铃铛，显示所有系统通知。 |
| Modal（模态框） |
点按钮弹出屏幕中央的对话框，背景变暗。 |
| Drawer（抽屉） |
从右边滑出一个详情面板，后面的列表还保持可见。 |
| Popconfirm（气泡确认） |
删除时在按钮旁边弹出"确定吗？"，而不是弹大对话框。 |
| Popover（气泡卡片） |
点击头像在旁边弹出一个小名片。 |
| Tooltip（文字提示） |
鼠标悬停在这个图标上时显示简短说明。 |
| Progress（进度条） |
显示上传进度，不然用户以为文件上传卡住了。 |
| Skeleton（骨架屏） |
页面加载时显示灰色占位块，而不是一直转圈。 |
| Result（结果页） |
支付成功后显示一个明确的成功页面，别直接跳走。 |
| Spinner（加载中） |
耗时操作时显示加载圈，不然用户以为页面坏了。 |
六、导航（9条）
| 术语 |
大白话提示词 |
| Menu（菜单） |
功能太多了，加一个菜单让人能找到所有功能。 |
| Breadcrumb（面包屑） |
这个页面层级很深，顶部显示我的位置，带上回退的链接。 |
| Pagination（分页） |
条目太多了，底部加上页码翻页。 |
| Steps（步骤条） |
结账有三个步骤，顶部显示当前在第几步。 |
| Dropdown（下拉菜单） |
鼠标悬停在用户名上时，弹出"设置"和"退出登录"。 |
| Anchor（锚点） |
页面很长，右侧加一个小目录，点击跳转到对应段落。 |
| BackTop（回到顶部） |
滚动很远后，右下角显示一个回到顶部的按钮。 |
| SkipLink（跳转链接） |
键盘用户需要按太多次 Tab 才能到主内容，能让他们直接跳过去吗？ |
| Search（搜索） |
项目列表上方加搜索，输入名称或关键词快速找到相关项目。 |
七、网站区块（9条）
| 术语 |
大白话提示词 |
| Hero（首屏大图） |
网站顶部感觉太空了，放一张大图和标题，让人一眼看懂我们是做什么的。 |
| CTA（行动号召） |
在页面上放一个显眼的位置，让人想点"免费试用"。 |
| UserVoice（用户评价） |
放几条真实客户的引用，别光说自己有多好。 |
| Header（顶部栏） |
顶部栏怎么布局？需要容纳 logo、导航和登录按钮。 |
| Navbar（导航栏） |
把主要板块放在顶部导航里，并高亮当前所在页面。 |
| Footer（页脚） |
需要加一个页脚，放一些链接和版权信息。 |
| FAQ（常见问题） |
把用户最常问的问题整理成一个 Q&A 区域放在页面底部。 |
| Pricing（定价） |
三个套餐并排展示，中间那个标上"最受欢迎"。 |
| SocialProof（社会认同） |
加一排客户 logo，再写一行"超过 100,000 个团队在使用"。 |
八、页面布局（7条）
| 术语 |
大白话提示词 |
| Top Nav（顶��导航布局） |
用经典布局：顶部导航栏，下方放所有内容。 |
| Sidebar（侧边栏布局） |
左侧放功能菜单，右侧大区域显示内容，像后台管理系统那样。 |
| Single Page（单页布局） |
把所有内容放在一个长页面上，让人一直往下滚就行。 |
| Doc Layout（文档布局） |
像文档站那样：左边导航，中间文章，右边本页大纲。 |
| Card Grid（卡片网格） |
用卡片网格展示内容，宽屏多列，窄屏自动换行。 |
| Centered Column（居中窄栏） |
内容保持窄栏居中，两边留白，像博客文章那样。 |
| Responsive Design（响应式设计） |
移动端三列变一列，同时保持桌面端的导航和卡片布局不崩。 |
九、CSS 布局（11条）
| 术语 |
大白话提示词 |
| Space（间距） |
所有东西都挤在一起了，调整间距让相关的靠近，不相关的隔开。 |
| Margin（外边距） |
这个区块和旁边的太近了，加一点间距。 |
| Padding（内边距） |
文字紧贴着盒子边缘，里面给点呼吸空间。 |
| Flex（弹性布局） |
把这几个按钮排成一行，间距均匀，垂直居中。 |
| Grid（网格布局） |
把这些卡片排列成整齐的网格，窄屏时自动变成两列。 |
| Z-Index（层级） |
这个弹窗被其他内容盖住了，确保它始终在最上面。 |
| Sticky（粘性定位） |
滚动时导航栏钉在顶部不动。 |
| Position（定位） |
把这个小图标钉在卡片右上角，不影响其他布局。 |
| Centering（居中） |
把这个盒子水平垂直居中，为什么这个总是这么难搞？ |
| Box Model（盒模型） |
这张卡片设了 320px 宽度，为什么加了内边距就超出容器了？ |
| Overflow（溢出） |
卡片底部被截断了，检查是不是纵向溢出，别让按钮被裁掉。 |
十、排版（3条）
| 术语 |
大白话提示词 |
| Typography（排版） |
页面文字全部连成一片，把标题、正文、注释分开，重要内容突出。 |
| Serif & Sans（衬线/无衬线） |
标题用有点个性的衬线字体，正文保持简洁清爽。 |
| Text Truncate（文字截断） |
标题太长时截断，末尾显示省略号。 |
十一、视觉样式（9条）
| 术语 |
大白话提��词 |
| Divider（分割线） |
这两个部分靠太近了，中间加一条细线。 |
| BorderRadius（圆角） |
把卡片尖角修圆一点，看起来柔和些。 |
| Shadow（阴影） |
在卡片下面加淡淡阴影，像浮在页面上方一样。 |
| Opacity（透明度） |
这张图片太抢眼了，让它半透明一点。 |
| Gradient（渐变） |
别用纯色背景，让颜色从蓝渐变成紫。 |
| Corner Feel（圆角一致性） |
把全站的圆角统一一下，有的地方方有的地方圆。 |
| Backdrop Blur（背景模糊） |
导航栏做成半透明毛玻璃，滚过去的内容会模糊。 |
| Dark Mode（深色模式） |
加真正的深色模式：文字、边框、图表、代码块都要跟着切换。 |
| Design Token（设计令牌） |
把主色、间距、圆角整理成设计令牌，别在每个组件里重复写。 |
十二、动效（5条）
| 术语 |
大白话提示词 |
| Transition（过渡） |
按钮颜色变化太生硬了，能平滑过渡吗？ |
| Animation（动画） |
让这个图标循环一个微妙的动作，像轻轻地上下浮动。 |
| Easing（缓动） |
这个动画感觉卡顿，能让它加速和减速更自然吗？ |
| Spring（弹簧动效） |
弹窗出现时带一点弹簧弹跳效果。 |
| Fade In / Out（淡入淡出） |
内容切换时旧内容淡出，新内容淡入。 |
十三、交互指针（7条）
| 术语 |
大白话提示词 |
| Hover（悬停） |
鼠标放上去时按钮变色，让人知道可以点击。 |
| Active（按下） |
按下按钮时，让它有被按下去的感觉。 |
| Focus（焦点） |
用 Tab 键时不知道焦点在哪，能加一个明显的聚焦边框吗？ |
| Drag（拖拽） |
让用户可以拖拽这些卡片来重新排序。 |
| Disabled（禁用） |
表单没填完时提交按钮保持灰色不可点击。 |
| Cursor（光标） |
鼠标移到可点击的元素上时，光标变成手型。 |
| Selection（选中） |
选中文字时，高亮颜色改成品牌色。 |
总结
VibeHub 本质上是一本"翻译词典"——把专业前端术语翻译成每个人都能说的自然语言。对于使用 AI 工具（如 Cursor、Copilot、v0 等）进行前端开发的人来说，这个参考库非常实用，可以让非技术人员也能准确地描述 UI 需求，同��也帮助开发者理清各种组件的用途和边界。
miracle
前端、后端、部署、客服都是我一个人。写这里的东西都是真踩过的坑，不是抄来的教程。