boneyard 是一个自动生成 skeleton loading 的开源框架，目标是解决手写骨架屏最麻烦的问题：手动量尺寸、调位置、改布局后还要同步更新占位效果。
它会从你的真实 UI 中提取布局，生成像素级匹配的 skeleton。Web 端通过 CLI 或 Vite plugin 打开 headless browser，访问应用并找到每个 Skeleton 组件，再在多个断点下捕获布局数据。
boneyard 支持 React、Preact、Vue、Svelte 5、Angular 和 React Native。所有框架输出统一的 .bones.json 格式，运行时通过 name 匹配真实组件和骨架屏，支持亮色/暗色、shimmer、速度、角度等配置。
这类工具特别适合组件密集、响应式布局复杂、频繁迭代的产品。它把 skeleton 从“设计一个相似占位”变成“从真实 UI 反向提取”，减少手工维护成本，也降低加载状态和实际内容错位的概率。
传送门
https://github.com/0xGF/boneyard
原创文章，如若转载，请注明出处：https://wefound.cc/p/2084.html
