UI Design Tips — OpenClaw Agent Skill

Practical UI/UX design intelligence for building polished, conversion-optimized interfaces.

What This Skill Does

Activates when you ask your OpenClaw agent to:

• Review or critique any UI/UX
• Suggest color palettes, typography, or layout improvements
• Apply UX laws (Fitts's Law, Hick's Law, Gestalt, Jakob's Law, etc.)
• Fix accessibility issues
• Design buttons, forms, cards, navigation, modals, or any component
• Choose the right UI style (Glassmorphism, Neubrutalism, Bento Grid, Cyberpunk, Claymorphism...)
• Optimize landing pages for conversions
• Write better UX copy (CTAs, error messages, empty states, onboarding)

Install via ClawHub (Recommended)

clawhub install ui-design-tips

Manual Install

Clone this repo into your OpenClaw workspace skills/ folder:

cd ~/.openclaw/workspace/skills
git clone https://github.com/ZackO2o/ui-design-tips

Contents

ui-design-tips/
├── SKILL.md                          ← 25 design modules, core skill
└── references/
    ├── ux-laws.md                    ← 15 UX laws (Fitts, Hick, Gestalt, Jakob, etc.)
    ├── ux-writing.md                 ← UX copy formulas (buttons, errors, empty states)
    ├── conversion-checklist.md       ← 40-item pre-delivery audit checklist
    ├── micro-interactions.md         ← CSS patterns from uiverse.io (3000+ components)
    └── design-systems-pro.md         ← 96 color palettes, 57 typography pairings,
                                         60+ UI styles, 99 UX anti-patterns database

Coverage

25 Design Modules in SKILL.md

1. Visual Hierarchy
2. Typography
3. Whitespace & Layout
4. Color Usage
5. CTA Buttons
6. Alignment & Grids
7. Forms
8. Icons & Imagery
9. Navigation
10. Empty States
11. Loading States
12. Error Messages
13. Trust Signals & Social Proof
14. Dangerous Actions
15. Onboarding
16. Mobile UX
17. Accessibility
18. Pricing Pages
19. Header Design
20. Micro-Interactions & Button States (uiverse.io patterns)
21. Color System by Product Type (96 categories)
22. UI Style Systems (60+: Glassmorphism, Neubrutalism, Bento, Cyberpunk...)
23. Typography Selection Guide (57 pairings)
24. Landing Page Pattern Selection (30 patterns)
25. Design Tokens Template

Reference Database

• 96 color palettes by product type (SaaS, Gaming, Healthcare, Fintech, E-commerce...)
• 57 typography pairings by style/industry
• 60+ UI style systems with CSS code snippets
• 99 UX anti-patterns with severity ratings and fixes
• 30 landing page patterns with CTA placement rules
• 15 UX laws (Fitts, Hick, Gestalt, Jakob, Peak-End Rule, Doherty Threshold...)
• UX writing formulas for buttons, errors, empty states, notifications
• 40-item delivery checklist covering visual, interaction, accessibility, responsive

Sources

Knowledge distilled from:

• uidesign.tips by Jim Raptis
• uiverse.io/galaxy — 3000+ CSS components (MIT)
• ui-ux-pro-max by @xobi667 on ClawHub (MIT-0)
• Established UX research (Nielsen Heuristics, Gestalt Psychology, WCAG guidelines)

License

MIT — free to use, modify, and redistribute.

---

Made with ❤️ by @ZackO2o · Published on ClawHub