老听人说前端、后端，这两个到底有什么区别？
前端 VibeCoding 术语
网页基础14 个条目
把这个重复出现的商品区做成组件，改一个地方就能同步更新。
提交按钮点下去先显示保存中，成功或失败后再更新提示。
AI 写的文档里全是 # 和星号，这是什么？能变成好看的排版吗？
AI 写出来的代码里一堆 < > 和英文单词，这些东西是干嘛的？
按钮能点但颜色一直是灰色，帮我找出是哪条样式把主题色覆盖了。
点击新增后页面确实多了一条任务，但源 HTML 里找不到它，帮我确认运行时到底插入了什么。
每个商品详情页的浏览器标签都显示对应商品名，同时保留页面里的 H1。
请分别检查这个页面在标签页、搜索摘要、链接分享和安装入口里显示了什么。
把网站在标签页和书签里的小图标换成我们的品牌图形，但不要改页头 Logo。
文章页的分享卡要有正确标题、摘要、绝对图片地址和规范 URL，改完请用真实分享预览检查。
检查 Web App Manifest 的名称、图标、start_url 和 display，重新安装后验证启动结果。
这个改动不对，把这一步撤销掉，回到我动手之前的样子。
帮我检查一下页面的无障碍：图片有没有文字说明、所有按钮能不能用 Tab 键点到、对比度够不够。
按钮与链接2 个条目
表单19 个条目
页面上要有个填邮箱的地方。
要让用户写一大段话，一行肯定不够。
数量那里只能填数字，最好能直接按加减。
这几个选项只能选一个，选了新的要把旧的取消掉。
这几个选项不冲突，用户想选几个都行。
像手机设置里那样，这个功能一拨就开、再拨就关。
价格范围想用一根可以拖着走的滑杆来调。
想让用户给商品打个分，用星星就行。
选项有几十个，全摆出来太占地方，收起来点一下再挑。
输入前几个字，下面自动猜我要写什么，点一下就补全。
选地址那种，先选省、再选市、再选区，一层层点下去。
选项是一层套一层的，得能展开再选。
日期别让用户手输，给个日历直接挑。
让用户选几点几分，别让他自己打字。
用户要能把自己的图片传上来。
帮我做个注册页，用户填完信息点提交那种。
主题色想让用户自己挑，别写死。
每栏前面得写清楚要填什么，不然用户看不懂。
邮箱输入框的占位文字写成 you@example.com 这样的示例格式，标签「邮箱」要一直显示，不能只靠占位文字。
内容展示25 个条目
订单数据堆在一起太乱了，帮我排成表格，一行一条。
这些内容一条一条排下来就行，格式统一。
每个商品做成一张小卡片：图在上面，名字价格在下，整张都能点。
文章得标出是教程还是新闻，让人一眼能分出来。
消息图标右上角那个红色小数字，显示有几条没读。
评论区得看到是谁在说话，带上头像。
详情页把信息列清楚就行：名称、时间、状态，一项一项的。
首页要几个特别大的数字，比如用户数、成交额。
内容太多了，帮我分几个页签，点一下就换一屏。
就两三个选项并排，点哪个选哪个，像 iPhone 那种切换条。
问题很多，先只显示标题，点开了再看答案。
物流到哪一步了，按时间排出来，让用户看得明白。
文件夹那种一层层展开的，点小三角展开下一级。
首页大图想几张轮着播，自动切换，还能点左右箭头。
没数据的时候别一片空白，放张图加句话，告诉用户接下来怎么办。
文章里要能插图，手机上别变形。
传上来的附件得能看到文件名和大小，还能删掉。
按钮上加个小图形，让人不看字也知道是干嘛的。
把这句别人的原话单独突出一下，标明是谁说的。
我想在页面里放个视频，用户点一下就能看。
把这个聊天窗口补全消息列表、输入区、发送中和失败重试，别把错误藏起来。
只显示本周、未完成、负责人是我的任务，其他任务先不看。
用图表比较这六个月的订单变化，但不要让人只看颜色猜数值。
用现有品牌形状做一个适合主屏幕、搜索和设置显示的方形 App Icon，别改应用里的工具栏图标。
报价列表打开时最新的放最上面，金额那列能点一下按大小排。
弹窗与提示12 个条目
页面上方要一直挂着一条黄色提示，告诉用户账号快到期了。
就是那种角落冒出来一句“已保存”，过两秒自己消失的小提示。
右上角铃铛点开，里面列出所有系统消息。
点击按钮后弹出一个居中窗口，背景变暗，必须确认或关闭后才能继续。。
从右边滑出来一块面板看详情，背后的列表还能看见。
点删除时在按钮旁边冒一句“确定吗”，别直接弹大窗。
点一下头像，旁边浮出一张小卡片显示资料。
鼠标放上去飘出一行小字，解释这个图标是干嘛的。
上传文件得让用户看到传到多少了，不然以为卡死了。
加载时先显示灰色的框框占位，别一直转圈。
付款成功后显示付款结果、订单信息和下一步操作，别直接跳走。
加载慢的时候给个转圈的东西，不然用户以为坏了。
导航9 个条目
功能越来越多，得有一列菜单让用户找得到入口。
页面层级太深了，顶上显示一下当前在哪，能点回上一层。
内容太多一页放不下，底下加上 1、2、3 翻页。
下单分三步，顶部要显示现在走到第几步了。
鼠标放到用户名上，往下展开“设置”“退出”几个选项。
页面很长，点右边的小目录直接跳到对应段落。
滚到很下面之后，右下角出个按钮一键回顶部。
有人说用键盘得按好多下 Tab 才能到正文，能不能让他一步到位？
在项目列表顶部加搜索，输入名称或关键词后快速找到可能相关的项目。
官网区块10 个条目
网站最上面那块太空了，想要大图加大字那种，一眼知道我们是干嘛的。
想在页面里放个显眼的地方，让人看了就想点“免费试用”。
光自己夸不够，放几条真实用户说的话更有说服力。
最顶上那条怎么排？logo、导航、登录按钮都得塞进去。
保持品牌核心形状，为桌面、移动和深色背景选择合适的 Logo 变体，分别截图验收。
顶上的导航要把主要栏目都放进去，我在哪个页面得看得出来。
页面最底下那块也得有，放点链接和版权信息。
把用户最常问的问题整理成一问一答，放在页尾。
做三档套餐并排对比，中间那档标个“最受欢迎”。
放一排合作客户的 logo，再加一句“10 万+ 团队在用”。
页面布局9 个条目
最经典那种结构：上面一条导航，下面全是内容。
左边一列功能菜单，右边大块区域显示内容，像后台那样。
所有内容放在一个长页面里，往下滚就能看完。
像技术文档那样：左边目录、中间正文、右边本页大纲。
内容做成一排排卡片，宽了多放几列，窄了自动换行。
内容别铺满全屏，中间窄窄一条、两边留白，像博客那样。
图片高矮不一样，别硬裁成一样高，矮的下面自动补上新的就行。
首页左右各一半，左边放品牌介绍，右边直接登录，手机上改成上下。
手机宽度下把三列改成一列，桌面的导航和卡片布局保持不变。
CSS 布局11 个条目
元素都堆在一起了，帮我把留白调舒服点：相关的靠近，不相关的分开。
这个块和旁边那个太贴了，把它们之间撑开一点。
字都顶到盒子边上了，让内容和边框之间留点空。
把这几个按钮排成一行，间距均匀，还能垂直居中。
这些卡片排成整齐的格子，屏幕窄了自动变成两列。
那个弹窗被别的内容挡住了，让它显示在最上面。
往下滚的时候，让导航栏一直钉在页面顶部。
把这个小图标固定在卡片右上角，别的内容怎么排都不影响。
这个框帮我水平垂直都居中——怎么就那么难？
这个卡片明明设为 320px，为什么加了内边距后反而挤出容器？
这张卡片的内容底部被遮住了，帮我检查是不是纵向溢出，别让按钮被裁掉。
文字3 个条目
这页文字全糊在一起了，帮我分出标题、正文和提示，一眼能看出重点。
标题想要那种笔画带小装饰的字体，正文用干净点的。
标题太长就把后面的藏起来，结尾显示省略号。
外观11 个条目
上下两块内容太挤了，中间加一条淡淡的线隔开。
把卡片的尖角磨圆一点，看着柔和些。
给卡片下面加一层淡淡的投影，让它像浮在页面上。
这张图太抢戏了，把它调得半透明一点。
背景别用纯色，让颜色从蓝慢慢过渡到紫。
全站的圆角统一一下，别有的方有的圆，看着乱。
导航栏做成半透明的，后面的内容滚过去时模模糊糊。
给产品加真正的深色模式，文字、边框、图表和代码块都要跟着切换。
把主色、间距和圆角整理成设计令牌，别在每个组件里重复写一组数值。
页面上那段灰色说明文字太费眼了，帮我调清楚一点。
这个页面看起来特别乱，什么都一样大。帮我排个主次：主标题最突出，说明次要一点，按钮最显眼。
动画5 个条目
按钮变色太突兀了，能不能慢慢变过去？
让这个图标一直循环动，比如轻轻上下浮动。
动画一卡一卡的不自然，能不能像真实的东西那样有快有慢？
弹窗出现时带一点回弹，像弹簧那样轻轻晃一下。
切换内容的时候，让旧的淡出、新的淡入。
鼠标7 个条目
鼠标放上去的时候按钮变个色，让人知道它能点。
点下去那一瞬间，点击按钮时需要有明确的按下凹陷反馈。
Tab 键切换的时候看不出当前停在哪，能不能给个明显的框？
这些卡片希望能按住拖动，换个顺序。
表单没填完之前，提交按钮要是灰的、点不了。
鼠标移到能点的东西上，变成小手。
用户划选文字时的底色，想换成品牌色。