前端 VibeCoding 术语
网页开发入门3 个条目
前端Frontend
网页开发入门
前端是运行在浏览器中、负责呈现页面并处理用户操作的应用部分
Markdown 文档Markdown
网页开发入门
MD 文档 · Markdown 文件
Markdown 是用少量排版符号表示标题、列表和代码的结构化纯文本格式
HTML 页面结构HTML
网页开发入门
HTML 是用标签描述网页内容结构、供浏览器渲染页面的标记语言
按钮与基础样式5 个条目
按钮Button
按钮与基础样式
操作按钮
按钮是让用户在当前页面执行保存、提交、删除等操作的可点击控件
链接Link
按钮与基础样式
链接是带用户前往另一个页面、页内位置或资源地址的可点击文本或元素
排版Typography
按钮与基础样式
文字排版 · 文本样式
排版是一套用字号、字重、行高和颜色组织文字层级的界面规则
2026 年产品规划
正文说清背景、目标和下一步安排。
林小hu 更新于 3 天前
分割线Divider
按钮与基础样式
分割线是用细线分开相邻内容分组的视觉元素
基本信息
偏好设置
间距Space
按钮与基础样式
间距是用内容之间的留白表达关联和分组关系的布局规则
8 16 24
填写与选择18 个条目
输入框Input
填写与选择
文本输入框 · 单行输入框
输入框是让用户填写一行自由文本的表单控件
🔍
多行文本域Textarea
填写与选择
多行文本域是让用户输入或编辑多段自由文本的表单控件
数字输入框InputNumber
填写与选择
Number Input · 数字步进器 · Numeric Stepper
数字输入框是用于填写数值并按设定步长增减的表单控件
单选框Radio
填写与选择
单选框是一组只能选中其中一个选项的表单控件
复选框Checkbox
填写与选择
复选框是让用户独立选中一个或多个选项的表单控件
开关Switch
填写与选择
开关是表示并立即切换一项功能开启或关闭状态的表单控件
消息通知 深色模式
滑块Slider
填写与选择
滑块是沿着一段连续或分级范围调整数值的表单控件
音量 亮度
评分Rate
填写与选择
评分控件是让用户在有顺序的等级中选择评价分值的表单控件
选择器Select
填写与选择
下拉选择框 · Select Box
选择器是从固定选项列表中选择一个或多个值的表单控件
自动完成AutoComplete
填写与选择
自动补全 · 输入建议
自动完成是用户输入时显示匹配建议、但仍可继续自由填写的表单控件
vibe coding 入门指南 vibe-ui-guide 组件图鉴 vibe 设计规范文档
级联选择器Cascader
填写与选择
级联选择器是沿父子层级逐级选择路径的表单控件
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
树选择TreeSelect
填写与选择
树选择是从树状父子选项中选择一个或多个节点的表单控件
研发部前端组
▾研发部
前端组
后端组
▸设计部
日期选择器DatePicker
填写与选择
日期选择器是用日历选择某一天或一段日期的表单控件
2026-07-21📅
一二三四五六日
20212223242526
时间选择器TimePicker
填写与选择
时间选择器是让用户从允许范围中选择具体时刻的表单控件
14:30
131415
:
003045
上传Upload
填写与选择
文件上传 · 上传控件
上传是选择本地文件并将其传输到服务端保存的交互流程
⬆点击或拖拽文件到这里支持 JPG / PNG，不超过 10MB
📄设计稿-首页.fig66%
表单Form
填写与选择
表单是把多个相关字段组织为一次填写、校验和提交任务的界面结构
颜色选择器ColorPicker
填写与选择
色彩选择器
颜色选择器是让用户查看并选择颜色值的表单控件
#7257D8⌄
表单标签Label
填写与选择
字段标签 · 输入标签
表单标签是说明一个输入控件需要填写或选择什么的可见文字
内容与数据展示20 个条目
表格Table
内容与数据展示
表格是按行和列展示同一组字段、便于比较多条记录的数据组件
项目状态更新
官网改版进行中刚刚
年报设计已完成昨天
列表List
内容与数据展示
列表是按相同结构连续排列多条内容或记录的数据组件
林小hu 评论了你的设计稿这个配色很舒服 👍 · 2 分钟前
油 阿油 邀请你加入项目AI 图鉴 · 1 小时前
卡片Card
内容与数据展示
卡片是把同一对象的标题、摘要、图片和操作组织在一起的内容容器
AI 图鉴：零基础组件入门
每个组件一张卡片，3 分钟看懂一个。
标签Tag
内容与数据展示
标签是用短文字标记内容状态、类别、属性或筛选条件的组件
进行中已完成已逾期前端×
徽标Badge
内容与数据展示
徽标是附着在其他元素旁、补充数量或状态的简短标记
🔔5 ✉️99+ 林
头像Avatar
内容与数据展示
头像是用于识别用户、团队或组织的图像、首字或标志组件
林 林油+5
描述列表Descriptions
内容与数据展示
描述列表是以“字段名：值”成对方式展示一条记录只读详情的数据组件
创建人oil-oil
状态进行中
更新时间2026-07-20 14:32
统计数值Statistic
内容与数据展示
统计数值是突出显示单个关键指标及其单位或趋势的数据组件
本月销售额¥ 864,000↑ 12.5% 活跃用户12,846↓ 2.1%
标签页Tabs
内容与数据展示
标签页是在同一页面内切换平级内容面板的导航组件
全部 24 个项目
分段控件Segmented
内容与数据展示
分段选择器 · Segmented Control
分段控件是将少量互斥选项并排显示、用于快速切换模式的选择控件
折叠面板Collapse
内容与数据展示
可折叠面板
折叠面板是可按需展开或收起一组内容的界面组件
进入「项目设置 → 成员」，点击“邀请成员”，输入对方邮箱即可。
支持，项目设置里可导出 CSV 或 JSON。
时间轴Timeline
内容与数据展示
时间轴是按时间顺序展示一组事件、状态或记录的数据组件
包裹已签收07-20 14:32
运输中07-19 09:15
已下单07-18 20:02
树形控件Tree
内容与数据展示
树形控件是用可展开的父子节点展示层级数据的组件
林小hu
oil-oil
阿麦
前端组
后端组
走马灯Carousel
内容与数据展示
走马灯是在同一位置轮流展示多张内容或多个页面的轮播组件
夏季新品发布会
城市巡展报名中
森林团建回顾
空状态Empty
内容与数据展示
空状态是在内容区域没有可展示数据时说明原因和下一步的界面状态
还没有任何项目创建第一个项目，开始协作吧
图片Image
内容与数据展示
图像 · 图片组件
图片组件是用于加载、显示和处理静态图像内容的媒体组件
🔍 预览
⚠
加载失败
文件项File
内容与数据展示
文件卡片 · 文件列表项
文件项是展示单个文档、图片或附件名称、状态和操作的界面单元
📄项目计划.pdf2.4 MB · PDF⋯
图标Icon
内容与数据展示
界面图标 · 功能图标
图标是用统一的小型视觉符号表示功能、对象或状态的界面元素
⌕↓⚙⋯
引用Quote
内容与数据展示
引文 · 引用块
引用是从正文中区分出来、并标明来源的原话或文字摘录
“先让用户看懂，再让用户行动。”— 产品原则
视频Video
内容与数据展示
视频播放器 · 嵌入视频
视频是可在页面中播放、包含连续画面和时间进度的媒体内容
▶
产品演示 · 02:18
提示与状态反馈12 个条目
警告提示Alert
提示与状态反馈
警告提示是嵌在页面内容中、持续说明状态、风险或异常的提示组件
⚠体验环境 · 数据每日 0 点重置×
✕提交失败 · 2 处填写有误，请检查后重试×
轻提示Toast
提示与状态反馈
轻提示是在页面角落短暂显示、反馈刚完成操作的提示组件
保存成功
保存
通知Notification
提示与状态反馈
通知是提醒用户关注或稍后处理事件的较完整消息组件
审核未通过
封面临摹比例过高，请调整后重新提交。
查看原因 →
×
弹窗Modal
提示与状态反馈
弹窗是覆盖在当前页面上方、暂时集中用户处理一项任务的对话框组件
确认删除这个项目？
取消确认删除
抽屉Drawer
提示与状态反馈
抽屉是从屏幕边缘展开、在保留当前页面上下文时显示内容的面板组件
任务详情 ×
关闭保存
气泡确认框Popconfirm
提示与状态反馈
气泡确认框是贴近触发操作、要求用户再次确认的轻量对话组件
⚠确认删除这条记录？
取消确定
删除
气泡卡片Popover
提示与状态反馈
气泡卡片是贴近触发元素展开、可承载补充信息和少量操作的浮层组件
林
oil-oil
产品经理 · 深圳
查看主页 →
林
文字提示Tooltip
提示与状态反馈
文字提示是在悬停、聚焦或点击后显示简短说明的浮层组件
⚙设置
★收藏
⬇下载
进度条Progress
提示与状态反馈
进度指示器
进度条是用长度、百分比或阶段表示任务完成程度的状态组件
上传中…66%
骨架屏Skeleton
提示与状态反馈
骨架屏是用内容轮廓占位、在加载时保持页面布局稳定的状态组件
结果页Result
提示与状态反馈
结果页是在一个完整流程结束后集中说明结果和下一步操作的页面状态
✓
提交成功
审核结果将在 1-3 个工作日内通知你
旋转加载指示器Spinner
提示与状态反馈
加载圈 · Loading Spinner
旋转加载指示器是用持续旋转表示系统正在处理、但完成度未知的状态组件
正在保存…
页面导航8 个条目
导航菜单Menu
页面导航
导航菜单是按层级组织页面或功能入口、帮助用户在产品中移动的导航组件
面包屑Breadcrumb
页面导航
面包屑是按层级展示当前页面路径、帮助用户返回上级的导航组件
分页Pagination
页面导航
分页是把大量结果分成多个可定位页面浏览的导航组件
步骤条Steps
页面导航
Stepper · 步骤指示器 · 流程步骤条
步骤条是展示多步流程及当前进度的导航与状态组件
✓填写信息 2确认订单 3完成支付
下拉菜单Dropdown
页面导航
操作菜单 · 更多菜单
下拉菜单是点击一个入口后展开一组相关操作的浮层菜单组件
锚点Anchor
页面导航
锚点是让用户在同一长页面内跳到指定章节位置的页内导航链接
二、方案设计
一、背景 二、方案 三、结论
回到顶部BackTop
页面导航
回到顶部是让用户从长页面当前位置快速返回页首的导航按钮
跳过导航链接SkipLink
页面导航
跳到主内容 · Skip to content
跳过导航链接是让键盘用户直接把焦点移到页面主内容的快捷链接
页面结构6 个条目
顶部导航布局Top Nav
页面结构
顶部导航布局是一种把主要导航放在页面上方、下方安排内容区域的页面结构
左侧栏布局Sidebar
页面结构
侧栏布局是一种把层级导航放在页面一侧、把主要任务内容放在另一侧的页面结构
单页滚动布局Single Page
页面结构
单页滚动布局是一种把相关内容按阅读顺序放在同一长页面中的页面结构
文档三栏布局Doc Layout
页面结构
文档三栏布局是一种同时显示整站目录、正文内容和本页大纲的页面结构
卡片网格布局Card Grid
页面结构
卡片网格布局是一种用规则行列排列同类卡片，并随可用宽度换行的页面结构
居中窄栏布局Centered Column
页面结构
居中窄栏布局是一种限制内容栏宽度并将其置于页面中央的页面结构
官网常用区块9 个条目
首屏Hero
官网常用区块
网页开头用来说明页面重点并引导下一步的主要区域
行动号召CTA
官网常用区块
行动号召是引导用户完成注册、试用、购买等下一步的按钮或链接
用户原声UserVoice
官网常用区块
用户原声是引用真实使用者经历和评价，用来说明产品实际使用结果的内容区块
页头Header
官网常用区块
网站页头 · 站点页头 · Site Header
页头是网页顶部承载品牌、导航和常用入口的完整页面区域
顶部导航栏Navbar
官网常用区块
导航栏 · 主导航栏
顶部导航栏是网页页头中提供主要页面入口和当前位置提示的导航区域
页脚Footer
官网常用区块
页脚是网页底部集中放置补充链接、版权和联系方式的页面区域
常见问题FAQ
官网常用区块
常见问题是集中回答用户反复提出的疑问及其答案的内容区块
定价区Pricing
官网常用区块
定价区是把多个套餐的价格、权益和适用对象并列比较的页面区块
社会证明SocialProof
官网常用区块
社会证明是展示真实客户、使用数据、评价或媒体报道，以提供外部信任依据的内容
视觉效果与操作状态16 个条目
衬线与非衬线Serif & Sans
视觉效果与操作状态
衬线与非衬线是按笔画末端是否带有装饰来区分的两类字体风格
好的设计经得起凝视
同一段文案，衬线让它显得优雅、正式，像杂志里的编辑精选。
衬线 · Georgia / 宋体
好的设计经得起凝视
同一段文案，非衬线让它显得现代、干净，像效率工具的界面。
非衬线 · 系统默认
渐变Gradient
视觉效果与操作状态
渐变是一种让两个或多个颜色在指定方向或范围内连续过渡的视觉效果
线性 · 活力 径向 · 聚焦 双色 · 潮流 同色 · 克制
圆角的气质Corner Feel
视觉效果与操作状态
圆角的气质是指不同圆角大小在界面中带来的视觉感受和一致性规则
按钮直角 · 严肃 按钮小圆角 · 克制 按钮中圆角 · 友好 按钮胶囊 · 活泼
悬停Hover
视觉效果与操作状态
悬停是鼠标指针停在元素上但尚未点击时出现的交互状态
悬停我浮起 + 变色 对照组我不响应 把鼠标放上去试试 ↑
按下Active
视觉效果与操作状态
按下是鼠标或手指正在按住控件时出现的短暂交互状态
真的按下去：左边会下沉，右边没有“按到了”的感觉
聚焦Focus
视觉效果与操作状态
聚焦是当前会接收键盘输入或操作的元素所处的交互状态
两个都点进去试试：左边有描边，右边聚焦了也看不出来
拖拽Drag
视觉效果与操作状态
拖拽是一种按住元素并移动它的位置或把它放到目标区域的交互方式
⠿ 拖我 放到这里
真的可以拖，松手会弹回去
禁用Disabled
视觉效果与操作状态
禁用是表示控件当前不能执行操作的交互状态
先填写邮箱才能提交 右边是真的 disabled：点不动，悬停看原因
过渡Transition
视觉效果与操作状态
过渡是一种让 CSS 属性从一个状态平滑变化到另一个状态的动效方式
悬停我← 真的会变（transition）
分帧示意：颜色一格一格变过去，而不是瞬间跳变
动画Animation
视觉效果与操作状态
动画是一种用 @keyframes 定义多个阶段，并控制其播放方式的 CSS 动效
0%50%100%@keyframes 定义节点，浏览器补齐中间
缓动Easing
视觉效果与操作状态
缓动是规定动画在持续时间内如何加速和减速的速度曲线
ease-out 入场ease-in 退场linear 机械
弹性Spring
视觉效果与操作状态
弹性动画是一种用刚度、阻尼和质量等物理参数计算运动的动效方式
冲过目标线再回来：过冲（overshoot）+ 回弹
渐入渐出Fade In / Out
视觉效果与操作状态
渐入渐出是一种通过改变透明度让内容出现或离开的基础动效
分帧示意：opacity 0 → 1，同时轻轻上移
毛玻璃Backdrop Blur
视觉效果与操作状态
毛玻璃是一种通过模糊元素背后画面，让半透明界面层与背景区分开的视觉效果
山居民宿 · 云顶
海拔 1,200 米，推开窗就是云海。
backdrop-filter: blur(12px)
光标Cursor
视觉效果与操作状态
光标是鼠标指针悬停在网页元素上时显示的形状提示
↖default 👆pointer Itext ✋grab ⊘not-allowed ⏳wait
选中高亮Selection
视觉效果与操作状态
选中高亮是用户拖选网页文字后，浏览器为选区显示的前景色和背景色
默认色
拖选一段文字，中间这段就是选中高亮，底色由浏览器决定。
品牌色
拖选一段文字，中间这段就是选中高亮，和品牌色呼应。
样式与布局基础12 个条目
外边距Margin
样式与布局基础
外边距是元素边框外的透明空间，用来控制它与周围元素之间的距离
卡片 A24卡片 B
内边距Padding
样式与布局基础
内边距是元素内容与边框之间的留白，用来让文字或图标不紧贴组件边缘
内容
圆角BorderRadius
样式与布局基础
圆角是通过 border-radius 把元素直角改为圆弧的 CSS 样式
阴影Shadow
样式与布局基础
阴影是通过 box-shadow 在元素周围绘制投影，用来区分界面层级的 CSS 效果
浅中浮起
弹性布局Flex
样式与布局基础
弹性布局是一种用 Flexbox 沿一条主轴排列和对齐直接子元素的 CSS 布局方式
网格布局Grid
样式与布局基础
网格布局是一种用 CSS Grid 同时定义行和列，再把子元素放入二维格子的布局方式
层级Z-Index
样式与布局基础
层级是通过 z-index 控制元素在同一层叠上下文中前后遮盖顺序的 CSS 规则
z: 1 z: 2 z: 3
透明度Opacity
样式与布局基础
透明度是通过 opacity 同时降低元素及其全部子内容可见程度的 CSS 属性
100%50%15%
文本截断Text Truncate
样式与布局基础
文本截断是一种在有限空间内隐藏超出文字，并用省略号提示内容未显示完整的显示方式
2026 年度产品规划与路线图最终确认版本 v3
本次规划围绕「让新手第一周就做出自己的页面」展开，包含课程体系重构、实战项目升级与社群运营三条主线，具体排期见附录。
设计系统组件覆盖率审计报告（对外发布版）
对现有 42 个组件逐一核查覆盖情况，标记高频缺漏并给出补齐优先级建议，供下季度排期参考。
吸顶Sticky
样式与布局基础
吸顶是一种让元素先按正常位置排列、滚动到指定边界后暂时固定显示的 CSS 定位方式
↕ 滚动试试：分组标题会吸在顶部接力
定位Position
样式与布局基础
定位是通过 CSS position 和偏移量决定元素是否脱离文档流及其参照位置的布局规则
NEW ✓ 卡片写了 relative，角标贴在卡片右上角
NEW ✕ 卡片没写 relative，角标飞到整个容器角落 →
居中Centering
样式与布局基础
居中是把文字、元素或一组内容在容器的水平、垂直或两条轴上对齐到中间的布局方式
flex
grid
absolute