Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
UI/UX design guidance for building and refining interfaces across web and mobile platforms. Covers layout generation, UX flow mapping, design system tokens, component specs, microcopy, and accessibility. Can produce design artifacts, implementation plans, or both in one pass.
Covers design decisions and frontend implementation together, so you don't have to context-switch between a design tool and a coding assistant.
When to use it
- Generating a new landing page layout with spacing and color tokens
- Auditing an existing form for WCAG AA accessibility compliance
- Creating a component library spec with states and interaction rules
- Mapping a checkout user journey including error and empty states
- Refactoring Tailwind styles to match a brand visual direction
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Design a dashboard stats card component in React with Tailwind, accessible, dark mode support
- 1Confirms target platform (web), stack (React, Tailwind), and accessibility level (WCAG AA)
- 2Reads bundled design intelligence data for palette and UI heuristics
- 3Generates color, spacing, and typography tokens with dark mode variants
- 4Defines component states: default, loading skeleton, empty, and error
- 5Outputs file-level React component code with focus states and aria attributes
A React component with Tailwind classes, design tokens as CSS variables, and accessibility annotations covering contrast, keyboard nav, and screen reader labels