| 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, espaca |
| category | Document Processing |
| source | antigravity |
| tags | ["claude","ai","design","document","image","cro"] |
| url | https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/product-design |
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"
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:
