Skeleton：Svelte 设计系统，别和老 CSS 框架混

Skeleton 是 Svelte / SvelteKit 生态里的设计系统与组件库，基于 Tailwind CSS。它的特色是主题用 CSS 变量实现，给一个品牌色就能自动生成整套配色，自适应主题切换很顺手。

它解决什么问题

Svelte 生态的 UI 选择比 React / Vue 少，很多团队找不到顺手的设计系统。

搜「Skeleton」很容易点进 getskeleton.com 那个同名老 CSS 框架，两个项目完全不是一回事。

核心能力

注意和同名老框架区分

Skeleton 这个名字被两个项目占用：一个是这里的 Svelte 设计系统（skeleton.dev），一个是在 getskeleton.com 上的极简 CSS 模板——后者是 2011 年前后风格的骨架屏 / 网格 CSS，二者技术栈与用途完全不同。

搜资料、装依赖时一定要对准 skeleton.dev 这个仓库。它是 Svelte + Tailwind 专宠，跨框架（React / Vue）不适用，别被同名项目误导后装错包。

同类工具怎么选

谁适合用

• 用 Svelte / SvelteKit 做项目、想要现成设计系统的人
• 希望主题靠品牌色自动生成、少写样式变量的团队
• 已经用 Tailwind，想顺手接一套 Svelte 组件的人

怎么开始

1. 在新 SvelteKit 项目里按官网指引安装 skeleton 及 Tailwind 依赖。
2. 在全局样式里引入 Skeleton 的主题变量与基础层。
3. 用品牌色配置 CSS 变量，整套配色自动生成。
4. 从文档挑卡片、表单等组件直接套用。
5. 需要设计稿时下载官方 Figma 资源对齐视觉。

常见问题

和 getskeleton.com 是一回事吗？
完全不是。这里是 Svelte 设计系统；getskeleton.com 是同名老款极简 CSS 模板，别装错。

React / Vue 能用吗？
不能。Skeleton 绑 Svelte + Tailwind，跨框架请选其他组件库。

主题怎么换成品牌色？
改 CSS 变量里的主色即可，组件会自动套用生成的整套配色。

授权与合规

Skeleton 采用 MIT 协议，可免费用于商业与闭源项目；衍生修改保留版权声明即可。注意不要与 getskeleton.com 上同名但无关的老款 CSS 框架混淆。 官网：www.skeleton.dev。