AI写出来的前端很丑，想要调整，但是不知道怎么说？
一天一个 vibe coding 术语课，今天讲骨架屏。
一、什么是骨架屏？
你打开一个商品列表，商品图片、名称和价格还没加载出来，页面上先出现了几张灰色的商品卡片。
每张卡片里，商品图的位置是一个灰色方块，名称和价格的位置是几条灰色短线。
这些灰色形状不是真实商品，只是暂时占住了内容将来出现的位置。
这叫骨架屏，英文 skeleton screen，也经常简称 skeleton。
组成骨架屏的每一块临时形状，可以叫骨架占位，英文通常仍然直接说 skeleton。
多块骨架占位组合在一起，就能搭出一张卡片、一段列表，甚至整个页面的骨架屏。
骨架屏最常出现在各种列表页里。
文章列表的骨架占位通常对应封面、标题和摘要。换成视频列表，画面里会多一块横向封面，下面留出标题和作者的位置。评论列表通常只需要占住头像、昵称和几行评论内容。
列表之外，商品详情页会用骨架占位先搭出商品大图、商品名、价格和介绍。文章详情页对应的是标题、作者、发布时间和正文段落。个人主页则会先占住头像、昵称、简介和数据统计的位置。
搜索结果和分类页面也会用到。用户换了关键词、筛选条件或者内容分类，旧内容已经不适用，新内容又还没回来，中间这段等待就可以先显示结果列表的骨架。
数据看板里的统计数字还没回来时，可以先显示数字卡片的骨架占位。表格页面通常保留表头，再用几行骨架占位表示数据仍在读取。
这些场景长得不一样，共同点是：页面要显示什么结构已经知道，只是里面的真实内容还在读取。
数据回来以后，骨架占位被替换，真正的图片、文字和数字回到各自的位置。
二、骨架屏要照着最终内容占位置
一张内容卡片最终会有封面、标题和两行摘要，加载时就先放一个图片大小的方块，再放一条较粗的标题占位和两条较细的正文占位。
专门代替文字的这一组短线，常叫文字骨架，英文 skeleton text。
如果最终内容里有头像，骨架占位通常也是圆形；最终要显示横向封面，骨架占位就应该是接近封面比例的长方形。
骨架屏不需要猜出文字会写什么，也不需要把每个像素提前画准。它要对得上的是内容的种类、大致尺寸和排列关系。
这样内容回来时，原来的位置直接被替换，页面不会先是一片空白，随后又突然把下面的内容全部挤开。
三、骨架屏的动效不表示完成进度
有些骨架屏只是停在那里，没有动画。
有些会缓慢变亮、再变暗，像在呼吸。这叫脉冲动画，英文 pulse animation。
还有些会让一条较亮的光带从骨架上扫过去。这类扫光效果，英文常叫 shimmer。
脉冲和扫光都在告诉用户：内容仍然在加载，页面没有卡住。
它们不会告诉用户已经完成了多少。光带扫到一半，不代表数据加载了百分之五十；重新扫一遍，也不代表任务重新开始了。
骨架动效是等待反馈，不是进度条。
四、哪些等待不适合用骨架屏
用户点下保存设置、提交表单、付款或者上传文件时，等的是刚才那项操作有没有完成，不是在等一块内容填进页面。
这类等待需要直接反馈操作仍在处理中。骨架屏不能替代「保存中」「付款中」「上传中」这些操作反馈。
内容几乎同时出现时，也没必要让骨架屏闪一下再消失。它只出现一瞬间，用户看到的不是更顺，而是界面无缘无故抖了一下。
五、内容没来、没有内容和加载失败，是三种状态
数据仍在读取，才显示骨架屏。
骨架形状只解决了看得见的提示。使用屏幕朗读的人看不到这些形状，界面还要让辅助功能知道这块内容仍在加载。
如果读取完成，却没有任何内容，页面该显示的是空状态，英文 empty state。它要告诉用户这里暂时没有内容，以及接下来能做什么。
如果数据没有加载成功，页面就该进入错误状态，英文 error state，说明这次加载失败，并在可以重试时给出重试入口。
骨架屏只代表「内容还没回来」。没有内容和加载失败，都不能让骨架一直留在那里装作还在等待。
六、最常见的一条用错
商品列表加载时，骨架把商品图画成正方形，标题只留了一行。真实商品卡片出现以后，图片变成横图，标题有两行，下面还多了价格和标签。每张卡片都突然变高，整条列表跟着往下跳。
这就是最常见的用错：骨架屏画的是一套通用模板，和最终内容根本对不上。
骨架屏不是往空白页上随便摆几块灰色。它提前占住的每一个位置，都应该能在真实内容里找到对应的东西。
骨架屏最重要的不是像骨头，而是像结果。
