PRODUCT DESIGN — Nivel Apple Skill

PRODUCT DESIGN — Nivel Apple

Overview

Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo. Ativar para: criar design system, definir visual language, revisar UX, acessibilidade, tokens de design, branding de produto, 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

Os 10 Principios De Jony Ive / Apple

Simplicidade radical — remova tudo que nao e essencial
Honestidade material — cada elemento existe por uma razao
Menos e mais — restraint e uma decisao de design
Coerencia sistemica — tudo faz parte de um sistema unico
Detalhes importam — o usuario sente, mesmo sem notar
Funcao define forma — a estetica serve ao proposito
Durabilidade — design que envelhece bem
Acessibilidade como padrao — nao como adicional
Continuidade entre telas — experiencia unificada
Surpresa deleitosa — o inesperado que encanta

Design Cognitivo

Carga cognitiva zero — o usuario nunca deve pensar
Affordances claras — o que e clicavel parece clicavel
Feedback imediato — toda acao tem resposta visual
Erros previnem-se — design que impossibilita erros

Estrutura De Um Design System 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

Design Tokens — 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 Ux Flow

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 voce vai conseguir"
  - Uma frase impactante
  - Uma imagem que mostra o resultado
  - CTA: "Comecar" (nao "Criar conta")

Tela 2: Acao imediata — primeiro valor antes de cadastro
  - Deixe o usuario experimentar algo real
  - Formulario minimo (email apenas)
  - Progresso visivel (1 de 3)

Tela 3: Personalizacao — "Me conte sobre voce"
  - Max 3 perguntas
  - Visual, nao texto
  - Pula disponivel sempre

Tela 4: Momento Aha — primeiro sucesso real
  - O usuario faz algo que funciona
  - Celebracao genuina (nao excessiva)
  - "Voce acabou de [acao de valor]"

Empty States Que Encantam

Nao mostre: "Nenhum item encontrado"
Mostre:
  - Ilustracao contextual
  - Mensagem de oportunidade: "Ainda nao ha [X]. Crie o primeiro!"
  - CTA primario
  - Talvez: dica de como comecar

Principios Unicos Para Voice Ui

Zero carga visual — o usuario nao ve nada (apenas ouve)
Reversibilidade facil — "desfazer" e sempre possivel
Confirmacao opcional — so para acoes irreversiveis
Variedade de resposta — nunca a mesma frase duas vezes
Silencio e ok — pausa de 2s antes de perguntar se precisa de ajuda

Estrutura De Resposta De Voz

[Hook opcional] + [Resposta core] + [Acao ou pergunta]

Ruim: "Desculpe, nao entendi o que voce disse. Pode repetir?"
Bom:  "Nao captei bem. Pode repetir de outro jeito?"

Ruim: "Claro! Posso ajudar com isso. A resposta para sua pergunta e..."
Bom:  "A resposta e: [resposta direta]"

Scripts De Interacao Auri

Primeiro uso:
"Oi! Sou a Auri. Pode me perguntar qualquer coisa — de decisoes de negocio
a ideias criativas. Como posso ajudar hoje?"

Retorno (usuario ja conhecido):
"Bem-vindo de volta! Onde paramos foi em [topico]. Quer continuar?"

Nao entendeu:
"Nao peguei bem. Tenta de outro jeito?"

Encerramento:
"Qualquer coisa, e so chamar. Ate logo!"

Framework De Critica Construtiva

1. OBSERVACAO: O que eu vejo (sem julgamento)
   "Noto que o botao principal esta no canto inferior direito"

2. PRINCIPIO: Qual principio esta sendo testado
   "Hierarquia visual e posicionamento de CTA primario"

3. IMPACTO: O que isso causa ao usuario
   "Usuarios que usam o polegar precisam esticar para alcanca-lo"

4. ALTERNATIVA: Sugestao construtiva
   "Considerar posicionar acima do fold, centralizado"

5. TRADE-OFF: O que se perde/ganha
   "Mais acessivel, mas perde area para conteudo"

Checklist De Critica De Ui

[ ] Hierarquia visual clara (o olho sabe para onde ir)
[ ] Contraste adequado (WCAG AA: 4.5:1 para texto)
[ ] Tamanho de toque minimo (44x44px em mobile)
[ ] Consistencia com design system
[ ] Estados interativos definidos (hover/active/disabled/focus)
[ ] Responsividade (mobile-first)
[ ] Loading states e empty states
[ ] Tratamento de erros com mensagem util
[ ] Acessibilidade (labels, roles ARIA, keyboard nav)
[ ] Performance percebida (skeleton screens, optimistic UI)

Conceito Visual

A Auri e inteligencia com calor humano. Nao e um robo — e uma presenca. A identidade visual deve comunicar: sofisticacao acessivel.

Paleta Principal

Roxo Auri:     #6C63FF  — identidade, inteligencia, inovacao
Rosa Auri:     #FF6B9D  — calor, empatia, humanidade
Branco Puro:   #FFFFFF  — clareza, espaco, respiro
Grafite Suave: #1A1A2E  — autoridade, profundidade, noite

Tipografia

Display/Titulos: Inter (ou SF Pro para Apple) — Bold 700
Corpo de texto:  Inter Regular 400 — linha 1.6
Mono/Codigo:     JetBrains Mono — para elementos tecnicos

Logo Conceito

Forma: Onda de audio estilizada formando a letra "A"
Cor: Gradiente roxo → rosa (esquerda para direita)
Espaco negativo: Sugestao de microfone ou ear
Versao dark/light: Ambas definidas
Tamanho minimo: 24px (icone), 120px (lockup completo)

Stack De Design

| Ferramenta | Uso | |-----------|-----| | Figma | Design de UI, prototipagem, handoff | | FigJam | User journeys, workshops, ideacao | | Zeroheight | Documentacao do design system | | Lottie | Animacoes (exportadas do After Effects/Figma) | | Mobbin | Referencia de patterns de UI | | Screenlane | Inspiracao de UI real |

Processo De Design Sprint (5 Dias)

Segunda: Entender — pesquisa, user interviews, definir o problema
Terca:   Divergir — crazy 8s, sketches individuais, lightning demos
Quarta:  Decidir — vote, storyboard, decisao final
Quinta:  Prototipar — prototipo de alta fidelidade no Figma
Sexta:   Testar — 5 usuarios, insights, iterar

8. Comandos

| Comando | Acao | |---------|------| | /design-critique | Critica estruturada de um design | | /design-tokens | Gera tokens para um projeto | | /ux-flow | Mapeia fluxo de experiencia | | /voice-ux | Design de interacao por voz | | /onboarding | Cria fluxo de onboarding | | /design-system | Estrutura design system completo | | /accessibility | Auditoria de acessibilidade | | /visual-identity | Define identidade visual de produto |

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

Agent Skills: PRODUCT DESIGN — Nivel Apple

Install this agent skill to your local

Skill Files