product-design

Name: product-design
Author: sickn33

github.com/sickn33设计与 UI48.9k170 次安装今天更新

代码仓库

关于 product-design

面向产品设计工作的技能，覆盖设计系统、用户体验流程、视觉语言、无障碍和原型交付。适用于设计师或产品团队进行设计评审、定义设计令牌及规划交互体验。

主要功能

01构建设计系统与设计令牌
02规划用户体验流程和引导体验
03评审界面与无障碍设计
04定义产品视觉识别
05设计语音交互

适用场景

01为产品建立视觉规范和组件体系
02检查界面对比度与键盘可用性
03梳理入门流程或语音体验

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill product-design

安装后在 Claude Code 中输入/product-design确认已加载。

详细介绍

PRODUCT DESIGN — Nivel Apple

概述

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

何时使用此技能

需要此领域的专业协助时

何时不应使用此技能

任务与产品设计无关
更简单、更具体的工具即可处理请求
用户需要通用协助，不需要领域专业知识

工作原理

“设计不只是外观和感受。设计关乎它如何运作。” — Steve Jobs

受 Apple 设计启发的 10 条启发式原则

以下列表是编辑性总结，并非 Jony Ive 或 Apple 官方发布的清单。下方的 Auri tokens 是品牌示例；请根据现有品牌形象进行调整，测试实际对比度，并兼顾减少动态效果设置、键盘操作和屏幕阅读器。

极致简约 — 删除所有非必要元素
材质诚实 — 每个元素的存在都有理由
少即是多 — 克制本身也是一种设计决策
系统一致性 — 一切都属于同一个系统
细节至关重要 — 用户即使没有注意到，也能感受到
形式由功能决定 — 美学服务于目的
经久耐用 — 历久弥新的设计
默认无障碍 — 而非额外选项
跨屏幕连续性 — 统一的体验
令人愉悦的惊喜 — 意料之外的惊喜

认知设计

零认知负荷 — 用户不应该需要思考
清晰的可供性 — 可点击的元素看起来就像可点击
即时反馈 — 每个操作都有视觉响应
预防错误 — 通过设计避免错误

顶级设计系统的结构

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

设计 Tokens — 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)"
  }
}

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)

顶级引导流程（前 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]"

令人愉悦的空状态

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

语音 UI 的独特原则

零视觉负荷 — 用户看不到任何内容（只能听到）
轻松撤销 — 始终可以“撤销”
确认可选 — 仅用于不可逆操作
回应多样化 — 不要两次使用同一句话
沉默也没问题 — 等待 2s 后再询问是否需要帮助

语音回应结构

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

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

建设性评审框架

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"

UI 评审清单

视觉概念

Auri 代表有温度的人类智能。它不是机器人，而是一种陪伴。视觉形象应传达：触手可及的精致感。

主色板

Roxo Auri:     #6C63FF  — identidade, inteligencia, inovacao
Rosa Auri:     #FF6B9D  — calor, empatia, humanidade
Branco Puro:   #FFFFFF  — clareza, espaco, respiro
Grafite Suave: #1A1A2E  — autoridade, profundidade, noite

字体排版

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 概念

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)

设计工具栈

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

设计冲刺流程（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. 命令

命令	操作
`/design-critique`	对设计进行结构化评审
`/design-tokens`	为项目生成 token
`/ux-flow`	梳理体验流程
`/voice-ux`	语音交互设计
`/onboarding`	创建新手引导流程
`/design-system`	构建完整的设计系统
`/accessibility`	无障碍审计
`/visual-identity`	定义产品视觉识别

最佳实践

提供关于你的项目和需求的清晰、具体的上下文
在将建议应用到生产代码之前，先审查所有建议
与其他互补技能结合使用，以获得全面的分析

常见陷阱

将此技能用于其专业领域之外的任务
在不理解你具体上下文的情况下直接应用建议
未提供足够的项目上下文，导致分析不准确

限制

仅当任务明确符合上述范围时，才使用此技能。
不要将输出视为针对特定环境的验证、测试或专家评审的替代品。
如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。

支持 Markdown

登录后评论