product-design

PRODUCT DESIGN — Apple Level

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 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

Radical simplicity — remove everything that is not essential
Material honesty — every element exists for a reason
Less is more — restraint is a design decision
Systemic coherence — everything is part of a single system
Details matter — the user feels it, even without noticing
Function defines form — aesthetics serve the purpose
Durability — design that ages well
Accessibility as standard — not as an add-on
Continuity between screens — unified experience
Delightful surprise — the unexpected that enchants

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

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

Elite Onboarding (First 5 Minutes)

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 That Enchant

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

Unique Principles For Voice Ui

Zero visual load — the user sees nothing (only hears)
Easy reversibility — "undo" is always possible
Optional confirmation — only for irreversible actions
Variety of response — never the same phrase twice
Silence is ok — 2s pause before asking if help is needed

Voice Response Structure

[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]"

Auri Interaction Scripts

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!"

Constructive Critique Framework

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"

UI Critique Checklist

Clear visual hierarchy (the eye knows where to go)
Adequate contrast (WCAG AA: 4.5:1 for text)
Minimum touch size (44x44px on mobile)
Consistency with design system
Defined interactive states (hover/active/disabled/focus)
Responsiveness (mobile-first)
Loading states and empty states
Error handling with useful 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.

Main Palette

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

Typography

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 Concept

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)

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)

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. Commands

Command	Action
`/design-critique`	Structured critique of a design
`/design-tokens`	Generates tokens for a project
`/ux-flow`	Maps experience flow
`/voice-ux`	Voice interaction design
`/onboarding`	Creates onboarding flow
`/design-system`	Structures complete design system
`/accessibility`	Accessibility audit
`/visual-identity`	Defines product 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

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.