DESIGN DE PRODUTO — Nível Apple

Visão Geral

Design de produto nível Apple — sistemas visuais, fluxos de UX, acessibilidade, linguagem visual proprietária, tokens de design, prototipagem e entrega (handoff). Abrange Figma, sistemas de design, tipografia, cor, espaçamento, design de movimento e princípios de design cognitivo. Ative para: criar um sistema de design, definir a linguagem visual, revisar UX, acessibilidade, tokens de design, branding de produto, crítica de UI.

Quando Usar Esta Habilidade

• Quando você precisar de assistência especializada neste domínio

Não Use Esta Habilidade Quando

• A tarefa não estiver relacionada a design de produto
• Uma ferramenta mais simples e específica puder lidar com a solicitação
• O usuário precisar de assistência de propósito geral sem conhecimento de domínio

Como Funciona

"Design não é apenas como se parece e como se sente. Design é como funciona." — Steve Jobs

Os 10 Princípios de Jony Ive / Apple

1. Simplicidade radical — remova tudo que não é essencial
2. Honestidade material — cada elemento existe por uma razão
3. Menos é mais — contenção é uma decisão de design
4. Coerência sistêmica — tudo faz parte de um sistema único
5. Detalhes importam — o usuário sente, mesmo sem notar
6. Função define forma — a estética serve ao propósito
7. Durabilidade — design que envelhece bem
8. Acessibilidade como padrão — não como adicional
9. Continuidade entre telas — experiência unificada
10. Surpresa deliciosa — o inesperado que encanta

Design Cognitivo

• Carga cognitiva zero — o usuário nunca deve pensar
• Affordances claras — o que é clicável parece clicável
• Feedback imediato — toda ação tem resposta visual
• Erros são prevenidos — design que impossibilita erros

Estrutura de um Sistema de Design de Elite

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

Tokens de Design — Exemplo Auri

{
  "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)"
  }
}

Estrutura de um Fluxo de UX

1. Entry Point (como o usuario chega)
2. Context (o que o usuario sabe/quer)
3. Action (o que o usuario faz)
4. Feedback (resposta imediata do sistema)
5. Outcome (o que o usuario conseguiu)
6. Next Step (o que vem depois naturalmente)

Onboarding de Elite (Primeiros 5 Minutos)

Tela 1: Promessa — "O que você vai conseguir"
  - Uma frase impactante
  - Uma imagem que mostra o resultado
  - CTA: "Começar" (não "Criar conta")


…