product-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

苹果级产品设计——视觉系统、UX流程、无障碍设计、专属视觉语言、Design Tokens、原型制作与交付。涵盖Figma、设计系统、排版、色彩、间距、动效设计与认知设计原则。适用场景：创建设计系统、定义视觉语言、评审UX、无障碍设计、Design Tokens、产品品牌塑造、UI评审。

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

乔尼·艾夫/苹果的10条设计原则

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-system/
├── tokens/
│   ├── colors.json       # 带语义的完整调色板
│   ├── typography.json   # 排版层级
│   ├── spacing.json      # 网格与间距
│   ├── shadows.json      # 层级与深度
│   ├── motion.json       # 时长与缓动效果
│   └── radius.json       # 圆角
├── components/
│   ├── atoms/            # Button, Input, Icon, Badge
│   ├── molecules/        # Card, Form, NavItem
│   └── organisms/        # Header, Sidebar, Modal
├── patterns/
│   ├── onboarding.md     # 首次访问流程
│   ├── empty-states.md   # 空状态
│   ├── loading.md        # 加载状态
│   └── errors.md         # 错误处理
└── guidelines/
    ├── voice-tone.md     # 语气与语调
    ├── imagery.md        # 摄影与插画
    └── accessibility.md  # WCAG 2.1 AA标准

Design Tokens — Exemplo Auri

Design Tokens示例（Auri）

json

{
  "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)"
  }
}

json

{
  "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

UX流程结构

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)

1. 入口点（用户如何进入）
2. 场景（用户已知/需求）
3. 操作（用户执行的动作）
4. 反馈（系统的即时响应）
5. 结果（用户达成的目标）
6. 下一步（自然的后续流程）

Onboarding De Elite (Primeiros 5 Minutos)

顶级新手引导流程（前5分钟）

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]"

页面1：价值承诺 — "你将获得什么"
  - 震撼的标语
  - 展示成果的图片
  - 行动按钮："开始"（而非"创建账户"）

页面2：即时操作 — 注册前先体验价值
  - 让用户体验真实功能
  - 极简表单（仅需邮箱）
  - 可视化进度（3步中的第1步）

页面3：个性化设置 — "告诉我关于你的信息"
  - 最多3个问题
  - 可视化呈现，而非纯文本
  - 始终提供跳过选项

页面4：惊喜时刻 — 首次真实成功
  - 用户完成有效操作
  - 真诚的庆祝（不过度）
  - "你刚刚完成了[有价值的操作]"

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

不要显示："未找到任何项目"
应该显示：
  - 场景化插画
  - 机会型文案："还没有[X]。创建第一个吧！"
  - 主要行动按钮
  - 可选：入门提示

Principios Unicos Para Voice Ui

语音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

零视觉负荷 — 用户看不到任何内容（仅聆听）
轻松撤销 — "撤销"操作始终可用
可选确认 — 仅针对不可逆操作
响应多样化 — 绝不重复相同回复
沉默是允许的 — 停顿2秒后再询问是否需要帮助

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

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!"

首次使用：
"你好！我是Auri。你可以问我任何问题——从商业决策到创意想法。今天我能帮你做什么？"

回访用户：
"欢迎回来！我们上次停留在[话题]。要继续吗？"

未听懂时：
"我没听清。换种方式试试？"

结束对话：
"有任何需求随时叫我。再见！"

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"

1. 观察：我看到了什么（不带评判）
   "我注意到主按钮位于右下角"

2. 原则：涉及哪条设计原则
   "视觉层级与主CTA的位置"

3. 影响：对用户的影响
   "使用拇指操作的用户需要伸展才能触及它"

4. 替代方案：建设性建议
   "考虑将其放置在首屏内，居中对齐"

5. 权衡：得失分析
   "更易访问，但会占用内容区域"

Checklist De Critica De Ui

UI评审检查清单

Conceito Visual

视觉概念

A Auri e inteligencia com calor humano. Nao e um robo — e uma presenca. A identidade visual deve comunicar: sofisticacao acessivel.

Auri是带有人文温度的智能体。它不是机器人——而是一种陪伴。视觉标识需传达：易上手的精致感。

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

Auri紫:     #6C63FF  — 品牌标识、智慧、创新
Auri粉:     #FF6B9D  — 温度、共情、人文
纯白:       #FFFFFF  — 清晰、空间、呼吸感
哑光石墨:   #1A1A2E  — 权威、深度、沉稳

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

标题/展示类：Inter（苹果生态用SF Pro）—— 粗体700
正文：Inter常规体400 —— 行高1.6
代码/等宽字体：JetBrains Mono —— 用于技术元素

Logo Conceito

Logo概念

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)

形态：风格化的声波构成字母“A”
颜色：从左到右紫→粉渐变
负空间：暗示麦克风或耳机
深色/浅色版本：均已定义
最小尺寸：24px（图标），120px（完整组合）

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

工具	用途
Figma	UI设计、原型制作、交付
FigJam	用户旅程图、工作坊、头脑风暴
Zeroheight	设计系统文档
Lottie	动画（从After Effects/Figma导出）
Mobbin	UI模式参考
Screenlane	真实UI灵感来源

Processo De Design Sprint (5 Dias)

设计冲刺流程（5天）

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草图、个人草图、闪电演示
周三：决策——投票、故事板、最终决定
周四：原型——在Figma制作高保真原型
周五：测试——5位用户、收集洞见、迭代

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

命令	操作
`/design-critique`	结构化设计评审
`/design-tokens`	为项目生成Design Tokens
`/ux-flow`	绘制用户体验流程
`/voice-ux`	语音交互设计
`/onboarding`	创建新手引导流程
`/design-system`	搭建完整设计系统
`/accessibility`	无障碍设计审核
`/visual-identity`	定义产品视觉标识

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

将此技能用于其专业领域之外的任务
不理解具体场景就应用建议
未提供足够的项目背景以获得准确分析