ui-design

What This Skill Does

The ui-design skill serves as an expert consultant for web interface creation. It enforces a systematic approach to design, prioritizing the 80/20 rule: focusing heavily on typography, spacing, and color palettes to achieve high-perceived quality. The skill assists in choosing design directions (Brutally Minimal, Luxury, Playful, Editorial, or Industrial), determining structural layouts using modern CSS (Grid vs. Flexbox), and implementing container strategies. It acts as a design system architect, ensuring consistency across components while adhering to accessibility standards.

Installation

You can integrate this skill into your environment by running the following command in your terminal:

clawhub install openclaw/skills/skills/wpank/ui-design

Use Cases

• Landing Page Creation: Generate layout prototypes and responsive grid systems for high-converting landing pages.
• Design Reviews: Audit existing CSS or component structures for common mistakes like inconsistent padding or poor visual hierarchy.
• Design System Standardization: Establish consistent spacing scales, font pairings, and color tokens for enterprise-grade dashboards.
• Component Prototyping: Build distinctive UI components that move away from generic web aesthetics while maintaining functional requirements.
• Accessibility Auditing: Ensure that contrast ratios and responsive spacing meet modern accessibility guidelines.

Example Prompts

1. "I am building a B2B SaaS dashboard. Suggest a color palette and layout strategy that feels professional and industrial using a Tailwind-based approach."
2. "Review this UI component code for a pricing card. The alignment feels off; suggest a layout fix using modern CSS grid properties."
3. "Help me choose a typography pair for an editorial-style blog. I want something that feels modern but highly readable for long-form content."

Tips & Limitations

• Focus on the 'Design Philosophy' section: If you are short on time, prioritize typography and spacing before worrying about borders or shadows.
• Use the provided container strategies to maintain content alignment across different screen sizes.
• The skill is most effective when you provide specific context about your target audience; for example, distinguishing between a playful consumer app and a data-dense enterprise tool will drastically change the design recommendations.
• Remember that this skill provides stylistic and technical guidance; ensure your final implementation follows your project's existing code style guide if applicable.