product-designer

Files (1)

• SKILL.md

SKILL.md (first lines)

# Product Designer

Guide AI agents in creating thoughtful, user-centered UI/UX designs. This skill covers design thinking, wireframing, prototyping, accessibility, and modern design patterns.

## Core Principles

### User-Centered Design
- **Empathy First**: Understand user needs, pain points, and goals before designing
- **Accessibility**: Follow WCAG 2.1 AA standards minimum (AAA where possible)
- **Inclusive Design**: Design for diverse users, abilities, devices, and contexts
- **Usability**: Prioritize clarity, efficiency, and error prevention

### Design System Thinking
- **Consistency**: Establish patterns that scale across the product
- **Component-Based**: Build reusable UI components with clear hierarchies
- **Documentation**: Define usage guidelines, states, and variations
- **Tokens**: Use design tokens for colors, spacing, typography

## Design Process

### 1. Discovery & Research
```markdown
## User Research Checklist
- [ ] Define target users and personas
- [ ] Identify user goals and pain points
- [ ] Map user journeys and touchpoints
- [ ] Review competitor solutions
- [ ] Analyze existing analytics/feedback (if available)
```

### 2. Information Architecture
- Create site maps and content hierarchies
- Define navigation patterns and taxonomies
- Plan user flows for key tasks
- Establish mental models and metaphors

### 3. Wireframing
Start with low-fidelity wireframes to explore layout and structure:

```
Low-Fidelity Wireframe Elements:
┌────────────────────────────┐
│ [Header / Navigation]      │
├────────────────────────────┤
│ [Hero / Primary Content]   │
│                            │
│ [Key Actions/CTAs]         │
├────────────────────────────┤
│ [Secondary Content]        │
│ [Grid / Card Layout]       │
├────────────────────────────┤
│ [Footer]                   │
└────────────────────────────┘
```

**Wireframe Best Practices:**
- Focus on structure, not aesthetics
- Use real content (or realistic placeholders)
- Show content priority and hierarchy
- Indicate interactive elements
- Include annotations for behavior

### 4. High-Fidelity Design
Apply visual design to validated wireframes:

**Visual Hierarchy:**
- Size, color, contrast for importance
- Whitespace to create breathing room
- Typography scale (6-8 levels typical)
- Grid systems (8px or 4px base)

**Color Systems:**
- Primary (brand identity)
- Secondary (supporting actions)
- Neutral (backgrounds, borders, text)
- Semantic (success, warning, error, info)
- Ensure 4.5:1 contrast ratio for text

**Typography:**
- Font pairing (1-2 typefaces max)
- Type scale (e.g., 12, 14, 16, 20, 24, 32, 48, 64)
- Line height (1.4-1.6 for body, 1.2-1.3 for headings)
- Font weights (Regular 400, Medium 500, Bold 700)

### 5. Interactive Prototyping
- Add micro-interactions and animations
- Show state changes (hover, active, disabled, loading)
- Define transitions between screens
- Test with users for feedback

## Design Patterns

### Layout Patterns
- **F-Pattern**: Text-heavy pages (blogs, articles)
- **Z-Pattern**: Simple pages with key CTAs
- **Grid Layout**: Content galleries, dashboards
- **Card Pattern**: Modular, scannable content
- **Split Screen**: Comparison or dual-purpose views

### Navigation Patterns
- **Top Nav**: Global navigation, 5-7 items max
- **Sidebar**: Deep hierarchies, admin panels
- **Hamburger Menu**: Mobile-first, space-constrained
- **Tabs**: Content organization within a page
- **Breadcrumbs**: Show hierarchy, aid navigation

### Component Patterns
- **Buttons**: Primary, secondary, tertiary, ghost
- **Forms**: Clear labels, inline validation, error states
- **Modals**: Focus attention, confirm actions
- **Toast/Snackbar**: Non-intrusive notifications
- **Tooltips**: Contextual help on hover/focus
- **Cards**: Grouped information with actions
- **Tables**: Data presentation with sorting/filtering
- **Empty States**: Guide users when no content exists

### Interaction Patterns
- **Progressive Disclosure**: Show complexity gradually
- **Lazy Loading**: Load content as needed

From heydemoura/ai-skills-inventory, MIT.

More from heydemoura/ai-skills-inventory