ui-ux-pro-max-plusProfessional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...
Install via ClawdBot CLI:
clawdbot install iReact2Code/ui-ux-pro-max-plus完整的 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 获取具体场景的交互模式。
| 场景 | 主色 | 辅助色 | 强调色 |
|-----|------|-------|-------|
| 科技产品 | 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记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。
Generated Feb 23, 2026
Designing a professional dashboard for a SaaS platform targeting enterprise users. Use minimalist or corporate UI styles from the library, with blue/cyan color palettes for a tech feel, and Inter font for clarity. Follow UX patterns for data-heavy interfaces to ensure usability and efficiency.
Creating a modern e-commerce mobile app for retail brands. Apply modern e-commerce UI styles with rose/violet color schemes to evoke emotion and drive sales. Use responsive design tips and spacing systems for optimal mobile experience, focusing on intuitive navigation and checkout flows.
Developing a patient portal for a healthcare provider. Select clean, trustworthy UI styles with teal/green color palettes to convey health and safety. Implement UX patterns for medical data visualization and accessibility, ensuring compliance and user-friendly interactions for all age groups.
Building an investment platform for FinTech startups. Use stable, professional UI styles like Material Design with indigo/gray color schemes for trust. Apply chart selection guides for financial data displays and follow UX best practices for secure, transparent user journeys in financial transactions.
Designing an interactive learning app for online education. Choose friendly UI styles with violet/yellow color palettes to engage students. Utilize typography pairings like Nunito for readability and incorporate UX patterns for gamification and progress tracking to enhance learning outcomes.
Offer this skill as part of a subscription service for design tools or AI platforms. Charge monthly or yearly fees for access to updated design resources and premium patterns, targeting startups and agencies needing consistent design support.
Provide basic design resources for free to attract users, then upsell premium consultations or custom design packages. Monetize through one-on-one sessions, tailored design systems, or integration services for larger enterprises.
License this skill to other AI platforms or design software companies as a white-label solution. Generate revenue through licensing fees or revenue-sharing agreements, enabling partners to enhance their offerings with professional UI/UX capabilities.
💬 Integration Tip
Integrate this skill by first selecting a UI style from the references, then applying color and typography choices consistently across projects to maintain design coherence and speed up development.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.