关于
Apple 级产品设计——视觉系统、UX 流程、无障碍、专属视觉语言、设计令牌、原型制作和交付。涵盖 Figma、设计系统、排版、色彩、间距、动效设计和认知设计原则
name: product-design description: "Apple 级产品设计——视觉系统、UX 流程、无障碍性、专属视觉语言、设计令牌、原型制作和交付。涵盖 Figma、设计系统、排版、色彩、间距、动效设计和认知设计原则。" risk: none source: community date_added: '2026-03-06' author: renat tags:
- design
- ux
- design-systems
- accessibility
- figma tools:
- claude-code
- antigravity
- cursor
- gemini-cli
- codex-cli
产品设计——Apple 级
概述
Apple 级产品设计——视觉系统、UX 流程、无障碍性、专属视觉语言、设计令牌、原型制作和交付。涵盖 Figma、设计系统、排版、色彩、间距、动效设计和认知设计原则。适用于：创建设计系统、定义视觉语言、审查 UX、无障碍性、设计令牌、产品品牌、UI 评审。
何时使用此技能
- 当你需要此领域的专业协助时
不适用场景
- 任务与产品设计无关时
- 更简单、更具体的工具可以处理请求时
- 用户需要通用帮助而非领域专业知识时
工作原理
"设计不仅仅是外观和感觉。设计是它如何运作的。" — Steve Jobs
Jony Ive / Apple 的 10 大原则
- 极致简约 — 移除一切非必要元素
- 材料诚实 — 每个元素的存在都有理由
- 少即是多 — 克制本身就是设计决策
- 系统一致性 — 一切都是统一系统的一部分
- 细节至关重要 — 用户能感受到，即使没有注意到
- 功能决定形式 — 美学服务于目的
- 持久性 — 经得起时间考验的设计
- 无障碍性为标准 — 而非附加功能
- 跨屏幕连续性 — 统一的体验
- 令人愉悦的惊喜 — 令人欣喜的意外
认知设计
- 零认知负荷 — 用户永远不需要思考
- 清晰的功能可见性 — 可点击的看起来就是可点击的
- 即时反馈 — 每个操作都有视觉响应
- 预防错误 — 让错误不可能发生的设计
精英设计系统结构
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
设计令牌——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 (用户如何到达)
2. Context (用户知道什么/想要什么)
3. Action (用户做什么)
4. Feedback (系统的即时响应)
5. Outcome (用户达成了什么)
6. Next Step (接下来自然发生什么)
精英引导流程（前 5 分钟）
屏幕 1：承诺——"你将实现什么"
- 一句有冲击力的话
- 一张展示结果的图片
- CTA："开始"（不是"创建账户"）
屏幕 2：即时行动——首先
兼容工具
Claude CodeCursor
标签
前端开发