A comprehensive toolkit for applying modern design principles, accessibility standards, and component-driven workflows to digital products.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-ux-design
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-design 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 Design?
The UI/UX Design skill provides an integrated framework for developers to create aesthetically pleasing and highly functional user interfaces. It combines 2026 design trends with practical implementation strategies using Tailwind CSS and Shadcn/ui. This tool ensures that every project follows a mobile-first approach, adheres to WCAG 2.2 accessibility standards, and utilizes a consistent 8px-based spacing system to build trust through visual consistency.
By leveraging Openclaw Skills, developers can bridge the gap between raw code and professional design. It offers immediate access to typography scales, color palettes, and micro-interaction patterns that elevate the user experience. Whether you are building a SaaS dashboard or a mobile app, this skill guides you through the critical decisions of layout, hierarchy, and interaction design before a single line of CSS is finalized.
UI/UX Design Use Cases
- Designing responsive web and mobile interfaces from scratch.
- Establishing a cohesive color system and typography scale for a brand.
- Implementing Shadcn/ui and Tailwind CSS in Next.js projects.
- Auditing applications for WCAG 2.2 accessibility compliance.
- Creating subtle micro-interactions and GPU-accelerated animations.
How UI/UX Design Works
- Select the design foundation by defining a primary color scale and an 8px-based typography system.
- Plan the layout using a mobile-first strategy, starting at 320px and expanding through standard breakpoints.
- Integrate the component library, such as Shadcn/ui, to ensure consistent UI patterns across the application.
- Apply visual hierarchy principles including contrast, whitespace, and proximity to guide user attention.
- Verify the design against the pre-build checklist to ensure accessibility and responsive readiness.
UI/UX Design Setup
To get started with this skill in a Next.js environment:
npx create-next-app@latest my-design-project --typescript --tailwind --app
cd my-design-project
npx shadcn@latest init
Then, add required components as needed using the Openclaw Skills recommended workflow:
npx shadcn@latest add button card dialog calendar
UI/UX Design Data Schema & Taxonomy
The skill organizes design assets and documentation according to a structured taxonomy:
| Category | Description |
|---|---|
| Design Tokens | Color scales (50-900), spacing (8px grid), and typography (12px-48px). |
| Components | Local components/ui/ directory containing Shadcn source code. |
| Standards | WCAG 2.2 compliance rules and ARIA labeling requirements. |
| Breakpoints | Responsive widths defined for phone, tablet, laptop, and desktop. |
UI/UX Design Advanced Features
- Automated accessibility contrast checking for text and UI elements.
- Support for multi-agent design reviews using established UI laws.
- Dynamic dark mode implementation with Tailwind CSS utility classes.
- Optimized micro-interaction hooks for tactile hover and click feedback.
- Deep integration with modern dev stacks through Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Japanese Translation and Tutor
A comprehensive Japanese-English translator and language tutor that provides structured translations with kanji readings and cultural context.
Weekly Synthesis
A comprehensive analysis tool that synthesizes a week's worth of work, notes, and insights into an actionable report.
Thinking Partner
A collaborative AI assistant designed to facilitate deep exploration and problem-solving through intentional questioning rather than immediate solutioning.
Plan My Day
An intelligent planning assistant that generates energy-optimized, time-blocked daily schedules based on your top priorities and natural energy levels.
Backtest Expert
A professional framework for the rigorous validation and stress-testing of systematic trading strategies to ensure real-world robustness.
Elite Longterm Memory
A robust multi-layer memory architecture for AI agents that ensures persistent context across sessions using vector search, git-notes, and a Write-Ahead Log protocol.
Featured*
