| 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
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 analysisgrowth-engine - Complementary skill for enhanced analysismonetization - Complementary skill for enhanced analysisproduct-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.
