Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...
数据来源:ClawHub。 在 ClawSkills 查看
选择你使用的 Agent
方法一:命令行安装(推荐)
推荐(无需提前安装 clawhub)
npx clawhub@latest --dir ~/.claude/skills install ui-ux-pro-max-plus或使用 clawhub CLI(需提前安装)
clawhub --dir ~/.claude/skills install ui-ux-pro-max-plus⚠️ 需要 Node.js 18+,没有 Node?请使用下方方法二直接下载 ZIP。 安装 Node.js →
方法二:手动下载安装(无需 Node)
下载 ZIP,解压后将文件夹放到以下路径,重启 Agent 即可:
安装路径
~/.claude/skills/ui-ux-pro-max-plus/💡解压后将文件夹放到上方路径,重启 Agent 即可生效
--- name: ui-ux-pro-max description: Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating beautiful, professional-grade user interfaces, selecting color schemes, choosing typography, designing data visualizations, or following modern UX best practices. Includes 50+ UI styles, 100+ color palettes, curated font pairings, chart selection guide, and comprehensive UX patterns. ---
完整的 UI/UX 设计资源库,让 AI 生成的界面像专业设计师作品一样精美。
| 资源类型 | 文件 | 内容 | |---------|------|------| | 🎨 UI 风格库 | references/ui-styles.md | 50+ 种界面设计风格 | | 🌈 配色方案 | references/color-palettes.md | 100+ 专业调色板 | | 🔤 字体配对 | references/typography.md | 精选字体组合 | | 📊 图表类型 | references/charts.md | 数据可视化指南 | | 📘 UX 模式 | references/ux-patterns.md | 用户体验最佳实践 | | 🎯 组件库 | references/components.md | 常用组件设计规范 |
先读取 references/ui-styles.md,选择适合项目的设计风格:
读取 references/color-palettes.md,根据品牌调性选择:
读取 references/typography.md:
读取 references/ux-patterns.md 获取具体场景的交互模式。
- 企业用户 → 简洁、专业、高效 - 年轻消费者 → 活泼、大胆、有趣 - 高端客户 → 精致、留白、质感
- 工具类 → 功能优先,清晰直观 - 内容类 → 阅读体验,排版优雅 - 社交类 → 情感连接,互动感强
- 创新先锋 → 尝试新风格(Glassmorphism) - 稳定可靠 → 经典风格(Material Design) - 独特个性 → 大胆风格(Brutalist)
| 场景 | 主色 | 辅助色 | 强调色 | |-----|------|-------|-------| | 科技产品 | Blue-600 | Slate-500 | Cyan-400 | | 健康医疗 | Teal-600 | Gray-500 | Emerald-400 | | 金融科技 | Indigo-700 | Gray-600 | Amber-500 | | 电商零售 | Rose-600 | Gray-500 | Violet-500 | | 教育培训 | Violet-600 | Slate-500 | Yellow-400 | | 娱乐社交 | Fuchsia-600 | Gray-500 | Pink-500 |
/* 配色示例 */
.bg-brand { @apply bg-blue-600; }
.text-muted { @apply text-gray-500; }
.border-accent { @apply border-cyan-400; }
/* 字体示例 */
.font-heading { @apply font-display text-3xl font-bold; }
.font-body { @apply font-sans text-base leading-relaxed; }
Mobile First:
- 默认: 320px+
- sm: 640px+
- md: 768px+
- lg: 1024px+
- xl: 1280px+
/* 8px 基础倍数 */
space-1: 4px
space-2: 8px
space-3: 12px
space-4: 16px
space-6: 24px
space-8: 32px
space-12: 48px
space-16: 64px
---
记住: 好的设计不是堆砌特效,而是解决问题。先确保可用性,再追求美观。
安装 UI UX Pro Max 后,可以对 AI 说这些话来触发它
Help me get started with UI UX Pro Max
Explains what UI UX Pro Max does, walks through the setup, and runs a quick demo based on your current project
Use UI UX Pro Max to professional UI/UX design resource library with searchable design p...
Invokes UI UX Pro Max with the right parameters and returns the result directly in the conversation
What can I do with UI UX Pro Max in my data & analytics workflow?
Lists the top use cases for UI UX Pro Max, with example commands for each scenario
将技能文件夹放到 ~/.claude/skills/ui-ux-pro-max-plus/ 目录(个人级,所有项目可用),或 .claude/skills/ui-ux-pro-max-plus/(项目级)。重启 AI 客户端后,用 /ui-ux-pro-max-plus 主动调用,或让 AI 根据上下文自动发现并使用。
UI UX Pro Max 支持 Claude、Cursor、OpenClaw,可与这些 AI 平台无缝集成,扩展其能力。
UI UX Pro Max 可免费安装使用。请查阅仓库了解许可证信息。
Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...
UI UX Pro Max 属于「Data & Analytics」分类,该分类的技能帮助 AI 智能体在此领域执行专业任务。
Automate my data & analytics tasks using UI UX Pro Max
Identifies repetitive steps in your workflow and sets up UI UX Pro Max to handle them automatically