原始内容
Robi's Design Best Practice Skill
A comprehensive UI/UX design skill for AI coding agents, teaching beautiful, accessible interface design principles.
What This Skill Teaches
This skill provides AI agents with expert knowledge of modern UI/UX design principles, covering:
- Color Theory - HSL basics, low saturation palettes, dark mode adjustments, WCAG AAA contrast
- Spacing Systems - 4px-based spacing for visual consistency
- Border Radius - Concentric stacking formulas for nested elements
- Icon Consistency - Avoiding mixed weights and styles
- Shadows & Dark Mode - Using borders and color instead of shadows
- Animation - Smooth easings and micro-interactions
- Layout Alternatives - Beyond tables and cards
- Design Inspiration - Where to learn and develop taste
Installation
Install this skill using the skills CLI:
npx skills add robimez/robi-design-best-practice
Or add the skill manually to your .cursor/skills/ directory.
Usage
Once installed, the AI agent will automatically reference these design principles when:
- Building UI components
- Reviewing designs
- Choosing colors or spacing
- Implementing animations
- Discussing layout options
Example Prompts
"Create a card component following Robi's design principles"
"Review this UI for design best practices"
"Generate a low-saturation color palette for dark mode"
"Help me fix the spacing in this component"
What's Included
SKILL.md
Core design principles with:
- Quick reference checklist
- Color guidelines (HSL, WCAG, halation prevention)
- Spacing system (4px multiples)
- Border radius stacking
- Icon consistency rules
- Shadow alternatives for dark mode
- Animation and micro-interactions
- Layout alternatives
- Design inspiration resources
examples.md
Comprehensive code examples featuring:
- Tailwind color palettes with low saturation
- Dark mode color adjustments
- WCAG AAA contrast examples
- Spacing utilities and patterns
- Border radius stacking code
- Icon usage with Phosphor Icons
- Animation examples (CSS & Framer Motion)
- Micro-interactions (buttons, inputs, checkboxes, toasts)
- Layout alternatives (Kanban, Bento, Timeline, Masonry)
- Complete component example combining all principles
Key Principles
Don't Do This
- Oversaturated "vibe code" colors that strain eyes
- Pure black (#000000) or pure white (#FFFFFF)
- Mixing icon weights (duotone, fill, regular, thin)
- Using shadows in dark mode
- Linear animations (y=x)
- Random spacing values
Do This Instead
- Low saturation colors (aim for 20-40% saturation)
- Tinted blacks and whites to prevent halation
- Consistent icon weights with filled variants for active states
- Borders and color variations in dark mode
- Smooth cubic-bezier easings
- 4px-based spacing system
Based On
This skill is derived from Robi's "Bespoke UI" presentation, covering essential design principles for modern web applications. The guidelines emphasize:
- Avoiding "purple internet" problem - oversaturated UIs harm user experience
- Accessibility first - WCAG AAA contrast standards
- Mathematical consistency - 4px spacing system, concentric border radius
- Thoughtful dark mode - desaturate and lighten colors, use borders not shadows
- Premium feel - micro-interactions and smooth animations
- Learning from the best - study Linear, Notion, Supabase
Resources Referenced
- kigen.design/color - HSL color tools
- Design inspiration: Pinterest, Twitter, cosmos.so, Behance, Dribbble
Contributing
Found an issue or want to improve this skill? Open an issue or pull request!
License
MIT License - feel free to use and modify for your projects.
Made by @robimez | Presented at Dagmawi Babi's Meetup