骨架屏

Skeleton

UI 组件也叫：骨架图、占位加载、Skeleton Screen、内容占位符

一句话：数据加载完成前，先用灰色块画出页面内容的大致轮廓，加载完再替换成真实内容。

详细解释

骨架屏按真实内容的形状画灰色占位：头像位置画一个灰圆，标题位置画一根粗灰条，正文位置画几根长短不一的细灰条，通常带一道从左往右扫过的微光动画。数据回来后，灰块原地替换成真实内容，布局不会跳动，用户也能提前知道页面长什么样。

它适合页面、列表、卡片的 首次加载。和 加载中 的区别：转圈只说「在等」，骨架屏还提前给出结构；局部刷新、按钮提交这种小等待，用转圈更合适。和 进度条 的区别：进度条表示一件任务完成了多少，骨架屏不表达进度。骨架的形状要和真实内容一致，否则替换时照样会跳。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

文章列表首次加载时显示骨架屏：每条左侧是 48px 灰色圆形头像占位，右侧一根宽 40% 的标题灰条和两根长短不一的正文灰条，共显示 5 条，带从左到右的浅色微光动画；数据返回后原位替换，尺寸与真实内容一致。

由若干与真实内容同尺寸的浅灰色块组成，如圆形头像块、标题条、段落条和图片块，常带微光扫过的动画。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。