firefrost-gaming/antigravity-skills-reference
3
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity
Files
main
antigravity-skills-reference/skills/product-design/SKILL.md
sickn33 fc3c7ae8a2 meta(skills): Add skill audit and safe metadata fixes 
Add repo-wide auditing and targeted repair scripts for skill metadata.
Fix truncated descriptions automatically, keep heading normalization
conservative, and remove synthetic boilerplate sections that degrade
editorial quality while regenerating repo indexes and catalogs.

Fixes #365
2026-03-20 09:06:45 +01:00

10 KiB
Raw Permalink Blame History

name, description, risk, source, date_added, author, tags, tools
name description risk source date_added author tags tools
product-design 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. none community 2026-03-06 renat
design
ux
design-systems
accessibility
figma
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

{
  "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
Reference in New Issue View Git Blame Copy Permalink