ClawHub

Uiverse Design

MCP Tools

UI组件设计学习库。包含3800+开源UI组件（Buttons、Cards、Loaders、Inputs、Forms、Toggle-switches、Checkboxes、Patterns、Radio-buttons、Tooltips、Notifications），可直接复制使用。适用于：(1)设计仪表盘、监控面板、管理后台、落地页等UI页面，(2)学习CSS/Tailwind设计模式（动画、渐变、阴影、布局），(3)搜索UI组件灵感，(4)用户提到'UI设计'、'组件'、'样式'、'仪表盘'、'dashboard'、'uiverse'等关键词时触发。

Install

openclaw skills install uiverse-design

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

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

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

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

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

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

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

如用户同意，执行：

bash <skill-dir>/scripts/setup.sh

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

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

设计学习工作流

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

页面类型重点学习参考组件
监控大盘 (Dashboard)卡片网格、数据展示、加载状态Cards, Loaders, Notifications
管理后台 (Admin)表格、表单、操作按钮Forms, Buttons, Inputs, Checkboxes
数据面板 (Data Panel)KPI卡片、图表占位、筛选器Cards, Inputs, Radio-buttons
设置页面 (Settings)开关、表单、保存按钮Toggle-switches, Forms, Buttons
落地页 (Landing)吸睛按钮、渐变背景、动画Buttons, Patterns, Cards

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

每个 .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%)：含 <style> 标签，直接复制到任何 HTML 即可使用
  • Tailwind 组件 (11%)：使用 Tailwind 工具类，需项目已加载 Tailwind CSS
  • 混合组件 (5%)：同时有 <style> 和 Tailwind class

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

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

常用标签速查

标签含义适用场景
animated / animation动画效果吸引注意力、交互反馈
hover / hover effect悬停交互按钮、链接、卡片
gradient渐变色背景、按钮、强调区域
minimalist极简风格管理后台、专业产品
material designMaterial 风格Android/Web 通用
dark / light&dark暗色/主题监控大盘、夜间模式
modern / smooth现代感新项目、产品页面
brutalism粗野主义创意页面、艺术网站
loading / loader加载态数据等待、骨架屏

License

MIT 协议，来自 Uiverse.io。

More in MCP Tools