product-design

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