/ui-design-pro

UI Design Pro

The definitive UI design skill for building professional, production-grade software. Transform rough, AI-generated, or amateur UI into polished, professional interfaces that convert.

Overview

UI Design Pro encodes 25+ design laws across:

• Color Theory: 4-layer system, OKLCH, dark mode, HSB palettes
• Layout: Cards, spacing, typography, component design
• Micro-interactions: Animations, feedback, playful design
• Analytics & Dashboards: Rich visualizations and data presentation
• Landing Pages: Professional presentation techniques
• Design Thinking: User-first philosophy

When to Use

• Building SaaS dashboards, landing pages, or web applications
• Redesigning "AI-generated" looking interfaces
• Adding micro-interactions and animations
• Creating color palettes and dark modes
• Elevating vibecoded prototypes to production quality

Installation

npx skills init

Then install the skill:

npx skills install ui-design-pro

What's Included

The 10 Foundation Laws

1. Kill the Emojis — Use professional icon libraries
2. Never let AI choose your colors
3. Eliminate redundancy — show information once
4. KPIs should be rich, not repetitive
5. Never let AI choose your layout
6. Modals over sparse forms
7. Design billing and pricing like a real SaaS
8. Analytics should be rich and visual
9. Landing pages are about presentation
10. Sweat the details

The 4-Layer Color System

• Layer 1: Neutral foundation (backgrounds, borders, text)
• Layer 2: Functional accent colors
• Layer 3: Semantic communication (success, error, warning)
• Layer 4: Theming via OKLCH

Micro-Interactions

11 essential interactions including button hover animations, toast notifications, tooltips, progress bars, and more.

Additional Topics

• Beginner mistakes and how to fix them
• Playful design techniques
• Card layout optimization
• Design thinking framework
• Professional presentation methods

Core Philosophy

Design is not art — it is a story. The goal is not to impress other designers, but to guide users to action. Start with user intent, not aesthetics. Make things work brilliantly for the user first, then make them beautiful.

Presentation drives conversion and trust. AI-generated UIs fail in predictable, fixable ways. This skill provides specific, actionable solutions to transform amateur software into professional products.

License

MIT

Author

Created for Claude Code agent skills.