一键生成像素级精准骨架屏的开源神器：告别手写占位符，UI 加载体验直接拉满

你是否曾为给页面添加骨架屏（Skeleton Loading）而反复测量组件尺寸、调整颜色透明度、手动维护多套占位符？boneyard 正是为此而生——它不是另一个“画个灰色方块”的简易骨架库，而是一个能从你真实 UI 中自动提取结构、生成像素级对齐、风格完全一致的骨架屏框架。只需标注一次组件名，它就能在加载时智能渲染出与最终内容严丝合缝的占位效果，真正实现“所见即所得”的加载过渡体验。

核心功能

• 全自动骨架提取：无需手动定义宽高、圆角、阴影或文字行数，boneyard 通过分析真实组件的 DOM 结构与样式，自动生成结构一致、视觉统一的骨架元素
• 跨框架深度支持：原生适配 React、Vue、Svelte 5、Angular 和 React Native，各平台 API 风格贴近框架习惯，零学习成本接入
• 设计系统友好：骨架样式自动继承当前主题的字体、颜色、间距和圆角等 CSS 变量，与你的设计规范天然同步，避免视觉割裂
• 离线预构建能力：运行 npx boneyard-js build 即可将所有骨架模板静态编译为轻量 JS 模块，不依赖运行时解析，性能更稳定、打包更可控
• 命名即注册：通过 name="blog-card" 这类语义化名称自动关联预设骨架模板，开发者专注业务逻辑，骨架管理变得像调用组件一样简单
• 零配置开箱即用：安装后无需配置 Webpack 或 Vite 插件，TypeScript 类型完善，VS Code 中自动提示可用骨架名，开发体验丝滑

适合哪些人用

前端工程师（尤其是中大型项目维护者）、UI 工程师、全栈开发者，以及任何重视用户感知性能与加载体验的产品技术团队。如果你正在使用现代前端框架构建内容型应用（如资讯站、电商列表页、后台仪表盘或移动 App），且希望在数据请求期间提供专业、可信、无跳动的视觉反馈——boneyard 就是你一直在找的那把“省心又精准”的骨架屏瑞士军刀。

快速上手

以 React 为例，三步完成集成：

1. 安装：执行 npm install boneyard-js
2. 在项目入口或布局组件中引入骨架注册文件（首次需运行 npx boneyard-js build 生成 bones/registry.ts）
3. 在需要骨架的组件中包裹 <Skeleton name="your-component-name" loading={isLoading}>...</Skeleton>，名称需与预设模板一致

Vue/Svelte/Angular/React Native 的用法高度相似，仅需替换对应平台的导入路径与语法糖，官方文档提供了完整示例，5 分钟即可跑通首个骨架效果。

项目信息

编程语言：TypeScript｜GitHub Star 数：4317｜开源协议：MIT｜GitHub 项目地址

如果你厌倦了为骨架屏写一堆“看起来差不多”的灰色 div，boneyard 就是那个让你第一次觉得“骨架屏居然可以这么聪明又省心”的工具。