product-design

## Overview

Apple-level product design — visual systems, UX flows, accessibility, proprietary visual language, design tokens, prototyping, and handoff. Covers Figma, design systems, typography, color, spacing, motion design, and cognitive design principles. Activate for: creating a design system, defining a visual language, reviewing UX, accessibility, design tokens, product branding, UI critique.

## When to Use This Skill

- When you need specialized assistance with this domain

## Do Not Use This Skill When

- The task is unrelated to product design
- A simpler, more specific tool can handle the request
- The user needs general-purpose assistance without domain expertise

## How It Works

> "Design is not just what it looks like and feels like. Design is how it works."
> — Steve Jobs

---

## The 10 Principles Of Jony Ive / Apple

1. **Radical simplicity** — remove everything that is not essential
2. **Material honesty** — every element exists for a reason
3. **Less is more** — restraint is a design decision
4. **Systemic coherence** — everything is part of a single system
5. **Details matter** — the user feels them, even without noticing
6. **Function defines form** — aesthetics serve the purpose
7. **Durability** — design that ages well
8. **Accessibility as a default** — not as an add-on
9. **Continuity across screens** — a unified experience
10. **Delightful surprise** — the unexpected that charms

## Cognitive Design

- **Zero cognitive load** — the user should never have to think
- **Clear affordances** — what is clickable looks clickable
- **Immediate feedback** — every action has a visual response
- **Errors are prevented** — design that makes errors impossible

---

## Structure Of An Elite Design System

```
design-system/
├── tokens/
│   ├── colors.json       # paleta completa com semantica
│   ├── typography.json   # escala tipografica
│   ├── spacing.json      # grid e espacamento
│   ├── shadows.json      # elevacao e profundidade
│   ├── motion.json       # duracao e easing
│   └── radius.json       # bordas arredondadas
├── components/
│   ├── atoms/            # Button, Input, Icon, Badge
│   ├── molecules/        # Card, Form, NavItem
│   └── organisms/        # Header, Sidebar, Modal
├── patterns/
│   ├── onboarding.md     # primeiro acesso
│   ├── empty-states.md   # estados vazios
│   ├── loading.md        # estados de carregamento
│   └── errors.md         # tratamento de erros
└── guidelines/
    ├── voice-tone.md     # voz e tom
    ├── imagery.md        # fotografia e ilustracao
    └── accessibility.md  # WCAG 2.1 AA
```

## Design Tokens — Auri Example

```json
{
  "color": {
    "brand": {
      "primary": "#6C63FF",
      "primary-dark": "#5A52E0",
      "accent": "#FF6B6B",
      "surface": "#F8F7FF"
    },
    "semantic": {
      "success": "#22C55E",
      "warning": "#F59E0B",
      "error": "#EF4444",
      "info": "#3B82F6"
    },
    "neutral": {
      "900": "#111827",
      "800": "#1F2937",
      "600": "#4B5563",
      "400": "#9CA3AF",
      "200": "#E5E7EB",
      "50":  "#F9FAFB"
    }
  },
  "typography": {
    "display": { "size": "48px", "weight": "700", "line": "1.1" },
    "h1": { "size": "36px", "weight": "700", "line": "1.2" },
    "h2": { "size": "28px", "weight": "600", "line": "1.3" },
    "body": { "size": "16px", "weight": "400", "line": "1.6" },
    "small": { "size": "14px", "weight": "400", "line": "1.5" }
  },
  "spacing": {
    "xs": "4px", "sm": "8px", "md": "16px",
    "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px"
  },
  "radius": {
    "sm": "4px", "md": "8px", "lg": "12px",
    "xl": "16px", "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 3px rgba(0,0,0,0.12)",
    "md": "0 4px 12px rgba(0,0,0,0.15)",
    "lg": "0 8px 24px rgba(0,0,0,0.18)",
    "xl": "0 20px 60px rgba(0,0,0,0.22)"
  },
  "motion": {
    "fast": "150ms ease-out",
    "normal": "250ms ease-in-out",
    "slow": "400ms cubic-bezier(0.34, 1.56, 0.64, 1)"
  }
}
```

---

## Structure Of A Ux Flow

```
1. Entry Point (how the user arrives)
2. Context (what the user knows/wants)
3. Action (what the user does)
4. Feedback (the system's immediate response)
5. Outcome (what the user accomplished)
6. Next Step (what naturally comes next)
```

## Elite Onboarding (First 5 Minutes)

```
Screen 1: Promise — "What you'll be able to do"
  - One impactful sentence
  - One image that shows the result
  - CTA: "Get started" (not "Create account")

Screen 2: Immediate action — first value before signup
  - Let the user experience something real
  - Minimal form (email only)
  - Visible progress (1 of 3)

Screen 3: Personalization — "Tell me about yourself"
  - Max 3 questions
  - Visual, not text
  - Skip always available

Screen 4: Aha moment — first real success
  - The user does something that works
  - Genuine celebration (not over the top)
  - "You just [value action]"
```

## Empty States That Delight

```
Don't show: "No items found"
Show:
  - A contextual illustration
  - An opportunity message: "There's no [X] yet. Create the first one!"
  - A primary CTA
  - Maybe: a tip on how to get started
```

---

## Unique Principles For Voice Ui

1. **Zero visual load** — the user sees nothing (only hears)
2. **Easy reversibility** — "undo" is always possible
3. **Optional confirmation** — only for irreversible actions
4. **Response variety** — never the same phrase twice
5. **Silence is okay** — a 2s pause before asking whether help is needed

## Structure Of A Voice Response

```
[Optional hook] + [Core answer] + [Action or question]

Bad:  "Sorry, I didn't understand what you said. Can you repeat that?"
Good: "I didn't quite catch that. Can you say it another way?"

Bad:  "Of course! I can help with that. The answer to your question is..."
Good: "The answer is: [direct answer]"
```

## Auri Interaction Scripts

```
First use:
"Hi! I'm Auri. You can ask me anything — from business decisions
to creative ideas. How can I help you today?"

Return (returning user):
"Welcome back! Last time we left off at [topic]. Want to continue?"

Didn't understand:
"I didn't quite catch that. Want to try another way?"

Closing:
"Anytime, just call. See you soon!"
```

---

## Framework For Constructive Critique

```
1. OBSERVATION: What I see (without judgment)
   "I notice the primary button is in the bottom-right corner"

2. PRINCIPLE: Which principle is being tested
   "Visual hierarchy and primary CTA placement"

3. IMPACT: What this causes for the user
   "Users operating with their thumb have to stretch to reach it"

4. ALTERNATIVE: A constructive suggestion
   "Consider placing it above the fold, centered"

5. TRADE-OFF: What is lost/gained
   "More accessible, but loses area for content"
```

## Ui Critique Checklist

- [ ] Clear visual hierarchy (the eye knows where to go)
- [ ] Adequate contrast (WCAG AA: 4.5:1 for text)
- [ ] Minimum touch target (44x44px on mobile)
- [ ] Consistency with the design system
- [ ] Interactive states defined (hover/active/disabled/focus)
- [ ] Responsiveness (mobile-first)
- [ ] Loading states and empty states
- [ ] Error handling with a helpful message
- [ ] Accessibility (labels, ARIA roles, keyboard nav)
- [ ] Perceived performance (skeleton screens, optimistic UI)

---

## Visual Concept

Auri is **intelligence with human warmth**. It is not a robot — it is a presence.
The visual identity should communicate: accessible sophistication.

## Primary Palette

```
Auri Purple:   #6C63FF  — identity, intelligence, innovation
Auri Pink:     #FF6B9D  — warmth, empathy, humanity
Pure White:    #FFFFFF  — clarity, space, breathing room
Soft Graphite: #1A1A2E  — authority, depth, night
```

## Typography

```
Display/Headings: Inter (or SF Pro for Apple) — Bold 700
Body text:        Inter Regular 400 — line 1.6
Mono/Code:        JetBrains Mono — for technical elements
```

## Logo Concept

```
Shape: A stylized audio wave forming the letter "A"
Color: Purple → pink gradient (left to right)
Negative space: Suggestion of a microphone or ear
Dark/light version: Both defined
Minimum size: 24px (icon), 120px (full lockup)
```

---

## Design Stack

| Tool | Use |
|-----------|-----|
| Figma | UI design, prototyping, handoff |
| FigJam | User journeys, workshops, ideation |
| Zeroheight | Design system documentation |
| Lottie | Animations (exported from After Effects/Figma) |
| Mobbin | UI pattern reference |
| Screenlane | Real UI inspiration |

## Design Sprint Process (5 Days)

```
Monday:    Understand — research, user interviews, define the problem
Tuesday:   Diverge — crazy 8s, individual sketches, lightning demos
Wednesday: Decide — vote, storyboard, final decision
Thursday:  Prototype — high-fidelity prototype in Figma
Friday:    Test — 5 users, insights, iterate
```

---

## 8. Commands

| Command | Action |
|---------|------|
| `/design-critique` | Structured critique of a design |
| `/design-tokens` | Generate tokens for a project |
| `/ux-flow` | Map an experience flow |
| `/voice-ux` | Voice interaction design |
| `/onboarding` | Create an onboarding flow |
| `/design-system` | Structure a complete design system |
| `/accessibility` | Accessibility audit |
| `/visual-identity` | Define a product's visual identity |

## Best Practices

- Provide clear, specific context about your project and requirements
- Review all suggestions before applying them to production code
- Combine with other complementary skills for comprehensive analysis

## Common Pitfalls

- Using this skill for tasks outside its domain expertise
- Applying recommendations without understanding your specific context
- Not providing enough project context for accurate analysis

## Related Skills

- `analytics-product` - Complementary skill for enhanced analysis
- `growth-engine` - Complementary skill for enhanced analysis
- `monetization` - Complementary skill for enhanced analysis
- `product-inventor` - Complementary skill for enhanced analysis