An expert UI design skill for creating scalable design systems, accessible components, and pixel-perfect interface implementations.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-designer-tm
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-designer-tm 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 Designer?
The UI Designer skill is a specialized module for Openclaw Skills designed to facilitate the creation of high-quality, consistent, and accessible user interfaces. It empowers developers and designers to move beyond simple layout generation by establishing robust design token systems that govern color, typography, and spacing from the ground up. By utilizing this skill, users can ensure their projects maintain visual harmony and technical excellence across all components.
This skill prioritizes a systematic approach to UI development. It focuses on building foundational elements first, ensuring that accessibility compliance and responsive design are baked into the architecture rather than added as an afterthought. Whether you are building a new component library or auditing an existing interface, this skill provides the professional framework needed for modern web design.
UI Designer Use Cases
- Designing reusable UI components such as buttons, cards, modals, and navigation systems.
- Establishing comprehensive design token systems for brand consistency across large applications.
- Auditing and improving existing user interfaces for WCAG AA accessibility compliance.
- Creating responsive layouts and specialized themes, including dark mode variants.
- Generating detailed design handoff documentation for frontend engineering teams.
How UI Designer Works
- Analysis: The skill identifies the specific interface requirements and component scope from the user request.
- Token Establishment: It defines the core design tokens for typography, color palettes, and spacing scales using a 4px base.
- Foundation Creation: Reusable base components are developed to serve as the building blocks for complex interfaces.
- Accessibility Validation: The system applies WCAG AA standards, including contrast ratios and keyboard navigation support.
- Specification Delivery: Final designs are documented with detailed CSS values, interaction states, and handoff notes.
UI Designer Setup
To integrate the UI Designer skill into your workflow, ensure your project structure includes the required reference files. You can initialize these using the following commands:
mkdir -p references
touch references/design-tokens.md
touch references/components.md
Once created, ensure your AI agent is pointed to these files within the Openclaw Skills environment to maintain a consistent source of truth for your design system.
UI Designer Data Schema & Taxonomy
The UI Designer skill organizes design data into structured markdown files to ensure easy parsing and consistency.
| File Path | Description | Key Content |
|---|---|---|
references/design-tokens.md |
Core Design Tokens | Color palettes, Typography scales, Spacing (rem/px), Shadows |
references/components.md |
Component Library | HTML structure, CSS patterns, and state definitions |
handoff-specs.md |
Implementation Guide | HEX/RGB values, interaction logic, and accessibility notes |
UI Designer Advanced Features
- Intelligent token mapping that automatically translates brand requirements into CSS-ready variables.
- Automated accessibility checks focusing on WCAG AA contrast ratios and semantic HTML structure.
- Support for multi-agent workflows where design specs are passed directly to frontend implementation skills.
- Seamless dark mode and high-contrast theme generation within the Openclaw Skills framework.
- Progressive enhancement strategies for complex components to ensure performance and compatibility.
SKILL.md
Loading
Related Openclaw Skills
AgentDerby
A collaborative AI agent system designed for dream-first creative pixel art on shared public canvases using verified execution.
Bible Verse & Scripture API
A high-performance skill for fetching Bible verses, passages, and random scriptures from multiple translations via bible-api.com.
PhysiXpert: Elite Physics Master AI
A high-performance modular framework that transforms AI agents into elite physics experts for theoretical analysis and experimental design.
AgentBrowse
AgentBrowse provides a robust browser automation layer for AI agents to interact with real websites through a specialized CLI.
WhatsApp @Mention Skill
A model-agnostic utility for Openclaw Skills that converts plain text mentions into interactive, clickable WhatsApp blue mentions.
Context & Memory
A sophisticated framework for managing context window lifecycles, cross-session knowledge transfer, and token budget optimization for AI agents.
Featured*
