ui-designer
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Why use this skill?
Build, prototype, and iterate on production-quality React web pages instantly using natural language with the OpenClaw UI Designer skill.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wing8169/ui-ux-devWhat This Skill Does
The ui-designer skill transforms OpenClaw into a rapid frontend development powerhouse. By automating the creation of React-based web interfaces, it eliminates the traditional friction between ideation and deployment. It handles the scaffolding, CDN-based React templating, and iterative visual refinement through automated screenshot analysis. The skill ensures that every design produced is production-ready, mobile-responsive, and tailored to specific brand guidelines defined within the project.json configuration file.
Installation
To integrate this skill into your OpenClaw environment, ensure you have the necessary base permissions for file system operations and command execution. Install via the OpenClaw hub:
clawhub install openclaw/skills/skills/wing8169/ui-ux-dev
Follow the post-installation setup: confirm your preferred development port (default 5174) and ensure the scripts/setup.sh utility has execute permissions. This creates the foundational directory structure required for managing multiple projects and individual page assets.
Use Cases
- Prototyping: Rapidly translate low-fidelity wireframes or napkin sketches into functional, interactive React web pages.
- Landing Page Generation: Create high-conversion marketing pages with integrated Tailwind CSS for rapid styling.
- UI Iteration: Update existing dashboard components, adjust brand color palettes, or tweak typography settings without manual code editing.
- Responsive Testing: Automatically verify layout integrity across both desktop and mobile viewports using the built-in screenshot verification loop.
Example Prompts
- "I need a dark-mode landing page for a new AI SaaS product. Use a professional blue color scheme, a clear call-to-action button, and a feature grid section."
- "Update my project 'marketing-site'—change the header background to slate-900 and ensure the contact form on the /contact page is responsive on mobile."
- "Create a new dashboard UI for a finance app. Use a clean, card-based layout with a sidebar navigation that hides on mobile devices."
Tips & Limitations
- Stay Conversational: The agent expects a step-by-step workflow. Always define your project name first to ensure configuration persistence.
- Leverage Review Loops: Don't hesitate to ask for a redesign if the visual screenshot check reveals alignment or responsiveness issues.
- CDN Dependency: This skill uses CDN-based libraries to avoid complex build steps. It is optimized for frontend prototypes; for complex backend-heavy applications, you may eventually need to migrate to a full Node.js project structure.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wing8169-ui-ux-dev": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution