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.
type	skill
created	2026-02-27T00:00:00.000Z
domain	business-marketing
category	product-management
risk	none
source	community
tags	["skill","business-marketing","product-management","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

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