UI/UX Design

UI/UX Design Skill

Design Spec Template

# Component: [Name]

## Purpose
[Why this component exists]

## Variants
- Default
- [Variant 2]
- [Variant 3]

## Props/Configuration
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| | | | |

## States
- **Default**: [description + visual notes]
- **Hover**: [description + visual notes]
- **Active/Pressed**: [description + visual notes]
- **Focus**: [description + visual notes]
- **Disabled**: [description + visual notes]
- **Loading**: [description + visual notes]
- **Error**: [description + visual notes]
- **Empty**: [description + visual notes]

## Layout
- Width: [fixed/fluid/min-max]
- Height: [fixed/fluid/min-max]
- Padding: [values]
- Margin: [context-dependent notes]

## Typography
- Font: [family, size, weight, line-height]
- Color: [token or value]
- Truncation: [behavior for overflow text]

## Responsive Behavior
- Mobile (<768px): [changes]
- Tablet (768-1024px): [changes]
- Desktop (>1024px): [default]

## Accessibility
- Role: [ARIA role]
- Keyboard: [interaction pattern]
- Screen reader: [announcement behavior]
- Focus order: [tab sequence]

## Animation
- Transition: [property, duration, easing]
- Enter: [animation]
- Exit: [animation]
- Reduced motion: [alternative]

Design System Scan Procedure

When scanning an existing codebase for design patterns:

1. Find style sources: Look for CSS variables, theme files, design tokens

   • Glob: **/*.{css,scss,less} for -- or $ prefixed variables
   • Glob: **/theme.{ts,js,json} or **/tokens.*

2. Find component library: Look for shared components

   • Glob: **/components/**/*.{tsx,jsx,vue,svelte}
   • Note: reusable vs. page-specific components

3. Extract color palette: Document all colors with usage context

4. Extract typography scale: Font sizes, weights, line heights

5. Extract spacing scale: Padding/margin patterns

6. Document component inventory: List all shared components