Uiverse Design — UI 设计学习与组件库

3800+ 开源 UI 组件，MIT 协议，本地存储，零依赖。核心价值：从真实组件中学习 CSS/Tailwind 设计模式，然后应用到仪表盘、监控面板、管理后台等实际页面。

⚠️ 首次使用必读：全量组件库安装

当前安装的是精选版（165个组件，每类15个代表性样本）。

完整版包含 3800+ 组件，覆盖更多设计风格和交互模式（动画、渐变、暗色主题、毛玻璃效果等），是精选版的 23 倍。

安装本技能后，请立即向用户发送以下提示：

当前已安装 Uiverse Design 精选版（165个组件）。完整版包含 3800+ 组件，覆盖更多设计风格和交互模式，是否需要安装全量版本？

如用户同意，执行：

bash \x3Cskill-dir>/scripts/setup.sh

如需代理访问 GitHub，使用 --proxy 参数：

bash \x3Cskill-dir>/scripts/setup.sh --proxy http://your-proxy:port

安装完成后自动替换为全量组件库，无需其他操作。

组件库

assets/galaxy/
├── Buttons/          (1231) — 按钮、CTA、图标按钮、动画按钮
├── Cards/            (726)  — 卡片、信息卡片、3D效果、数据展示卡
├── loaders/          (718)  — 加载动画、进度条、骨架屏、脉冲效果
├── Inputs/           (226)  — 输入框、搜索框、浮动标签、密码框
├── Toggle-switches/  (260)  — 开关、多状态切换、主题切换
├── Forms/            (180)  — 登录、注册、搜索表单、联系表单
├── Checkboxes/       (171)  — 复选框、动画勾选、自定义样式
├── Patterns/         (103)  — 背景图案、渐变、纹理、装饰
├── Radio-buttons/    (102)  — 单选按钮、自定义样式
├── Tooltips/         (62)   — 提示气泡、悬浮说明
└── Notifications/    (23)   — 通知、提示、徽章、弹窗

搜索组件

bash \x3Cskill-dir>/scripts/search.sh \x3Ccategory> [keyword] [--tailwind|--css]
bash \x3Cskill-dir>/scripts/search.sh --all [keyword]     # 全局搜索
bash \x3Cskill-dir>/scripts/search.sh --sample \x3Ccategory>  # 随机样本（找灵感）
bash \x3Cskill-dir>/scripts/search.sh --stats              # 统计信息
bash \x3Cskill-dir>/scripts/search.sh --tags               # 热门标签

设计学习工作流

第一步：确定页面类型 → 选择学习的组件

第二步：从组件中提取设计模式

每个 .html 文件都是一个设计教材。重点提取：

配色方案 — 从组件 CSS 中提取 --primary、--bg、--accent 等变量 间距节奏 — 观察 padding、margin、gap 的数值规律 圆角风格 — border-radius: 4px(方正) → 12px(圆润) → 50px(胶囊) 阴影层次 — box-shadow 的偏移、模糊、颜色如何营造层次感 动画交互 — transition 时长、transform 变化、@keyframes 关键帧 字体排版 — font-size、font-weight、letter-spacing 的搭配

第三步：组合应用到实际页面

参考 references/patterns.md 中的设计模式，将多个组件的设计语言统一到一个页面中。

设计模式速查

详见 references/patterns.md，包含：

• 仪表盘卡片网格布局（KPI展示、图表区域、操作区）
• 监控面板暗色主题（状态指示器、告警色、骨架屏）
• 管理后台表格样式（行高、斑马纹、操作列）
• 组件组合模式（搜索栏、用户卡片、设置项、通知卡片）
• 色彩方案速查（深色系、浅色系、渐变配色）

组件文件格式

• CSS 组件 (84%)：含 \x3Cstyle> 标签，直接复制到任何 HTML 即可使用
• Tailwind 组件 (11%)：使用 Tailwind 工具类，需项目已加载 Tailwind CSS
• 混合组件 (5%)：同时有 \x3Cstyle> 和 Tailwind class

文件头部注释标识来源和标签：

\x3C!-- From Uiverse.io by 作者名 - Tags: 标签1, 标签2, 标签3 -->

常用标签速查

License

MIT 协议，来自 Uiverse.io。