--- name: product-design description: "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." risk: none source: community date_added: '2026-03-06' author: renat tags: - design - ux - design-systems - accessibility - figma tools: - claude-code - antigravity - cursor - gemini-cli - codex-cli --- # 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 1. **Simplicidade radical** — remova tudo que nao e essencial 2. **Honestidade material** — cada elemento existe por uma razao 3. **Menos e mais** — restraint e uma decisao de design 4. **Coerencia sistemica** — tudo faz parte de um sistema unico 5. **Detalhes importam** — o usuario sente, mesmo sem notar 6. **Funcao define forma** — a estetica serve ao proposito 7. **Durabilidade** — design que envelhece bem 8. **Acessibilidade como padrao** — nao como adicional 9. **Continuidade entre telas** — experiencia unificada 10. **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 ```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)" } } ``` --- ## 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 1. **Zero carga visual** — o usuario nao ve nada (apenas ouve) 2. **Reversibilidade facil** — "desfazer" e sempre possivel 3. **Confirmacao opcional** — so para acoes irreversiveis 4. **Variedade de resposta** — nunca a mesma frase duas vezes 5. **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 ## 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.