前端Frontend
网页开发入门让用户在浏览器里查看内容并完成操作
网页开发入门3 个条目
Markdown 文档Markdown
网页开发入门不用排版软件，也能快速写出结构清楚的文档
HTML 页面结构HTML
网页开发入门让浏览器看懂网页中哪些是标题、图片、链接和按钮
按钮与基础样式5 个条目
填写与选择18 个条目
输入框Input
填写与选择让用户输入一行文字
多行文本域Textarea
填写与选择让用户输入多行文字
数字输入框InputNumber
填写与选择收集数量、价格等数字，并限制输入范围
单选框Radio
填写与选择让用户在几个互斥选项中只选一个
复选框Checkbox
填写与选择让用户独立选择一个或多个条件
开关Switch
填写与选择立即打开或关闭一项功能
消息通知
深色模式
滑块Slider
填写与选择让用户快速调整音量、亮度或数值范围
音量
亮度
评分Rate
填写与选择让用户用星级或等级快速表达评价
选择器Select
填写与选择选项较多时收进菜单，让用户从固定答案中选择
自动完成AutoComplete
填写与选择输入时提供匹配建议，减少重复填写
vibe coding 入门指南
vibe-ui-guide 组件图鉴
vibe 设计规范文档
级联选择器Cascader
填写与选择让用户沿着层级快速找到具体地区或分类
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
树选择TreeSelect
填写与选择让用户从有父子关系的选项中完成单选或多选
研发部前端组
▾研发部
前端组
后端组
▸设计部
日期选择器DatePicker
填写与选择用日历减少格式歧义，快速选择一天或一段时间
2026-07-21📅
一二三四五六日
20212223242526
时间选择器TimePicker
填写与选择让用户从有效范围中准确选择时间
14:30
131415
:
003045
上传Upload
填写与选择让用户把电脑或手机里的文件提交到网页
⬆点击或拖拽文件到这里支持 JPG / PNG，不超过 10MB
📄66%
表单Form
填写与选择把多个字段组织成一个任务，校验后统一提交
颜色选择器ColorPicker
填写与选择在设置里选一个颜色，并看见它会是什么样子
#7257D8⌄
表单标签Label
填写与选择用不会消失的文字说明这个输入框要填什么
内容与数据展示20 个条目
表格Table
内容与数据展示让用户按行和列快速比较多条数据
项目状态更新
官网改版进行中刚刚
年报设计已完成昨天
列表List
内容与数据展示用相同结构连续展示内容，方便从上到下浏览
foundit 评论了你的设计稿这个配色很舒服 👍 · 2 分钟前
油
阿油 邀请你加入项目AI 图鉴 · 1 小时前
卡片Card
内容与数据展示把同一对象的信息和操作集中展示
AI 图鉴：零基础组件入门
每个组件一张卡片，3 分钟看懂一个。
标签Tag
内容与数据展示让用户快速识别内容的状态、类别或筛选条件
进行中已完成已逾期前端×
徽标Badge
内容与数据展示贴在图标或文字旁，补充数量、状态等小信息
🔔5
✉️99+
林
头像Avatar
内容与数据展示帮助用户在成员和评论中快速认出一个人或团队
林
林油+5
描述列表Descriptions
内容与数据展示把一项信息的名称和值并排展示，方便查看详情
创建人foundit
状态进行中
更新时间2026-07-20 14:32
统计数值Statistic
内容与数据展示让关键数字和变化更容易被看见
本月销售额¥ 864,000↑ 12.5%
活跃用户12,846↓ 2.1%
标签页Tabs
内容与数据展示不用离开当前页，就能切换几组平级内容
全部 24 个项目
分段控件Segmented
内容与数据展示让用户在少量互斥模式之间快速切换
折叠面板Collapse
内容与数据展示先收起次要内容，需要时再展开
进入「项目设置 → 成员」，点击“邀请成员”，输入对方邮箱即可。
支持，项目设置里可导出 CSV 或 JSON。
时间轴Timeline
内容与数据展示把物流、审批或更新记录按时间顺序讲清楚
包裹已签收07-20 14:32
运输中07-19 09:15
已下单07-18 20:02
树形控件Tree
内容与数据展示让用户逐层查看文件夹、部门或分类
foundit
foundit
阿麦
前端组
后端组
走马灯Carousel
内容与数据展示在有限空间里轮流展示多组内容
夏季新品发布会
城市巡展报名中
森林团建回顾
空状态Empty
内容与数据展示在没有数据时说明原因和下一步
还没有任何项目创建第一个项目，开始协作吧
图片Image
内容与数据展示让图片按稳定尺寸显示，并处理裁切和加载失败
🔍 预览
⚠
加载失败
加载失败
文件项File
内容与数据展示把文件名、类型、大小和操作清楚放在一起
📄项目计划.pdf2.4 MB · PDF⋯
图标Icon
内容与数据展示用一个稳定的小符号，让用户更快认出功能或状态
引用Quote
内容与数据展示把一段来自别人或别处的原话，从正文里清楚区分出来
“先让用户看懂，再让用户行动。”— 产品原则
视频Video
内容与数据展示在页面里播放一段带时长和控制的动态内容
▶
产品演示 · 02:18提示与状态反馈12 个条目
警告提示Alert
提示与状态反馈把需要持续看到的状态或风险放在相关内容旁
体验环境 · 数据每日 0 点重置×
提交失败 · 2 处填写有误，请检查后重试×
轻提示Toast
提示与状态反馈用几秒钟告诉用户保存、复制等操作已经完成
保存成功
保存
通知Notification
提示与状态反馈让用户看到需要关注或稍后处理的重要消息
审核未通过
封面临摹比例过高，请调整后重新提交。
查看原因 →弹窗Modal
提示与状态反馈不用离开当前页面，就能集中完成一项短任务
确认删除这个项目？
取消确认删除
抽屉Drawer
提示与状态反馈不用离开当前页面，就能查看详情或调整设置
任务详情 ×
关闭保存
气泡确认框Popconfirm
提示与状态反馈防止误点，在原操作旁完成一次简单确认
⚠确认删除这条记录？
取消确定
气泡卡片Popover
提示与状态反馈不离开当前内容，就能补充更多信息或操作
林
查看主页 →foundit
产品经理 · 深圳
文字提示Tooltip
提示与状态反馈让用户看懂陌生图标、截断文字或专业术语
⚙设置
★收藏
⬇下载
进度条Progress
提示与状态反馈让用户知道任务仍在进行，以及已经完成多少
骨架屏Skeleton
提示与状态反馈预留内容位置，减少加载时的页面跳动
结果页Result
提示与状态反馈在流程结束后告诉用户结果，以及下一步可以做什么
提交成功
审核结果将在 1-3 个工作日内通知你
旋转加载指示器Spinner
提示与状态反馈用持续旋转告诉用户：系统正在处理，请稍等
正在保存…
页面导航8 个条目
导航菜单Menu
页面导航让用户找到主要页面入口，并知道自己在哪里
面包屑Breadcrumb
页面导航让用户看懂当前页面层级，并快速返回上级
分页Pagination
页面导航让用户分批浏览大量内容，并能回到指定页
‹
…
10
›
步骤条Steps
页面导航让用户知道流程走到哪一步，接下来要做什么
✓填写信息
2确认订单
3完成支付
下拉菜单Dropdown
页面导航把低频操作集中到一个入口，减少页面占用
锚点Anchor
页面导航不用反复滚动，直接跳到长页面的指定章节
二、方案设计
一、背景
二、方案
三、结论
回到顶部BackTop
页面导航读完长页面后，一键回到开头
跳过导航链接SkipLink
页面导航给键盘用户一个快捷入口，越过重复导航直接进入正文
页面结构6 个条目
顶部导航布局Top Nav
页面结构把常用入口放在页面上方，让用户随时都能找到
左侧栏布局Sidebar
页面结构把多级导航和工作内容分开，方便切换复杂功能
单页滚动布局Single Page
页面结构让访客按顺序在一个长页面里了解完整内容
文档三栏布局Doc Layout
页面结构让读者既能浏览文档目录，也能看清当前章节位置
卡片网格布局Card Grid
页面结构让卡片随屏幕宽度自动排布，减少逐个适配
居中窄栏布局Centered Column
页面结构收窄内容宽度并减少干扰，让阅读或填写更集中
官网常用区块9 个条目
首屏Hero
官网常用区块让访客打开页面就明白产品是什么、接下来能做什么
行动号召CTA
官网常用区块让用户清楚下一步可以注册、试用或购买
用户原声UserVoice
官网常用区块用真实经历帮助访客判断产品是否适合自己
页头Header
官网常用区块让用户在页面顶部找到品牌、导航和账号入口
顶部导航栏Navbar
官网常用区块让用户在页面顶部找到品牌、导航和必要操作
页脚Footer
官网常用区块让用户在页面底部找到政策、联系方式和次要入口
常见问题FAQ
官网常用区块让用户在做决定前快速找到常见问题的答案
定价区Pricing
官网常用区块让用户快速比较套餐价格、权益和适用对象
社会证明SocialProof
官网常用区块用真实客户、评价和数据减少访客顾虑
视觉效果与操作状态16 个条目
衬线与非衬线Serif & Sans
视觉效果与操作状态根据阅读场景和品牌气质选择更合适的字体
好的设计经得起凝视
同一段文案，衬线让它显得优雅、正式，像杂志里的编辑精选。
衬线 · Georgia / 宋体好的设计经得起凝视
同一段文案，非衬线让它显得现代、干净，像效率工具的界面。
非衬线 · 系统默认渐变Gradient
视觉效果与操作状态用连续色彩建立方向和重点，丰富背景层次
线性 · 活力
径向 · 聚焦
双色 · 潮流
同色 · 克制
圆角的气质Corner Feel
视觉效果与操作状态通过统一圆角让界面更硬朗或更柔和
按钮直角 · 严肃
按钮小圆角 · 克制
按钮中圆角 · 友好
按钮胶囊 · 活泼
悬停Hover
视觉效果与操作状态让鼠标用户在点击前知道哪里可以操作
悬停我浮起 + 变色
对照组我不响应
把鼠标放上去试试 ↑
按下Active
视觉效果与操作状态让用户按下控件时立即得到反馈
真的按下去：左边会下沉，右边没有“按到了”的感觉
聚焦Focus
视觉效果与操作状态让键盘用户看清当前正在操作哪里
两个都点进去试试：左边有描边，右边聚焦了也看不出来
拖拽Drag
视觉效果与操作状态让用户直接移动项目完成排序或放置
⠿ 拖我
放到这里
真的可以拖，松手会弹回去
禁用Disabled
视觉效果与操作状态让用户知道哪些控件暂时不能用
先填写邮箱才能提交
右边是真的 disabled：点不动，悬停看原因
过渡Transition
视觉效果与操作状态让按钮变色、开关移动等状态变化不显得突兀
悬停我← 真的会变（transition）
分帧示意：颜色一格一格变过去，而不是瞬间跳变
动画Animation
视觉效果与操作状态处理加载、入场等需要多个阶段的连续动作
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
样式与布局基础把组件的方角变圆，统一界面的视觉气质
阴影Shadow
样式与布局基础让弹窗、菜单等浮层和背景更容易区分
浅中浮起
弹性布局Flex
样式与布局基础快速排好一行或一列元素，并控制对齐和间距
网格布局Grid
样式与布局基础按行和列排布内容，适合卡片墙和复杂区域
层级Z-Index
样式与布局基础让菜单、弹窗等重叠内容按正确顺序显示
z: 1
z: 2
z: 3
透明度Opacity
样式与布局基础让元素整体变淡，用于弱化或渐隐
100%50%15%
文本截断Text Truncate
样式与布局基础用省略号收起放不下的文字
2026 年度产品规划与路线图最终确认版本 v3
本次规划围绕「让新手第一周就做出自己的页面」展开，包含课程体系重构、实战项目升级与社群运营三条主线，具体排期见附录。
设计系统组件覆盖率审计报告（对外发布版）
对现有 42 个组件逐一核查覆盖情况，标记高频缺漏并给出补齐优先级建议，供下季度排期参考。
吸顶Sticky
样式与布局基础让表头、筛选栏等滚动后继续留在视线内
🔥 热门组件
按钮 Button
输入框 Input
卡片 Card
🧭 页面导航
导航菜单 Menu
分页 Pagination
面包屑 Breadcrumb
定位Position
样式与布局基础把角标、浮层或固定导航放到指定位置
NEW
✓ 卡片写了 relative，角标贴在卡片右上角
NEW
✕ 卡片没写 relative，角标飞到整个容器角落 →
居中Centering
样式与布局基础让文字、区块或浮层在需要的位置居中
flex
grid
absolute