ui-ux-pro-max
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/15349185792/ui-ux-pro-max-0-1-0What This Skill Does
ui-ux-pro-max is an advanced intelligence agent designed to bridge the gap between creative visual design and technical implementation. It operates as a full-stack design partner, capable of handling everything from high-level information architecture and UX flow design to specific CSS/Tailwind implementation and component-level code generation. It eliminates common communication friction by requiring structured triage, ensuring every design suggestion aligns with your technical stack and project constraints.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/15349185792/ui-ux-pro-max-0-1-0
Use Cases
- Design System Creation: Generate consistent design tokens including spacing, color palettes, typography scales, and border radii for enterprise-grade consistency.
- UX Auditing & Flow Optimization: Analyze user journeys to identify friction points, define loading/error state behaviors, and ensure WCAG AA accessibility compliance.
- Frontend Implementation: Transform wireframes or Figma concepts into clean, maintainable code (React, Vue, Svelte, or vanilla HTML/CSS).
- Responsive Prototyping: Build out grid layouts and adaptive component variants for web, mobile, and desktop applications.
Example Prompts
- "I am building a SaaS dashboard in Next.js with Tailwind CSS. Can you design a modern, dark-mode layout for a file management sidebar and provide the component tokens for colors and spacing?"
- "Review this user flow for my checkout process. We have a high drop-off rate at the payment step; suggest improvements based on UX best practices and provide a revised layout for the error handling states."
- "Convert this Figma screenshot of a landing page into a responsive React component. Use Framer Motion for the hero animation and ensure all contrast ratios meet WCAG AA standards."
Tips & Limitations
- Triage First: Always provide your stack (e.g., React/Tailwind) and constraints (e.g., mobile-first) upfront. This allows the AI to skip generic advice and get straight to code.
- Leverage Bundled Assets: If you need standard patterns, ask the agent to consult its internal
data/folder for heuristics. - Tooling: Use the provided
design_system.pyscript for rapid token generation. - Limitations: While the agent generates excellent code, it is intended for frontend UI/UX logic. For complex backend state management or heavy business logic, ensure you pair this with appropriate backend skills.
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-15349185792-ui-ux-pro-max-0-1-0": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, code-execution