UI/UX Design AssistantAI UI designer
Generates React and Tailwind components with design best practices.
What This Skill Does
Describe what you need and get production-ready UI components. It generates React components with Tailwind CSS, follows accessibility best practices (WCAG 2.1), handles responsive design, and explains the design decisions behind each component. From landing page sections to dashboard widgets to form patterns — it writes clean, reusable code you can drop into your project. Inspired by the Frontend Design skill with 7K+ ClawHub downloads.
Who Should Use This
- Full-stack developers who aren't designers
- Frontend developers speeding up prototyping
- Founders building MVPs
- Design-conscious teams without a dedicated designer
Common Use Cases
- Generate production-ready React + Tailwind components
- Design landing page sections (hero, pricing, testimonials)
- Build dashboard widgets and data display components
- Create accessible forms with validation patterns
- Design responsive navigation (headers, sidebars, mobile menus)
- Handle empty states, loading states, and error states
How It Works on OpenClaw
- 1
Install the skill
Browse the marketplace, pick a skill, and add it to your assistant with one click.
- 2
Pick your channel
Connect through Telegram, Discord, or WhatsApp — whichever you already use.
- 3
Start messaging
Send a message and your assistant responds with the skill's expertise, 24/7.
Best Channels and Models
Best Channels
Best Models
Limitations
- Text-based output only — cannot render visual previews
- Generates code, not design files (Figma, Sketch)
- Complex animations may need manual refinement
Not Suitable For
- Designers needing Figma or Sketch file output
- Teams requiring visual design previews and interactive prototyping within the tool
- Developers working with non-React frameworks (Vue, Svelte, Angular)
Example Interaction
You
I need a pricing page with 3 tiers — Free, Pro, and Enterprise. Clean design, highlight the Pro plan.
UI/UX Design Assistant
Here's a React + Tailwind pricing component: 3-column layout with the Pro tier visually elevated (larger card, blue border, 'Most Popular' badge). Each tier has feature lists with check/x icons, a CTA button (Pro gets a filled button, others get outlined), and an annual/monthly toggle that shows 20% savings. Fully responsive — stacks vertically on mobile.
You
Build me an empty state for when a user has no projects yet. It should encourage them to create their first one.
UI/UX Design Assistant
Here's the empty state component: centered layout with a subtle illustration placeholder (folder icon with a plus), headline 'No projects yet,' supporting text 'Create your first project to get started — it takes under a minute,' and a primary CTA button. I added a soft background gradient and the component accepts an onCreateClick callback prop.
Setup Requirements
- OpenClaw account
- Discord or Telegram
- A description of the component or page you need, including any brand colors or style preferences
Frequently Asked Questions
What tech stack does it use?
React with TypeScript and Tailwind CSS. Components include proper TypeScript interfaces, responsive breakpoints, and WCAG 2.1 AA accessibility compliance.
Can it design full pages?
Yes — describe the page you need and it generates all the components. It works best when you describe section by section for maximum quality.
Does it support dark mode?
Yes, request dark mode support and it adds Tailwind dark: variants to all components.
Related Skills
Ready to try UI/UX Design Assistant?
Install this skill and start using it on Telegram, Discord, or WhatsApp in under a minute.