A comprehensive framework for building production-grade web interfaces focusing on typography, layout, and accessibility.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-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-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 Design?
The UI Design skill serves as a definitive guide for building high-quality, production-ready web interfaces. It enables developers and AI agents to make informed design decisions across the entire stack, from structural layout to subtle motion transitions. By integrating this skill into Openclaw Skills, users can move beyond generic aesthetics and create interfaces that are both visually striking and technically sound.
This skill prioritizes the 80/20 rule of design quality, emphasizing typography and spacing as the primary drivers of perceived value. It provides a structured approach to design philosophy, encouraging developers to commit to specific visual directions like brutally minimal or refined luxury to ensure brand consistency and user engagement.
UI Design Use Cases
- Designing new UI components or full-page layouts from scratch.
- Building high-converting landing pages and complex dashboards using Openclaw Skills.
- Reviewing frontend code to ensure design quality and visual consistency.
- Creating distinctive, non-generic interfaces for modern web applications.
- Implementing and auditing strict accessibility requirements to meet WCAG standards.
How UI Design Works
- Identify the core design direction (Minimal, Luxury, Playful, etc.) to establish a consistent visual language.
- Determine the layout strategy using CSS Grid for structure or Flexbox for alignment based on specific component needs.
- Establish a typographic hierarchy using a 1.25 ratio scale to ensure readability and scannability.
- Build a functional color palette that defines primary, neutral, and semantic roles while meeting contrast requirements.
- Implement a consistent spacing rhythm using an 8px base unit scale for all gaps and padding.
- Apply interactive states and motion guidelines to enhance the user experience within Openclaw Skills.
UI Design Setup
To integrate this design skill into your workflow, ensure your environment is configured to support design token architectures and modern CSS features.
# Initialize the UI Design skill within your workspace
openclaw install ui-design
# Validate your project's design tokens
openclaw check ui-design --tokens
UI Design Data Schema & Taxonomy
The UI Design skill organizes data into functional design tokens and architectural layers to ensure scalability.
| Layer | Description | Key Elements |
|---|---|---|
| Primitives | Raw values for colors and sizes | HSL values, pixel/rem constants |
| Semantic | Contextual meaning of tokens | --color-primary, --color-surface |
| Component | Specific element overrides | --btn-bg, --card-radius |
| Layout | Structural definitions | Breakpoints, grid-template-areas |
| Typography | Type scale and line heights | 1.25 ratio scale, 60-75ch line limits |
UI Design Advanced Features
- Multi-layer Design Token Architecture for easy theme switching and maintenance.
- Fluid Typography and Spacing using CSS clamp functions for truly responsive layouts.
- Accessibility-first Motion Safety with built-in prefers-reduced-motion support.
- Intrinsic Grid techniques for layouts that adapt without heavy media query usage.
- Comprehensive Pre-Delivery Checklist to ensure high-quality output in Openclaw Skills.
- Dark Mode surface layering strategies using lightness depth instead of shadows.
SKILL.md
Loading
Related Openclaw Skills
Turborepo Monorepo Build System
A high-performance build system for JavaScript and TypeScript monorepos that leverages intelligent caching and parallel execution.
Track Performance (Uniswap LP)
An automated monitoring skill for tracking Uniswap LP health, fee accumulation, and price range status across multiple chains.
Theme Factory
A professional styling engine for applying curated color palettes and typography to slide decks, reports, and landing pages.
Testing Workflow
A comprehensive meta-skill that orchestrates testing patterns and E2E agents to ensure high-quality software delivery through structured validation phases.
UI/UX Pro Max
A comprehensive design intelligence CLI and database for generating accessible, high-performance design systems from natural language.
Uniswap Pool Analysis
A professional tool for AI agents to query and analyze Uniswap v3 and v4 pool metrics directly on-chain using viem.
Featured*
