前端Frontend
老听人说前端、后端，这两个到底有什么区别？
前端 VibeCoding 术语
网页基础3 个条目
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
每栏前面得写清楚要填什么，不然用户看不懂。
内容展示20 个条目
表格Table
订单数据堆在一起太乱了，帮我排成表格，一行一条。
列表List
这些内容一条一条排下来就行，格式统一。
卡片Card
每个商品做成一张小卡片：图在上面，名字价格在下，整张都能点。
标签Tag
文章得标出是教程还是新闻，让人一眼能分出来。
徽标Badge
消息图标右上角那个红色小数字，显示有几条没读。
头像Avatar
评论区得看到是谁在说话，带上头像。
描述列表Descriptions
详情页把信息列清楚就行：名称、时间、状态，一项一项的。
统计数值Statistic
首页要几个特别大的数字，比如用户数、成交额。
标签页Tabs
内容太多了，帮我分几个页签，点一下就换一屏。
分段控件Segmented
就两三个选项并排，点哪个选哪个，像 iPhone 那种切换条。
折叠面板Collapse
问题很多，先只显示标题，点开了再看答案。
时间轴Timeline
物流到哪一步了，按时间排出来，让用户看得明白。
树形控件Tree
文件夹那种一层层展开的，点小三角展开下一级。
走马灯Carousel
首页大图想几张轮着播，自动切换，还能点左右箭头。
空状态Empty
没数据的时候别一片空白，放张图加句话，告诉用户接下来怎么办。
图片Image
文章里要能插图，手机上别变形。
文件项File
传上来的附件得能看到文件名和大小，还能删掉。
图标Icon
按钮上加个小图形，让人不看字也知道是干嘛的。
引用Quote
把这句别人的原话单独突出一下，标明是谁说的。
视频Video
我想在页面里放个视频，用户点一下就能看。
弹窗与提示12 个条目
警告提示Alert
页面上方要一直挂着一条黄色提示，告诉用户账号快到期了。
轻提示Toast
就是那种角落冒出来一句“已保存”，过两秒自己消失的小提示。
通知Notification
右上角铃铛点开，里面列出所有系统消息。
弹窗Modal
就是那种点一下按钮，屏幕中间跳出来、背景变灰的那个框框。
抽屉Drawer
从右边滑出来一块面板看详情，背后的列表还能看见。
气泡确认框Popconfirm
点删除时在按钮旁边冒一句“确定吗”，别直接弹大窗。
气泡卡片Popover
点一下头像，旁边浮出一张小卡片显示资料。
文字提示Tooltip
鼠标放上去飘出一行小字，解释这个图标是干嘛的。
进度条Progress
上传文件得让用户看到传到多少了，不然以为卡死了。
骨架屏Skeleton
加载时先显示灰色的框框占位，别一直转圈。
结果页Result
付款成功后给用户一个“搞定了”的页面，别直接跳走。
旋转加载指示器Spinner
加载慢的时候给个转圈的东西，不然用户以为坏了。
导航8 个条目
导航菜单Menu
功能越来越多，得有一列菜单让用户找得到入口。
面包屑Breadcrumb
页面层级太深了，顶上显示一下当前在哪，能点回上一层。
分页Pagination
内容太多一页放不下，底下加上 1、2、3 翻页。
步骤条Steps
下单分三步，顶部要显示现在走到第几步了。
下拉菜单Dropdown
鼠标放到用户名上，往下展开“设置”“退出”几个选项。
锚点Anchor
页面很长，点右边的小目录直接跳到对应段落。
回到顶部BackTop
滚到很下面之后，右下角出个按钮一键回顶部。
跳过导航链接SkipLink
有人说用键盘得按好多下 Tab 才能到正文，能不能让他一步到位？
官网区块9 个条目
首屏Hero
网站最上面那块太空了，想要大图加大字那种，一眼知道我们是干嘛的。
CTA
想在页面里放个显眼的地方，让人看了就想点“免费试用”。
用户原声UserVoice
光自己夸不够，放几条真实用户说的话更有说服力。
页头Header
最顶上那条怎么排？logo、导航、登录按钮都得塞进去。
顶部导航栏Navbar
顶上的导航要把主要栏目都放进去，我在哪个页面得看得出来。
页脚Footer
页面最底下那块也得有，放点链接和版权信息。
FAQ
把用户最常问的问题整理成一问一答，放在页尾。
定价区Pricing
做三档套餐并排对比，中间那档标个“最受欢迎”。
社会证明SocialProof
放一排合作客户的 logo，再加一句“10 万+ 团队在用”。
页面布局6 个条目
顶部导航布局Top Nav
最经典那种结构：上面一条导航，下面全是内容。
左侧栏布局Sidebar
左边一列功能菜单，右边大块区域显示内容，像后台那样。
单页滚动布局Single Page
所有内容放在一个长页面里，往下滚就能看完。
文档三栏布局Doc Layout
像技术文档那样：左边目录、中间正文、右边本页大纲。
卡片网格布局Card Grid
内容做成一排排卡片，宽了多放几列，窄了自动换行。
居中窄栏布局Centered Column
内容别铺满全屏，中间窄窄一条、两边留白，像博客那样。
CSS 布局9 个条目
间距Space
元素都堆在一起了，帮我把留白调舒服点：相关的靠近，不相关的分开。
外边距Margin
这个块和旁边那个太贴了，把它们之间撑开一点。
内边距Padding
字都顶到盒子边上了，让内容和边框之间留点空。
弹性布局Flex
把这几个按钮排成一行，间距均匀，还能垂直居中。
网格布局Grid
这些卡片排成整齐的格子，屏幕窄了自动变成两列。
层级Z-Index
那个弹窗被别的内容挡住了，让它显示在最上面。
吸顶Sticky
往下滚的时候，让导航栏一直钉在页面顶部。
定位Position
把这个小图标固定在卡片右上角，别的内容怎么排都不影响。
居中Centering
这个框帮我水平垂直都居中——怎么就那么难？
文字3 个条目
排版Typography
这页文字全糊在一起了，帮我分出标题、正文和提示，一眼能看出重点。
衬线与非衬线Serif & Sans
标题想要那种笔画带小装饰的字体，正文用干净点的。
文本截断Text Truncate
标题太长就把后面的藏起来，结尾显示省略号。
外观7 个条目
分割线Divider
上下两块内容太挤了，中间加一条淡淡的线隔开。
圆角BorderRadius
把卡片的尖角磨圆一点，看着柔和些。
阴影Shadow
给卡片下面加一层淡淡的投影，让它像浮在页面上。
透明度Opacity
这张图太抢戏了，把它调得半透明一点。
渐变Gradient
背景别用纯色，让颜色从蓝慢慢过渡到紫。
圆角的气质Corner Feel
全站的圆角统一一下，别有的方有的圆，看着乱。
毛玻璃Backdrop Blur
导航栏做成半透明的，后面的内容滚过去时模模糊糊。
动画5 个条目
过渡Transition
按钮变色太突兀了，能不能慢慢变过去？
动画Animation
让这个图标一直循环动，比如轻轻上下浮动。
缓动Easing
动画一卡一卡的不自然，能不能像真实的东西那样有快有慢？
弹性Spring
弹窗出现时带一点回弹，像弹簧那样轻轻晃一下。
渐入渐出Fade In / Out
切换内容的时候，让旧的淡出、新的淡入。
鼠标7 个条目
悬停Hover
鼠标放上去的时候按钮变个色，让人知道它能点。
按下Active
点下去那一瞬间，按钮要有个被按瘪的感觉。
聚焦Focus
Tab 键切换的时候看不出当前停在哪，能不能给个明显的框？
拖拽Drag
这些卡片希望能按住拖动，换个顺序。
禁用Disabled
表单没填完之前，提交按钮要是灰的、点不了。
鼠标指针Cursor
鼠标移到能点的东西上，变成小手。
选中高亮Selection
用户划选文字时的底色，想换成品牌色。