A comprehensive design intelligence engine providing searchable databases of styles, palettes, and UX rules for professional web and mobile development.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-ux-pro-max-3
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install ui-ux-pro-max-3 using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is UI/UX Pro Max?
UI/UX Pro Max is an advanced design intelligence skill designed to bridge the gap between functional code and professional-grade interfaces. It equips AI coding agents with a massive library of 50+ visual styles—including glassmorphism, minimalism, and bento grids—alongside 161 color palettes and 99 specialized UX guidelines. By integrating this skill, developers can ensure their AI-generated projects adhere to high-level design standards like Apple's HIG and Material Design.
This tool is specifically optimized for Openclaw Skills environments, offering a searchable database that spans 10 technology stacks such as React, Next.js, and SwiftUI. It doesn't just suggest aesthetics; it provides technical reasoning and anti-patterns to avoid, ensuring that accessibility, performance, and interaction states are baked into the development process from the very first line of code.
UI/UX Pro Max Use Cases
- Designing high-conversion landing pages, SaaS dashboards, and mobile applications from scratch.
- Refactoring existing UI components to improve professional polish and visual consistency.
- Conducting automated UX and accessibility audits to ensure compliance with WCAG and platform-specific standards.
- Implementing complex design systems with hierarchical overrides for multi-page projects.
- Choosing optimized typography pairings and color systems based on specific industry product types.
How UI/UX Pro Max Works
- Requirement Analysis: The skill extracts product type, target audience, and tech stack (e.g., React Native) from the user's initial request.
- Design System Generation: It invokes a specialized search script with the
--design-systemflag to generate a foundational style guide including colors, typography, and reasoning. - Hierarchical Persistence: Using the
--persistflag, the skill creates aMASTER.mdfile and page-specific overrides to maintain design consistency across multiple sessions. - Domain-Specific Deep Dives: Developers can query specific domains like
ux,chart, orgoogle-fontsto retrieve granular implementation details. - Stack-Specific Optimization: The skill provides tailored code implementation rules for the chosen stack to ensure performance and native-feel behavior.
UI/UX Pro Max Setup
To get started with this skill, ensure Python is installed on your system. Follow the steps below:
1. Check Python Installation:
python3 --version || python --version
2. Install for your OS (if necessary):
- macOS:
brew install python3 - Ubuntu/Debian:
sudo apt update && sudo apt install python3 - Windows:
winget install Python.Python.3.12
3. Initialize a Design System:
python3 skills/ui-ux-pro-max/scripts/search.py "your product keywords" --design-system --persist -p "Project Name"
UI/UX Pro Max Data Schema & Taxonomy
The skill organizes design intelligence through a hierarchical file structure and a prioritized rule taxonomy:
| Level | File/Component | Purpose |
|---|---|---|
| Global | design-system/MASTER.md |
The primary source of truth for all global styles and tokens. |
| Page | design-system/pages/*.md |
Page-specific overrides that take precedence over the Master file. |
| Logic | ui-reasoning.csv |
Contains the heuristic rules used to match product types to styles. |
Rule Priorities:
- Accessibility (Critical)
- Touch & Interaction (Critical)
- Performance (High)
- Style Selection (High)
- Layout & Responsive (High)
UI/UX Pro Max Advanced Features
- Hierarchical Retrieval: Automatically prioritizes page-level CSS or logic overrides before falling back to global design system rules.
- Multi-Domain Parallel Search: Simultaneously queries product patterns, color palettes, and typography for faster design synthesis.
- Design-to-Code Context Awareness: Generates prompts specifically formatted to help AI agents understand when to override master rules during page construction.
- Stack-Specific Guardrails: Includes specialized performance tips for React Native, such as virtualization for long lists and main-thread budget management.
SKILL.md
Loading
Related Openclaw Skills
Cisco Meraki
A powerful integration for managing Cisco Meraki cloud IT solutions, including networks, devices, and organization settings through automated workflows.
Khan Tutor
A sophisticated pedagogical engine that transforms AI into a Socratic tutor using Khan Academy's curriculum scaffolding and teaching principles.
JS Design Hot Trend
A specialized automation tool for extracting structured data, component annotations, and asset summaries from public JS Design project links.
Auto-Test
Auto-Test is an intelligent utility that analyzes code logic to automatically generate comprehensive unit tests and coverage reports across multiple programming languages.
Channel Distribution Strategy
A comprehensive operational framework for managing multi-channel distribution through standardized SOPs and data-driven optimization.
Video Frames (ffmpeg)
A high-performance utility for extracting specific frames or thumbnails from video files using ffmpeg integration.
Featured*
