名称： ui-ux-master
描述： 掌握 UI/UX 设计技能，融合苹果人机界面指南、现代网页设计模式、SuperDesign 原则和通用设计理念。适用于任何 UI/UX 设计任务，包括 iOS/macOS/网页应用、落地页、仪表盘、设计系统、无障碍访问、响应式布局、动画，以及为所有平台和框架创建美观、实用的界面。
终极设计技能，融合苹果人机界面指南、现代网页设计模式、SuperDesign 原则和通用用户体验最佳实践，旨在为所有平台创造卓越的用户体验。
1. 清晰胜过巧妙
- 信息层级一目了然
- 操作行为可预测
- 反馈即时
- 非必要时隐藏复杂性
2. 一致性孕育熟悉感
- 界面模式重复使用
- 术语统一
- 视觉语言连贯
- 尊重平台惯例
3. 简约之美
- 每个元素都有其目的
- 留白创造呼吸空间
- 视觉噪音最小化
- 细节精雕细琢
4. 无障碍访问不容妥协
- 适用于所有人，无论能力如何
- 支持键盘导航
- 屏幕阅读器友好
- 提供高对比度选项
完整的苹果 HIG 模式，请参阅 references/apple-platforms.md
苹果关键原则：
- 清晰： 文本易读，图标精确，装饰微妙
- 谦逊： 内容优先，界面不喧宾夺主
- 深度： 视觉层次，逼真动效，空间感知
适用场景： 原生 iOS、macOS、watchOS、tvOS 或 visionOS 应用
完整的网页设计模式，请参阅 references/web-design.md
网页关键原则：
- 响应式： 移动优先，适配所有屏幕
- 高性能： 快速加载，资源优化
- 渐进式： 随处可用，在可能的地方增强
- 语义化： 正确的 HTML 结构，无障碍标记
适用场景： 网站、网页应用、PWA、落地页、仪表盘
现代色彩系统：
- oklch() 色彩空间（感知均匀，现代）
- HSL 用于快速调整
- RGB/Hex 用于旧版兼容
语义化颜色：
/* 浅色/深色模式兼容 */
--primary: oklch(0.649 0.237 267);
--secondary: oklch(0.556 0 0);
--background: oklch(0.145 0 0); /* 深色 */
--foreground: oklch(0.985 0 0); /* 浅色文本 */
--muted: oklch(0.556 0 0 / 0.5);
--border: oklch(0.922 0 0 / 0.15);
避免使用：
- 通用的 Bootstrap 蓝色 (#007bff) - 过时
- 纯黑色 (#000000) - 使用深灰色
- 低对比度文本 (<4.5:1 对比度)
色彩指南：
关于调色板、对比度和色彩心理学，请参阅 references/color-systems.md
系统字体（推荐）：
- 苹果： SF Pro (iOS/macOS), SF Compact (watchOS)
- 网页： Inter, Outfit, DM Sans, Plus Jakarta Sans
- 等宽字体： JetBrains Mono, Fira Code, Geist Mono
- 后备字体： -apple-system, system-ui, sans-serif
字体比例：
大标题: 72px / 4.5rem
标题 1: 48px / 3rem
标题 2: 36px / 2.25rem
标题 3: 24px / 1.5rem
正文: 16px / 1rem
小号: 14px / 0.875rem
说明文字: 12px / 0.75rem
行高：
- 标题：1.2 - 1.3
- 正文：1.5 - 1.6
- 小号文本：1.4 - 1.5
字体搭配：
关于搭配规则和示例，请参阅 references/typography.md
8点网格系统：
- 基础单位：8px (0.5rem)
- 间距比例：8, 16, 24, 32, 40, 48, 56, 64, 80, 96
- 使用 4px 的倍数进行微调 (4, 12, 20, 28 等)
标准边距：
- 移动端：16px
- 平板：24px
- 桌面端：32-48px
- 最大宽度：1200-1400px
组件间距：
XS: 4px - 紧密组合（图标+文本）
S: 8px - 相关项
M: 16px - 标准间距
L: 24px - 区块间距
XL: 32px - 主要区块
2XL: 48px - 页面区块
布局模式：
关于网格、弹性盒和响应式模式，请参阅 references/layout-patterns.md
层级：
1. 主要按钮： 填充，强调色，主要操作
2. 次要按钮： 描边或着色，辅助操作
3. 三级按钮： 幽灵/纯文本，最不突出
状态：
- 默认
- 悬停（上浮或颜色变化）
- 激活（按下，缩小）
- 禁用（降低不透明度，无交互）
- 加载中（旋转器，禁用）
尺寸：
- 小：32-36px 高度
- 中：40-44px 高度（默认）
- 大：48-56px 高度
最佳实践：
- 最小 44×44px 触摸目标（移动端）
- 清晰、面向操作的标签（用“保存更改”而非“确定”）
- 异步操作显示加载状态
- 图标+文本以增强清晰度
输入框：
- 清晰的标签位于字段上方
- 占位符作为提示，而非标签
- 可见的焦点状态
- 内联验证
- 错误信息靠近字段
- 成功状态
字段尺寸：
- 单行：40-48px 高度
- 文本区域：80-120px 最小高度
- 宽度匹配预期输入长度
表单布局：
- 单列以求简洁
- 分组相关字段
- 渐进式呈现（按需展示复杂性）
- 保存按钮在底部，清除/取消为次要操作
最佳实践：
关于验证模式和可访问性，请参阅 references/forms.md
构成：
- 边框圆角：8-12px（现代），0px（粗野主义）
- 内边距：16-24px
- 阴影：微妙，最多 1-2 层
- 背景：略高于页面
类型：
- 扁平： 无阴影，仅边框
- 立体： 微妙阴影
- 交互式： 悬停上浮，可点击
- 玻璃态： 模糊+透明度
内容：
- 顶部图片/图标（可选）
- 标题（标题层级）
- 描述/正文
- 底部操作
模式：
- 顶部导航： 全局，持久（网页）
- 标签栏： 3-5 个主要部分（移动端）
- 侧边栏： 复杂应用，可折叠（桌面端）
- 汉堡菜单： 移动端后备方案，尽量避免
- 面包屑： 层级位置
移动端导航：
- 底部标签栏（拇指友好）
- 汉堡菜单用于溢出项
- 带返回按钮的固定头部
桌面端导航：
- 顶部栏或侧边栏
- 下拉菜单用于层级
- 搜索功能突出
请参阅 references/navigation-patterns.md
持续时间：
- 快速： 100-200ms（按钮按下，悬停）
- 标准： 200-400ms（过渡，面板）
- 慢速： 400-600ms（页面过渡，复杂动画）
缓动函数：
- ease-out： 大多数动画（快速开始，缓慢结束）
- ease-in： 退出（缓慢开始，加速）
- ease-in-out： 平衡（平滑开始和结束）
- spring： 自然，有趣（CSS 或 JS 弹簧效果）
动画原则：
1. 预备动作： 暗示即将发生的变化
2. 跟随与重叠： 动作自然完成
3. 连续性： 元素平滑过渡
4. 响应性： 对交互的即时反馈
微交互：
按钮: 150ms [scale: 1→0.95→1] (按下)
悬停: 200ms [translateY: 0→-2px] + 阴影↗
淡入: 400ms [opacity: 0→1, translateY: 20→0]
滑入: 300ms [translateX: -100%→0]
减少动效：
- 提供淡入淡出替代方案
- 尊重 prefers-reduced-motion
- 仅保留必要的动画
完整的动画模式，请参阅 references/animation-guide.md
设计策略：
- 同时测试两种模式
- 使用语义化颜色（自动适配）
- 通过轻微提亮来提升表面
- 避免纯黑色 (#000)，使用深灰色
颜色映射：
/* 浅色模式 */
--background: oklch(1 0 0);
--surface: oklch(0.98 0 0);
--text: oklch(0.15 0 0);
/* 深色模式 */
--background: oklch(0.145 0 0);
--surface: oklch(0.205 0 0);
--text: oklch(0.985 0 0);
配方：
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}
适用场景：
- 叠加层（模态框，工具提示）
- 导航栏
- 丰富背景上的卡片
- 现代、高级感
避免：
- 过度使用（变得花哨）
- 性能敏感的场景
- 浏览器支持不足
特征：
- 硬阴影 (4px 4px 0 black)
- 大胆、饱和的色彩
- 黑色边框 (2-3px)
- 零边框圆角
- 原始、未经打磨的美学
适用场景：
- 有趣、有创意的品牌
- 面向年轻用户的产品
- 艺术/设计作品集
- 从“干净”的极简主义中脱颖而出
更多趋势，请参阅 references/design-trends.md
断点：
移动端: < 640px
平板: 640px - 1024px
桌面端: 1024px - 1440px
宽屏: > 1440px
移动优先策略：
/* 基础：移动端 */
.container { padding: 16px; }
/* 平板 */
@media (min-width: 640px) {
.container { padding: 24px; }
}
/* 桌面端 */
@media (min-width: 1024px) {
.container {
padding: 32px;
max-width: 1200px;
margin: 0 auto;
}
}
响应式模式：
- 堆叠 → 侧边栏： 移动端单列，桌面端侧边栏
- 网格列： 1 → 2 → 3 → 4 列
- 隐藏/显示： 渐进式呈现
- 重新排序： 优先级随屏幕尺寸变化
请参阅 references/responsive-design.md
AA 级（最低要求）：
- ✅ 普通文本对比度 4.5:1
- ✅ 大文本对比度 3:1 (18pt+)
- ✅ 键盘可导航
- ✅ 焦点指示器可见
- ✅ 图片有替代文本
- ✅ 表单有标签
AAA 级（理想）：
- ✅ 普通文本对比度 7:1
- ✅ 大文本对比度 4.5:1
- ✅ 无纯音频内容
- ✅ 增强的焦点指示器
最佳实践：
- 语义化 HTML (<nav>, <main>, <article>)
- 需要时使用 ARIA 标签 (aria-label, aria-labelledby)
- 逻辑化的标题层级 (h1 → h2 → h3)
- 跳过导航链接
- 宣布动态内容 (aria-live)
基本要求：
- Tab 顺序逻辑化
- 焦点可见（轮廓线或自定义样式）
- Enter 键激活按钮/链接
- Escape 键关闭模态框
- 箭头键用于列表/菜单
prefers-reduced-motion完整的 WCAG 检查清单，请参阅 references/accessibility.md
完整列表，请参阅 references/tools-resources.md
ASCII 线框图：
┌─────────────────────────────────────┐
│ 页头 / 导航栏 │
├─────────────────────────────────────┤
│ │
│ 主视觉区 │
│ (标题 + 行动号召) │
│ │
├─────────────────────────────────────┤
│ 功能 │ 功能 │ 功能 │
│ 卡片 │ 卡片 │ 卡片 │
├─────────────────────────────────────┤
│ 页脚 │
└─────────────────────────────────────┘
详细流程，请参阅 references/design-workflow.md
选择颜色？
→