Design clear, consistent, and visually polished user interfaces using industry-standard principles.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui
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 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?
The UI skill is a comprehensive design guideline framework specifically created for AI agents to produce professional-grade user interfaces. It focuses on the fundamental pillars of visual communication, including strict visual hierarchy, precise typography, and standardized spacing systems. By integrating this skill within Openclaw Skills, developers can automate the application of best practices that ensure interfaces are not only aesthetically pleasing but also highly functional and accessible across different platforms.
UI Use Cases
- Establishing a consistent design system for web and mobile applications.
- Implementing accessible color palettes and typography scales that meet WCAG standards.
- Standardizing layout alignment using consistent 4px or 8px grid systems.
- Designing responsive interfaces that transition seamlessly from mobile touch targets to desktop hover states.
How UI Works
- The skill analyzes the interface requirements to establish a primary focal point using size, color, and weight.
- It applies a structured typography scale and spacing system to ensure readability and visual rhythm.
- Semantic color usage is implemented to provide consistent feedback for errors, success, and warnings.
- All component states (default, hover, focus, disabled) are defined to ensure a predictable user experience.
- Design tokens are utilized as a single source of truth for theming, enabling rapid scaling and dark mode support.
UI Setup
To activate the UI design guidelines within your agent environment, include the skill file in your configuration path.
# Add the UI skill to your local environment
mkdir -p .ai/skills
cp UI.md .ai/skills/
UI Data Schema & Taxonomy
The UI skill organizes design data into specific technical constraints:
| Category | Specification |
|---|---|
| Spacing Scale | 4px, 8px, 16px, 24px, 32px, 48px |
| Typography | 1.4-1.6 line height; 45-75 character line length |
| Touch Targets | Minimum 44px for mobile interaction |
| Contrast | Minimum 4.5:1 ratio for accessibility |
| Animation | 150-300ms duration for standard transitions |
UI Advanced Features
- Semantic Design Token support for multi-theme and dark mode scalability.
- Optical alignment logic to handle visual centering that differs from mathematical centering.
- Comprehensive motion and animation guidelines using ease-in/ease-out curves.
- Integrated accessibility auditing for color blindness and keyboard navigation focus states.
SKILL.md
Loading
Related Openclaw Skills
UGC Content Engine
A strategic framework for producing viral user-generated content that focuses on authentic hooks and high-conversion creator briefs.
Udio
An advanced automation skill for generating, extending, and managing AI-powered music tracks via the Udio platform.
Udemy Course Creation
A professional toolkit designed to help instructors research, draft, and manage high-quality Udemy courses with AI-assisted efficiency and strict policy compliance.
Tuya Smart
A comprehensive integration for controlling and automating Tuya Smart IoT devices through official cloud APIs with built-in safety protocols.
Ukrainian Natural Language Skill
A specialized skill designed to shift AI output from stiff, robotic Ukrainian to warm, authentic, and human-sounding communication.
Umami Analytics Skill
A professional workflow for deploying and optimizing Umami, the privacy-focused alternative to traditional web analytics.
Featured*
