UI Design System Skill

📋 背景与设计哲学

核心定位

本 Skill 专注于生成大厂级别、Pinterest 审美、高级简约的 UI 界面。参考标准：

• Google Material Design 3 — 色彩系统、动效原则、组件规范
• Apple Human Interface Guidelines — 空间设计、排版节奏、细腻质感
• Fluent Design (Microsoft) — Acrylic 材质、深度层次
• Pinterest / Dribbble 高赞设计 — 视觉张力、留白美学、色彩大胆

设计价值观

> "少即是多，但每一处都要有意图"

• 克制的奢华：不是堆砌，而是精准取舍
• 系统性思维：每个组件都来自同一设计语言
• 情绪传达：界面有温度，有性格，不是功能机器
• 细节决定品质：阴影、圆角、间距都是设计语言

🎯 触发后的工作流程

Step 1: 需求分析（必须先做）

分析以下维度，在回复前先梳理清楚：

用途分类:
├── 生成新UI    → 执行「UI Generation Protocol」
├── 优化现有UI  → 执行「UI Audit & Optimization Protocol」
└── 组件设计    → 执行「Component Design Protocol」

产品类型:
├── Mobile App (iOS/Android 风格)
├── Web App / Dashboard
├── Landing Page / Marketing
├── Admin / B端系统
└── 创意/作品集页面

必须明确的信息（缺失时主动询问或合理假设并说明）：

• 产品定位（面向谁？解决什么问题？）
• 品牌调性（科技感/温暖/奢华/年轻/专业？）
• 主色倾向（有偏好色系，或给我自由发挥）
• 交付格式（HTML/CSS、React/JSX、SVG 原型图）

🎨 色彩系统参考体系

参考「谷歌 Material You」调色板生成规则

Tonal Palette 结构：

Primary   → 品牌主色，用于关键操作和焦点元素
Secondary → 辅助色，用于标签、图标、次要按钮
Tertiary  → 对比色，用于强调差异化内容
Neutral   → 灰阶体系，背景/表面/文字层级
Error     → 错误/警告状态色

推荐高级色板（可直接使用）：

Apple HIG 间距系统

/* 参考 Apple 8pt 网格系统 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;   /* 标准间距 */
--space-5: 20px;
--space-6: 24px;   /* 组件内间距 */
--space-8: 32px;   /* 区块间距 */
--space-10: 40px;
--space-12: 48px;  /* 大区块间距 */
--space-16: 64px;  /* 页面级间距 */
--space-24: 96px;

📐 排版系统

字体层级（参考 Apple SF / Google 字体）

/* 优先使用有个性的字体组合 */

/* 选项 A: 科技感 */
--font-display: 'Space Grotesk', 'DM Sans';
--font-body: 'Inter', system-ui;

/* 选项 B: 人文优雅 */
--font-display: 'Playfair Display', 'Cormorant';
--font-body: 'Source Serif 4', Georgia;

/* 选项 C: 现代极简 */
--font-display: 'Syne', 'Outfit';
--font-body: 'Manrope', sans-serif;

/* 选项 D: 中文友好 */
--font-display: 'Noto Serif SC', serif;
--font-body: 'Noto Sans SC', sans-serif;

/* Type Scale (参考 Material 3) */
--type-display-large: clamp(40px, 5vw, 57px) / 1.12;
--type-display-medium: clamp(32px, 4vw, 45px) / 1.16;
--type-headline-large: clamp(24px, 3vw, 32px) / 1.25;
--type-headline-medium: clamp(20px, 2.5vw, 28px) / 1.29;
--type-title-large: 22px / 1.27;
--type-title-medium: 16px / 1.5;
--type-body-large: 16px / 1.5;
--type-body-medium: 14px / 1.43;
--type-label-large: 14px / 1.43;
--type-label-small: 11px / 1.45;

🧩 组件设计规范

卡片组件（Card）

/* 参考 Material 3 Card Variants */
.card-elevated {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.06), 
              0px 4px 16px rgba(0,0,0,.08);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card-elevated:hover {
  box-shadow: 0px 4px 8px rgba(0,0,0,.08),
              0px 12px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.card-filled {
  background: var(--surface-variant);
  border-radius: 12px;
  border: none;
}

.card-outlined {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--outline-variant);
}

按钮系统（Button）

/* Apple + Material 融合规范 */
.btn-primary {
  height: 44px;              /* Apple HIG 最小触控尺寸 */
  padding: 0 24px;
  border-radius: 10px;       /* Apple 风格圆角 */
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all 150ms ease;
}

/* 按钮层级: Filled > Filled Tonal > Outlined > Text > Icon */

.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

输入框（Input）

/* Material 3 风格输入框 */
.input-outlined {
  height: 56px;
  border: 1.5px solid var(--outline);
  border-radius: 4px;
  padding: 16px;
  transition: border-color 200ms;
}
.input-outlined:focus {
  border-color: var(--primary);
  border-width: 2px;
}

/* Apple 风格输入框 */
.input-apple {
  height: 44px;
  background: rgba(120,120,128,0.12);
  border: none;
  border-radius: 10px;
  padding: 0 16px;
}

✨ 动效与交互规范

动效曲线（参考 Apple Spring 和 Material Motion）

/* Apple 弹性曲线 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Material 标准曲线 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* 强调曲线 */
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
/* 快入慢出 */  
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
/* 慢入快出 */
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

/* 时长规范 */
--duration-short1: 50ms;
--duration-short2: 100ms;
--duration-short3: 150ms;
--duration-short4: 200ms;   /* 微交互 */
--duration-medium1: 250ms;
--duration-medium2: 300ms;  /* 标准转场 */
--duration-long1: 350ms;
--duration-long2: 400ms;    /* 复杂动画 */
--duration-extra-long: 600ms+; /* 页面级切换 */

必须实现的微交互

• Hover 状态：背景色变化 + 轻微位移
• Active 状态：轻压效果 (scale 0.97)
• Focus 状态：清晰的焦点环（无障碍必须）
• Loading 状态：骨架屏或脉冲动画
• 页面加载：元素交错淡入 (stagger delay)

🏗️ UI Generation Protocol（生成新 UI）

执行顺序

1. 定义设计 DNA — 确定调性、主色、字体组合
2. 建立 CSS 变量体系 — 完整的 token 系统
3. 搭建布局骨架 — Grid/Flex 响应式结构
4. 实现核心组件 — 从最重要的交互元素开始
5. 添加视觉质感 — 渐变、阴影、纹理、背景
6. 注入微交互 — 动效、过渡、Hover 状态
7. 精调细节 — 间距、对齐、字重、行高
8. 响应式适配 — Mobile First

代码规范

<!-- 必须包含的 meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 结构原则 -->
<!-- 1. CSS Variables 在 :root 统一定义 -->
<!-- 2. 组件用 BEM 或语义化命名 -->
<!-- 3. 响应式用 clamp() 而非 media query 断点堆叠 -->
<!-- 4. 动画性能优先用 transform/opacity -->

🔍 UI Audit & Optimization Protocol（优化现有 UI）

分析维度（拿到现有 UI 后，必须从这 6 个维度审查）

1. 视觉层级

• [ ] 是否有清晰的信息优先级？
• [ ] 用户视线路径是否顺畅？
• [ ] 重要信息是否足够突出？

2. 色彩系统

• [ ] 色彩对比度是否达标（WCAG AA: 4.5:1 文字）？
• [ ] 颜色使用是否一致、有系统性？
• [ ] 是否存在色彩混乱或过多颜色？

3. 排版质量

• [ ] 字体层级是否清晰（最多 3 个层级）？
• [ ] 行高/字间距是否舒适？
• [ ] 字体选择是否与品牌调性匹配？

4. 间距与对齐

• [ ] 是否遵循基准网格（4pt 或 8pt）？
• [ ] 组件内外间距是否统一？
• [ ] 元素对齐是否精准？

5. 组件一致性

• [ ] 相同功能的组件样式是否统一？
• [ ] 交互状态是否完整（默认/Hover/Active/Disabled）？
• [ ] 圆角、阴影是否系统化？

6. 现代感与审美

• [ ] 是否有过时的 UI 模式（阴影过重、渐变廉价）？
• [ ] 是否有 Pinterest 级别的视觉吸引力？
• [ ] 留白是否足够、有设计感？

优化输出格式

## UI 审查报告

### 🎯 核心问题（3-5个最重要的）
1. [问题描述] → [具体改进建议]

### 🎨 设计升级方案
[输出改进后的完整代码]

### 📊 改进对比
Before: [原方案问题]
After: [改进后效果]

🎪 Component Design Protocol（单组件设计）

适用于：按钮、卡片、导航栏、表单、Modal、Toast、Tab、Chip 等单一组件。

输出标准：

• 包含所有状态（Default / Hover / Active / Focus / Disabled / Loading）
• 提供 Dark Mode 变体
• 包含使用示例
• 代码直接可用，不需要额外依赖（除非用户指定框架）

🌟 高质量 UI 的标志性特征

参考 Pinterest 高赞、Dribbble 精选的共同特征：

必须具备

1. 清晰的焦点 — 每个页面只有一个最重要的视觉中心
2. 呼吸感 — 足够的留白，不拥挤
3. 色彩自信 — 不是"安全"的配色，而是有个性的
4. 字体有品位 — 不用默认字体，字重搭配有对比
5. 圆角有度 — 统一的圆角半径，不乱用
6. 阴影克制 — 一两层精准的阴影，不堆叠
7. 动效有意义 — 每个动画都在传达信息

绝对避免

• 彩虹色渐变按钮
• 廉价 box-shadow（0 4px 8px rgba(0,0,0,0.5) 这种）
• 全大写 + 粗体 + 红色 的"重要提示"
• 16 种以上颜色同时出现
• 响应式断点堆叠（用 clamp 代替）
• 图标和文字对不齐
• 移动端点击区域小于 44px

📦 参考文件

需要深度参考时，读取以下文件：

• references/color-systems.md — 完整色彩系统参考（Material 3, Apple, 自定义）
• references/component-patterns.md — 高质量组件代码片段库
• references/layout-templates.md — 常见页面布局模板（Dashboard, Landing, App）
• references/animation-library.md — 精选动效代码库

⚡ 快速决策树

用户给了设计稿/截图要优化？
  → 执行 UI Audit Protocol，先分析问题，再输出改进版本

用户要从零生成界面？
  → 问清楚用途和调性，选择色板，执行 Generation Protocol

用户只需要某个组件？
  → 执行 Component Protocol，输出所有状态变体

用户没说清楚要什么？
  → 询问：① 是什么产品 ② 大概什么风格 ③ 要 HTML 还是 React