Buttons: AI Skill for UX Design
Buttons is an AI skill that makes your assistant design buttons with real hierarchy: one primary per screen, action-verb labels, and every state covered. Stylistic levers like shadows and FABs stay gated behind trade-offs.
npx skills add Uxcel-Lab/product-skills --skill ux-buttons
What this skill does
Helps an AI assistant design buttons with real hierarchy and full state coverage instead of flat sameness or decoration overload.
- Establishes platform, action hierarchy, brand personality, and destructive actions before designing.
- Picks primary, secondary, or tertiary types from each action's importance.
- Writes labels as commands: specific verbs, two to three words, one line.
- Designs every state: enabled, hover, pressed, focused, and disabled.
- Sizes touch targets at 48x48px or larger on mobile.
- Checks button and label contrast against WCAG ratios.
- Keeps one consistent button system across the product.
- Gates shape, shadows, FABs, and icon-only buttons as choices with trade-offs.
When to use it
Use it when you need an AI assistant to:
- design the button hierarchy for a screen;
- choose between primary, secondary, and tertiary buttons;
- write or fix button labels and CTAs;
- define button states for a design system;
- size and space buttons for mobile;
- decide on shape, shadows, FABs, or icon-only buttons;
- review existing buttons for consistency.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Shape | Sharp for serious brands, rounded for friendly, pill for playful |
| Elevation | Raised to lift the primary action, flat for everything else |
| Icon-only buttons | Universal icon with an accessible name, or icon plus label |
| FAB | At most one, only for the app's main create action |
| Branded buttons | Official brand assets verbatim, never restyled |
| Custom shapes | Conventions first, custom only when shape amplifies function |
| Width | Hug content with a minimum width, or fixed for stacked mobile pairs |
| Tactile feedback | Visual state change always, light haptics on mobile |
How the skill works
1
Establish context
The skill identifies the platform, the screen's action hierarchy, brand personality, and any destructive actions.
2
Apply the core
It picks button types from importance, writes action-verb labels, and designs every state with accessible sizing.
3
Surface trade-offs
It presents shape, elevation, icon-only buttons, and FABs as decisions instead of defaults.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
