ui-designer

What This Skill Does

The UI Designer skill is an expert assistant for crafting visually appealing and user-centered interfaces. It leverages knowledge of over 16 distinct design systems, including popular ones like Material You, Apple HIG, Fluent Design, and Ant Design, as well as more stylistic approaches like Glassmorphism, Neumorphism, and Neo-Brutalism. The skill excels in generating cohesive color palettes with deliverables in HEX, Tailwind CSS config, and CSS variables, often defaulting to high-end pastels, dark luxury, or tonal Material You sets. It can establish robust theme systems with light/dark modes by defining essential design tokens for background, text, accent, and borders, ensuring consistent states across UI elements. Furthermore, the UI Designer skill offers accessibility audits, evaluating interfaces against WCAG AA/AAA contrast ratios, semantic HTML, and intuitive navigation, providing guidance on ARIA attributes, focus management, and screen-reader compatibility.

Installation

To install the UI Designer skill, use the following command in your ClawHub environment:

clawhub install openclaw/skills/skills/1999azzar/ui-designer-skill

Use Cases

This skill is invaluable for frontend developers, UI/UX designers, and product managers looking to accelerate their design process. It can be used to:

• Quickly generate a primary and secondary color palette for a new web application in the Material You style.
• Define foundational design tokens for a new component library based on the Carbon Design system, including hover and active states.
• Audit an existing checkout flow for accessibility issues, focusing on contrast ratios and ARIA attributes.
• Explore different visual styles for a landing page, comparing a Glassmorphism approach with a Minimalism design.
• Create a thematic color scheme for a dark luxury dashboard.

Example Prompts

1. "Generate a color palette for a new e-commerce dashboard using Shopify Polaris, with a focus on readability and a fresh, teal-dominant accent."
2. "Help me theme my React components for a new project. I want to use the Apple HIG design system, with a light and dark mode. Define the --bg, --text, --accent, and --border CSS variables and ensure hover states are clearly defined."
3. "I'm building an admin panel for a SaaS product and want to explore a Neo-Brutalism aesthetic. Can you provide a starting color palette and suggest some button styles that fit this design system?"

Tips & Limitations

• Leverage Design System Specifics: When requesting designs, mentioning the target design system (e.g., Material You, Fluent Design) will yield more tailored results. The skill is proficient with over 16 systems.
• Iterative Refinement: The skill is excellent for initial concepts and audits. For complex or highly bespoke designs, consider it a powerful starting point for further iteration.
• Specificity is Key: Be as specific as possible with your requests regarding color preferences, target platforms (web, mobile), and desired aesthetic moods.
• Accessibility Focus: Always utilize the accessibility audit features to ensure your designs meet compliance standards. The skill can provide concrete recommendations for WCAG compliance.
• Tailwind Expertise: The skill has deep knowledge of Tailwind CSS, making it ideal for generating configurations and classes that integrate seamlessly.
• Limitations: While the skill can design interfaces, it does not implement the code directly. It provides design specifications, tokens, and guidance. It cannot generate functional code snippets beyond basic CSS variable definitions or Tailwind configuration examples.