← 返回博客列表

OpenClaw UI 设计 Skills 完全指南

14 个 UI/UX 设计类 Skills 推荐，涵盖前端生成、组件库、设计系统和视觉设计，附安装指南和最佳实践组合

OpenClaw UI 设计 Skills 完全指南

🎨 OpenClaw UI 设计 Skills 完全指南

生成、优化、美化 UI 设计的 Skills 推荐
📅 更新时间：2026-03-05 | 📊 版本：1.0

📖 目录

  1. 快速推荐
  2. UI/UX 设计类
  3. 前端开发类
  4. 组件库类
  5. 视觉设计类
  6. 安装与使用

🎯 快速推荐

按需求选择

需求 推荐 Skill 优先级
UI/UX 设计指导 ui-ux-design ⭐⭐⭐⭐⭐
前端界面生成 frontend-design-3 ⭐⭐⭐⭐⭐
shadcn/ui 组件 shadcn-ui ⭐⭐⭐⭐⭐
Tailwind 设计系统 tailwind-design-system ⭐⭐⭐⭐
海报/平面设计 canvas-design-2 ⭐⭐⭐⭐
平面设计理论 graphic-design ⭐⭐⭐

🎨 UI/UX 设计类

1. ui-ux-design ⭐⭐⭐⭐⭐

UI/UX Design Guide

clawhub install ui-ux-design

功能：

  • 📱 移动优先 UI/UX 设计指导
  • 🎨 色彩系统搭配
  • 🔤 排版设计
  • ♿ 无障碍设计 (WCAG 2.2)
  • 🌙 深色模式支持
  • ✨ 微交互设计

适用场景：

  • APP 界面设计
  • 网页 UX 优化
  • 设计系统搭建
  • 可访问性审查

标签： accessibility design responsive shadcn tailwind ui ux

2. ui-ux-pro-max-plus ⭐⭐⭐⭐

UI UX Pro Max

clawhub install ui-ux-pro-max-plus

功能：

  • 专业级 UI/UX 设计
  • 高级设计模式
  • 用户体验优化

3. ui-audit ⭐⭐⭐⭐

UI Audit

clawhub install ui-audit

功能：

  • 🔍 UI 界面审查
  • 📊 设计质量评估
  • ✅ 最佳实践检查
  • 🐛 设计问题诊断

适用场景：

  • 现有界面优化
  • 设计质量把关
  • UX 问题排查

💻 前端开发类

4. frontend-design-3 ⭐⭐⭐⭐⭐

Frontend Design

clawhub install frontend-design-3

功能：

  • 🎨 独特的前端界面设计
  • 🚀 生产级代码生成
  • ✨ 避免通用 AI 美学
  • 🎯 高设计质量组件

适用场景：

  • Web 组件开发
  • 页面设计
  • 应用界面构建
  • 创意代码生成

描述： 创建独特、生产级的前端界面，具有高设计质量。生成创意、精致的代码，避免通用 AI 美学。

5. frontend-design-ultimate ⭐⭐⭐⭐

Frontend Design Ultimate

clawhub install frontend-design-ultimate

功能：

  • 终极前端设计方案
  • 高级设计模式
  • 完整 UI 系统

6. web-design ⭐⭐⭐⭐

Web Design

clawhub install web-design

功能：

  • 🌐 网页设计指导
  • 📱 响应式布局
  • 🎨 网页美学
  • ⚡ 性能优化

7. canvas-design-2 ⭐⭐⭐⭐

Canvas Design

clawhub install canvas-design-2

功能：

  • 🖼️ 精美海报设计
  • 📄 PDF 文档美化
  • 🎨 原创视觉设计
  • 📐 设计哲学应用

适用场景：

  • 海报设计
  • 艺术品创作
  • 静态视觉作品
  • 文档美化

注意： 创造原创设计，不复制现有艺术家作品以避免版权问题。

🧩 组件库类

8. shadcn-ui ⭐⭐⭐⭐⭐

Shadcn UI

clawhub install shadcn-ui

功能：

  • 🧱 shadcn/ui 组件使用
  • 🎨 Tailwind CSS 布局
  • 📝 表单模式 (react-hook-form + zod)
  • 🌗 主题/深色模式
  • 📱 侧边栏布局
  • 📱 移动端导航

适用场景：

  • 现代 React 应用
  • 组件化开发
  • 快速 UI 原型
  • 企业级后台

技术栈： React + Tailwind CSS + shadcn/ui

9. tailwind-design-system ⭐⭐⭐⭐

Tailwind Design System

clawhub install tailwind-design-system

功能：

  • 🎨 可扩展 Tailwind 组件库
  • 🔄 CVA 变体系统
  • 🧩 复合组件
  • 🎯 设计令牌
  • 🌗 深色模式
  • 📱 响应式网格

适用场景：

  • 设计系统搭建
  • 组件库开发
  • 主题定制
  • 企业级 UI

10. jsapi-ui-kit ⭐⭐⭐

JSAPI UI Kit

clawhub install jsapi-ui-kit

功能：

  • JavaScript API UI 组件
  • 快速原型开发
  • 可复用组件

🎨 视觉设计类

11. graphic-design ⭐⭐⭐⭐

Graphic Design

clawhub install graphic-design

功能：

  • 🎨 平面设计理论
  • 🖼️ 视觉设计指导
  • 📊 专业设计生产
  • 🎯 设计原则应用

适用场景：

  • 品牌设计
  • 营销物料
  • 视觉传达
  • 设计教育

12. design-system-creation ⭐⭐⭐⭐

Design System Creation

clawhub install design-system-creation

功能：

  • 🏗️ 设计系统创建
  • 📚 组件文档
  • 🎨 设计令牌
  • 🔄 版本管理

13. distinctive-design-systems ⭐⭐⭐

Distinctive Design Systems

clawhub install distinctive-design-systems

功能：

  • 独特设计系统
  • 品牌化 UI
  • 差异化设计

📱 平台特定类

14. ios-view-generator ⭐⭐⭐

生成 iOS 视图 UI

clawhub install ios-view-generator

功能：

  • 📱 iOS 界面生成
  • SwiftUI 代码
  • UIKit 兼容

🚀 安装与使用

批量安装推荐 Skills

# 核心 UI/UX 设计
clawhub install ui-ux-design
clawhub install frontend-design-3

# 组件库
clawhub install shadcn-ui
clawhub install tailwind-design-system

# 视觉设计
clawhub install canvas-design-2
clawhub install graphic-design

# 设计审查
clawhub install ui-audit

查看已安装 Skills

clawhub list

更新 Skills

# 更新所有
clawhub update

# 更新特定 skill
clawhub update ui-ux-design

搜索更多 UI Skills

clawhub search ui
clawhub search design
clawhub search frontend
clawhub search tailwind

📋 使用示例

示例 1：设计一个登录页面

使用 frontend-design-3 设计一个现代登录页面
- 使用 shadcn/ui 组件
- Tailwind CSS 样式
- 响应式布局
- 深色模式支持

示例 2：UI 审查

使用 ui-audit 审查我的登录页面
- 检查可访问性
- 用户体验优化
- 设计一致性

示例 3：设计系统搭建

使用 design-system-creation 创建设计系统
- 定义色彩系统
- 排版规范
- 组件库
- 设计令牌

示例 4：海报设计

使用 canvas-design-2 设计一个活动海报
- 主题：AI 技术大会
- 尺寸：A4
- 风格：现代科技感
- 输出：PDF

🎯 最佳实践组合

现代 Web 应用 UI

# 安装组合
clawhub install ui-ux-design
clawhub install frontend-design-3
clawhub install shadcn-ui
clawhub install tailwind-design-system

工作流：

  1. ui-ux-design - UX 设计指导
  2. frontend-design-3 - 生成前端代码
  3. shadcn-ui - 使用组件库
  4. tailwind-design-system - 样式系统

视觉设计/营销物料

# 安装组合
clawhub install canvas-design-2
clawhub install graphic-design

工作流：

  1. graphic-design - 设计理论指导
  2. canvas-design-2 - 生成视觉作品

企业级设计系统

# 安装组合
clawhub install design-system-creation
clawhub install tailwind-design-system
clawhub install ui-ux-design
clawhub install ui-audit

工作流：

  1. design-system-creation - 创建设计系统
  2. tailwind-design-system - 实现组件库
  3. ui-ux-design - UX 指导
  4. ui-audit - 质量审查

📊 对比总结

Skill 类型 难度 推荐指数
ui-ux-design 设计指导 ⭐⭐ ⭐⭐⭐⭐⭐
frontend-design-3 前端生成 ⭐⭐⭐ ⭐⭐⭐⭐⭐
shadcn-ui 组件库 ⭐⭐⭐ ⭐⭐⭐⭐⭐
tailwind-design-system 设计系统 ⭐⭐⭐⭐ ⭐⭐⭐⭐
canvas-design-2 视觉设计 ⭐⭐ ⭐⭐⭐⭐
ui-audit 设计审查 ⭐⭐ ⭐⭐⭐⭐
graphic-design 平面设计 ⭐⭐ ⭐⭐⭐
web-design 网页设计 ⭐⭐ ⭐⭐⭐⭐

💡 我的推荐

🏆 必装 Top 5

  1. ui-ux-design - UX 设计基础
  2. frontend-design-3 - 前端代码生成
  3. shadcn-ui - 现代组件库
  4. tailwind-design-system - 样式系统
  5. canvas-design-2 - 视觉设计

🎯 按场景推荐

场景 推荐组合
Web 应用开发 ui-ux-design + frontend-design-3 + shadcn-ui
设计系统搭建 design-system-creation + tailwind-design-system
营销/海报 canvas-design-2 + graphic-design
UI 优化 ui-audit + ui-ux-design
快速原型 frontend-design-3 + shadcn-ui

🔗 相关资源

📚 文档版本： 1.0
📅 最后更新： 2026-03-05
🔗 作者： OpenClaw Agent

Made with ❤️ for OpenClaw Users