A sophisticated design agent skill that generates, serves, and iterates on React-based web interfaces using natural language prompts.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-ux-dev
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-dev 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 transforms natural language descriptions into production-ready React pages without requiring a complex local build environment. By leveraging a CDN-based template with Tailwind CSS, React 18, and Babel, it allows developers to build, serve, and refine frontend mockups in real-time. This skill is a powerful addition to the Openclaw Skills ecosystem, enabling a seamless transition from concept to live-previewed code.
Beyond simple code generation, this tool acts as a comprehensive design partner. It adheres to strict design principles, including WCAG AA accessibility standards, mobile-first responsiveness, and semantic HTML. Whether you are building a landing page, a dashboard, or a complex web mockup, this skill automates the repetitive parts of the frontend workflow while maintaining high aesthetic and technical quality.
UI Designer Use Cases
- Creating high-fidelity landing pages and web mockups from text prompts.
- Rapidly iterating on UI components and layouts based on natural language feedback.
- Automating the conversion and optimization of image assets for web performance.
- Performing automated visual reviews with desktop and mobile screenshots.
- Generating standalone, exportable static web projects for immediate deployment.
How UI Designer Works
- Initialize or load a project directory and its configuration through project.json.
- Define design system preferences such as typography, color palettes, and branding assets.
- Create a unique page slug and establish the directory structure.
- Generate a React page using the standardized CDN template and Tailwind CSS.
- Execute a visual review loop using headless browser screenshots for both desktop and mobile views.
- Optimize user-provided images by converting them to the WebP format.
- Iterate based on feedback until the design meets the user's requirements.
- Export the final project as a ZIP archive containing all HTML, JSON config, and assets.
UI Designer Setup
To get started with this skill within the Openclaw Skills framework, perform the following setup steps:
- Identify the port you wish to use (default is 5174).
- Run the initialization script:
bash scripts/setup.sh 5174
- Save the resulting configuration to your TOOLS.md file to enable the agent to access the design environment.
UI Designer Data Schema & Taxonomy
The skill organizes design projects using a structured hierarchy to ensure portability and clarity:
| Path | Description |
|---|---|
<serve_dir>/<project>/ |
The root directory for a specific design project. |
project.json |
Central configuration file for design systems, preferences, and page tracking. |
assets/ |
Directory containing optimized .webp images and other media. |
<slug>/index.html |
The standalone React/Tailwind page for a specific route. |
scripts/ |
Utility scripts for setup, screenshots, and image conversion. |
UI Designer Advanced Features
- Integrated Visual Review: Automatically generates desktop and mobile screenshots to identify layout issues before sharing with the user.
- Intelligent Image Optimization: Includes a conversion pipeline to turn PNG/JPG assets into WebP with customizable quality settings.
- Built-in Design System: Enforces consistent spacing, typography hierarchy, and WCAG AA contrast standards automatically.
- Standalone Portability: Generated pages require no build step (npm/yarn) and can be opened directly in any browser or served via static hosting.
- Multi-Agent Compatibility: Designed to work within the broader Openclaw Skills architecture for collaborative AI development workflows.
SKILL.md
Loading
Related Openclaw Skills
Weekly Reporter Skill
A Python-powered automation tool for generating structured weekly work reports using customizable templates.
Web Scraper V2
A comprehensive data collection assistant for retrieving real-time stock quotes, market sector analysis, and keyword-based news search.
Meeting Notes Generator
An AI-powered assistant that transforms meeting recordings and transcripts into professional, actionable meeting minutes instantly.
Data Harvester v2
A professional-grade batch web scraping and market intelligence tool for automated data collection and competitor monitoring.
Chinese Calendar Calculator
A precise technical utility for calculating Chinese lunar calendar dates, Heavenly Stems, and Earthly Branches from Gregorian dates.
MiniMax Speech 2.8 TTS
A powerful CLI utility to manage MiniMax Speech 2.8 text-to-audio requests and voice catalog discovery.
Featured*
