FEEDBACK & OVERLAY
骨架屏Skeleton Loading
内容加载前先用灰色几何块占好版面，一道高光来回扫——比转圈高级得多。
效果预览
适合用在哪
列表加载、详情页首屏、任何网络请求超过 300ms 的区域。
容易踩的坑
- 骨架块尺寸与真实内容不一致，数据到达时布局跳动，CLS 指标恶化。
- 请求不足 300ms 也显示骨架，屏幕一闪而过反而比直接渲染更显卡顿。
- 骨架区域未加 aria-busy="true"，读屏用户听到一堆空元素却不知在加载。
设计提示词 · Prompt
骨架屏（Skeleton Loading）：按真实内容的布局摆放灰色占位块——头像=圆、文字=圆角条（高度同字号）、图片=同宽高比矩形。占位块用渐变微光动画：background:linear-gradient(90deg,灰1 25%,灰2 42%,灰1 58%)、background-size:200% 100%、animation 让 background-position 循环（1.4-1.6s linear）。数据到达后骨架块交叉淡出、真实内容淡入（300ms 交错）。原则：骨架的形状必须和最终内容一致，否则加载完成时布局会跳。
Skeleton Loading: place gray placeholder blocks following the real content layout — avatars = circles, text = rounded bars (height equal to font size), images = rectangles with the same aspect ratio. Placeholder blocks use a gradient shimmer animation: background:linear-gradient(90deg, gray1 25%, gray2 42%, gray1 58%), background-size:200% 100%, with an animation cycling background-position (1.4-1.6s linear). When data arrives, skeleton blocks crossfade out and real content fades in (300ms staggered). Principle: the skeleton's shape must match the final content, otherwise the layout jumps when loading finishes.
常见搭配
同一页面里经常和「骨架屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-skel"> <div class="d-skel__row"><span class="d-skel__av"></span><span class="d-skel__ln" style="max-width:60%"></span></div> <div class="d-skel__img"></div> <span class="d-skel__ln" style="max-width:92%"></span> <span class="d-skel__ln" style="max-width:68%"></span> </div>