A comprehensive design skill combining Apple Human Interface Guidelines and modern web patterns for creating exceptional, universal user experiences.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-ux-master
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-master 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 Master?
The UI/UX Master skill is an advanced design framework tailored for developers who need to bridge the gap between technical implementation and high-end visual design. By utilizing this within the ecosystem of Openclaw Skills, developers can ensure their applications follow professional standards such as the Apple Human Interface Guidelines (HIG) and modern responsive web principles. It focuses on four core pillars: clarity, consistency, beauty through simplicity, and non-negotiable accessibility.
This skill provides a unified methodology for handling color theory using modern oklch() spaces, typography scales, and the industry-standard 8-point grid system. Whether you are building for visionOS, macOS, or a high-performance web dashboard, this Openclaw Skills addition provides the structural logic needed to create interfaces that are both functional and visually stunning.
UI/UX Master Use Cases
- Creating native Apple platform interfaces for iOS, macOS, watchOS, and visionOS that feel like system-native apps.
- Developing responsive web applications that adapt seamlessly from mobile-first views to ultra-wide desktop monitors.
- Establishing robust design systems with semantic color tokens and standardized spacing for large-scale projects.
- Auditing and implementing WCAG-compliant accessibility features to ensure software works for everyone.
- Designing high-performance micro-interactions and animations that respect user motion preferences.
How UI/UX Master Works
- Define the target platform (Apple Native or Modern Web) to load the relevant architectural constraints and design patterns.
- Apply the semantic color system using oklch() values to ensure perfect contrast and native-feeling dark mode support.
- Implement the layout using an 8-point grid system for consistent spacing and component alignment.
- Select typography from the recommended system font stacks to ensure maximum readability and performance.
- Build out interface components like buttons, forms, and cards based on the provided hierarchy and state logic.
- Integrate motion and animation using standardized durations and easing functions for immediate user feedback.
UI/UX Master Setup
To activate this skill within your coding agent environment, ensure the configuration points to the UI/UX Master definitions. Integration is straightforward via the Openclaw Skills manager:
# Install the design skill
openclaw install ui-ux-master
# Link to your project architecture
openclaw link ui-ux-master --platform web
Once installed, you can reference the core design principles and component anatomy in your development workflow.
UI/UX Master Data Schema & Taxonomy
The skill organizes design data through a structured taxonomy of tokens and patterns:
| Data Type | Specification | Usage |
|---|---|---|
| Color Tokens | oklch() semantic variables | Light/Dark mode compatibility |
| Type Scale | 12px to 72px (rem-based) | Visual hierarchy and readability |
| Grid Units | 8px base (4px subdivisions) | Layout spacing and component padding |
| Breakpoints | 640px, 1024px, 1440px | Responsive layout transitions |
| Motion | 100ms - 600ms durations | Interaction feedback and transitions |
UI/UX Master Advanced Features
- Multi-platform support covering all Apple OS variants and modern web standards simultaneously.
- Comprehensive WCAG AA/AAA compliance checklist integration for automated accessibility verification.
- Native support for advanced CSS techniques like glassmorphism and neo-brutalism within Openclaw Skills.
- Built-in responsive patterns for complex navigation transitions, such as stack-to-sidebar layouts.
- Detailed documentation for micro-interaction triggers including spring physics and responsive easing.
SKILL.md
Loading
Related Openclaw Skills
Cluster Agent Swarm
A comprehensive multi-agent swarm designed to automate and coordinate Kubernetes and OpenShift platform operations across seven specialized domains.
Web Autopilot
A sophisticated RPA engine that transforms manual browser recordings into intelligent, reusable TypeScript automation tools.
Keychat
A sovereign, end-to-end encrypted messaging plugin for agents using Signal Protocol over Nostr relays.
OSS Contributor
An autonomous agent skill that discovers and resolves open-source GitHub issues to build your developer profile.
Agent Browser
A high-performance Rust-based headless browser CLI designed for AI agents to interact with web pages via structured commands.
API Gateway
A secure passthrough proxy that simplifies connecting AI agents to over 100 native third-party APIs using managed OAuth token injection.
Featured*
