Skill: ireact2code/ui-ux-pro-max-plus (version 1.0.0)

--- name: ui-ux-pro-max description: Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating beautiful, professional-grade user interfaces, selecting color schemes, choosing typography, designing data visualizations, or following modern UX best practices. Includes 50+ UI styles, 100+ color palettes, curated font pairings, chart selection guide, and comprehensive UX patterns. --- # UI UX Pro Max - 专业设计资源库 完整的 UI/UX 设计资源库，让 AI 生成的界面像专业设计师作品一样精美。 ## 何时使用此 Skill - 设计任何用户界面时需要专业参考 - 选择配色方案（品牌色、功能色、中性色） - 挑选字体组合（标题+正文） - 设计数据可视化图表 - 需要 UX 最佳实践指导 - 寻找特定行业/风格的设计灵感 ## 资源导航 | 资源类型 | 文件 | 内容 | |---------|------|------| | 🎨 **UI 风格库** | [references/ui-styles.md](references/ui-styles.md) | 50+ 种界面设计风格 | | 🌈 **配色方案** | [references/color-palettes.md](references/color-palettes.md) | 100+ 专业调色板 | | 🔤 **字体配对** | [references/typography.md](references/typography.md) | 精选字体组合 | | 📊 **图表类型** | [references/charts.md](references/charts.md) | 数据可视化指南 | | 📘 **UX 模式** | [references/ux-patterns.md](references/ux-patterns.md) | 用户体验最佳实践 | | 🎯 **组件库** | [references/components.md](references/components.md) | 常用组件设计规范 | ## 快速开始 ### 1. 确定设计风格 先读取 `references/ui-styles.md`，选择适合项目的设计风格： - SaaS/企业应用 → Minimalist / Corporate - 电商 → Modern E-commerce / Luxury - 创意作品 → Brutalist / Glassmorphism - 社交应用 → Neumorphism / Soft UI ### 2. 选择配色 读取 `references/color-palettes.md`，根据品牌调性选择： - 科技/专业 → Blue/Cyan 系列 - 自然/健康 → Green/Earth 系列 - 时尚/美妆 → Purple/Pink 系列 - 金融/法律 → Navy/Gray 系列 ### 3. 搭配字体 读取 `references/typography.md`： - 现代科技感 → Inter + JetBrains Mono - 优雅精致 → Playfair Display + Inter - 友好亲和 → Nunito + Open Sans ### 4. 应用 UX 模式 读取 `references/ux-patterns.md` 获取具体场景的交互模式。 ## 设计决策框架 ### 选择 UI 风格的 3 个问题 1. **目标用户是谁？** - 企业用户 → 简洁、专业、高效 - 年轻消费者 → 活泼、大胆、有趣 - 高端客户 → 精致、留白、质感 2. **产品类型是什么？** - 工具类 → 功能优先，清晰直观 - 内容类 → 阅读体验，排版优雅 - 社交类 → 情感连接，互动感强 3. **品牌调性如何？** - 创新先锋 → 尝试新风格（Glassmorphism） - 稳定可靠 → 经典风格（Material Design） - 独特个性 → 大胆风格（Brutalist） ### 配色选择矩阵 | 场景 | 主色 | 辅助色 | 强调色 | |-----|------|-------|-------| | 科技产品 | Blue-600 | Slate-500 | Cyan-400 | | 健康医疗 | Teal-600 | Gray-500 | Emerald-400 | | 金融科技 | Indigo-700 | Gray-600 | Amber-500 | | 电商零售 | Rose-600 | Gray-500 | Violet-500 | | 教育培训 | Violet-600 | Slate-500 | Yellow-400 | | 娱乐社交 | Fuchsia-600 | Gray-500 | Pink-500 | ## 实用技巧 ### Tailwind CSS 快速应用 ```css /* 配色示例 */ .bg-brand { @apply bg-blue-600; } .text-muted { @apply text-gray-500; } .border-accent { @apply border-cyan-400; } /* 字体示例 */ .font-heading { @apply font-display text-3xl font-bold; } .font-body { @apply font-sans text-base leading-relaxed; } ``` ### 响应式断点建议 ``` Mobile First: - 默认: 320px+ - sm: 640px+ - md: 768px+ - lg: 1024px+ - xl: 1280px+ ``` ### 间距系统 ```css /* 8px 基础倍数 */ space-1: 4px space-2: 8px space-3: 12px space-4: 16px space-6: 24px space-8: 32px space-12: 48px space-16: 64px ``` ## 专业提示 1. **不要混合太多风格** - 选择1种主风格，2-3个设计元素点缀 2. **颜色不超过5种** - 主色、辅助色、中性色、成功色、错误色 3. **字体最多2种** - 1种标题字体 + 1种正文字体 4. **留白是设计** - 不要害怕空白，它是呼吸空间 5. **一致性 > 创新** - 保持设计系统的一致性比追求独特更重要 ## 参考资源 - [UI Styles →](references/ui-styles.md) 选择界面风格 - [Color Palettes →](references/color-palettes.md) 选择配色方案 - [Typography →](references/typography.md) 选择字体配对 - [Charts →](references/charts.md) 选择图表类型 - [UX Patterns →](references/ux-patterns.md) 学习交互模式 - [Components →](references/components.md) 查看组件规范 --- **记住：** 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。

path: README.md
content: # UI UX Pro Max

**English** | [中文](#中文说明)

A comprehensive UI/UX design resource library for creating professional, beautiful user interfaces.

## 🎯 Overview

UI UX Pro Max is a curated collection of design resources that helps AI assistants generate professional-grade interfaces. It includes 50+ UI styles, 100+ color palettes, typography pairings, chart guidelines, UX patterns, and component specifications - all with Tailwind CSS code examples.

## 📦 What's Included

| Resource | File | Contents |
|----------|------|----------|
| 🎨 **UI Styles** | `references/ui-styles.md` | 50+ design styles (Minimalist, Glassmorphism, Brutalist, etc.) |
| 🌈 **Color Palettes** | `references/color-palettes.md` | 100+ professional color schemes with Tailwind classes |
| 🔤 **Typography** | `references/typography.md` | 20+ font pairings from Google Fonts |
| 📊 **Charts** | `references/charts.md` | Data visualization guide with when-to-use recommendations |
| 📘 **UX Patterns** | `references/ux-patterns.md` | Best practices for navigation, forms, feedback, etc. |
| 🎯 **Components** | `references/components.md` | Design system for buttons, inputs, cards, alerts, etc. |

## 🚀 Quick Start

When you need to design a UI, tell your AI assistant:

```
"Use ui-ux-pro-max skill to design a SaaS landing page with Minimalist style, 
Tech Blue color palette, and Inter font family"
```

The AI will automatically load relevant resources and generate professional designs.

## 💡 Usage Examples

### Design Style Selection
> "Design a dashboard using Glassmorphism style with dark mode"

### Color Palette
> "Use Indigo Night color scheme with amber accent"

### Typography
> "Heading with Space Grotesk, body with Inter"

### Chart Selection
> "Show monthly sales trend with area chart"

## 🎨 Design Categories

### UI Styles Include:
- **Modern Minimal**: Minimalist, Clean Tech, Corporate Modern
- **Creative Bold**: Brutalist, Maximalist, Y2K Revival
- **Skeuomorphic**: Neumorphism, Glassmorphism, Claymorphism
- **Industry-Specific**: Fintech, Health, E-commerce, EdTech
- **Artistic**: Editorial, Swiss Style, Japanese Minimal
- **Dark Mode**: Premium Dark, Cyberpunk, Dark Academia

### Color Palettes Include:
- **Tech/Business**: Tech Blue, Indigo Night, Ocean Breeze
- **Nature/Health**: Forest Sage, Mint Fresh, Wellness Sand
- **Creative/Fashion**: Purple Haze, Sunset Gradient, Cyber Purple
- **Food/Dining**: Tomato Fresh, Coffee Roast, Berry Smoothie
- **Finance/Legal**: Gold Standard, Law Firm Classic
- **Dark Mode**: Midnight Dark, Deep Ocean, Obsidian

## 🛠️ Technical Details

- **Framework**: Tailwind CSS
- **Font Source**: Google Fonts
- **Icons**: SVG/Inline (no dependencies)
- **License**: MIT

## 📄 File Structure

```
ui-ux-pro-max/
├── SKILL.md                      # Main entry point
├── README.md                     # Documentation (this file)
├── references/
│   ├── ui-styles.md              # 50+ design styles
│   ├── color-palettes.md         # 100+ color schemes
│   ├── typography.md             # 20+ font pairings
│   ├── charts.md                 # Chart type guide
│   ├── ux-patterns.md            # UX best practices
│   └── components.md             # Component specs
└── LICENSE                       # MIT License
```

## 🤝 Acknowledgments

This skill aggregates industry-standard design knowledge and best practices. Design principles, color theory, and UX patterns are publicly available knowledge in the design community.

Inspired by modern design resources and tools used by professional designers worldwide.

## 📜 License

MIT License - feel free to use, modify, and distribute.

---

# 中文说明

**中文** | [English](#ui-ux-pro-max)

一个全面的 UI/UX 设计资源库，用于创建专业、精美的用户界面。

## 🎯 简介

UI UX Pro Max 是一个精心整理的设计资源合集，帮助 AI 助手生成专业级界面。包含 50+ UI 风格、100+ 配色方案、字体配对、图表指南、UX 模式和组件规范——全部带有 Tailwind CSS 代码示例。

## 📦 包含内容

| 资源 | 文件 | 内容 |
|-----|------|------|
| 🎨 **UI 风格库** | `references/ui-styles.md` | 50+ 种设计风格 |
| 🌈 **配色方案** | `references/color-palettes.md` | 100+ 专业调色板 |
| 🔤 **字体配对** | `references/typography.md` | 20+ 字体组合 |
| 📊 **图表类型** | `references/charts.md` | 数据可视化指南 |
| 📘 **UX 模式** | `references/ux-patterns.md` | 最佳实践 |
| 🎯 **组件规范** | `references/components.md` | 组件设计系统 |

## 🚀 快速开始

当你需要设计 UI 时，告诉 AI 助手：

```
"使用 ui-ux-pro-max skill 帮我设计一个 SaaS 着陆页，
使用 Minimalist 风格、Tech Blue 配色、Inter 字体"
```

AI 会自动加载相关资源，生成专业的设计方案。

## 💡 使用示例

### 选择设计风格
> "用 Glassmorphism 风格设计一个暗黑模式仪表盘"

### 选择配色
> "使用 Indigo Night 配色，琥珀色作为强调色"

### 选择字体
> "标题用 Space Grotesk，正文用 Inter"

### 选择图表
> "用面积图展示月度销售趋势"

## 🎨 设计分类

### UI 风格包括：
- **现代极简**：极简主义、清爽科技、现代企业
- **创意大胆**：粗野主义、极繁主义、千禧复古
- **拟物化**：新拟态、玻璃拟态、粘土拟态
- **行业专属**：金融科技、健康医疗、电商、教育
- **艺术风格**：编辑/杂志、瑞士风格、日式极简
- **暗黑模式**：高级暗黑、赛博朋克、暗黑学院

### 配色方案包括：
- **科技/商务**：科技蓝、靛蓝之夜、海洋微风
- **自然/健康**：森林鼠尾草、薄荷清新、康养沙色
- **创意/时尚**：紫雾迷情、日落渐变、赛博紫
- **食品/餐饮**：番茄红、咖啡烘焙、莓果冰沙
- **金融/法律**：黄金标准、律所经典
- **暗黑模式**：午夜黑、深海、黑曜石

## 🛠️ 技术细节

- **框架**：Tailwind CSS
- **字体来源**：Google Fonts
- **图标**：SVG/内联（无依赖）
- **许可证**：MIT

## 📄 文件结构

```
ui-ux-pro-max/
├── SKILL.md                      # 主入口文档
├── README.md                     # 文档（本文件）
├── references/
│   ├── ui-styles.md              # 50+ 设计风格
│   ├── color-palettes.md         # 100+ 配色方案
│   ├── typography.md             # 20+ 字体配对
│   ├── charts.md                 # 图表类型指南
│   ├── ux-patterns.md            # UX 最佳实践
│   └── components.md             # 组件设计规范
└── LICENSE                       # MIT 许可证
```

## 🤝 致谢

本 skill 整合了行业标准的设计知识和最佳实践。设计原则、色彩理论和 UX 模式是设计界公开可用的知识。

灵感来源于全球专业设计师使用的现代设计资源和工具。

## 📜 许可证

MIT 许可证 - 可自由使用、修改和分发。

---

**Version**: 1.0.0  
**Author**: Based on OpenClaw Community  
**Created**: 2026-02-17


path: references/charts.md
content: # 图表类型指南 - 数据可视化参考

什么时候用什么图表，以及如何用 Tailwind CSS 实现专业效果。

---

## 📊 比较类图表

### 柱状图（Bar Chart）
**用途：** 比较不同类别的数值大小

**适合场景：**
- 销售额对比
- 用户数量对比
- 各渠道流量
- 成绩/分数对比

**设计要点：**
```
✅ 类别少于 12 个
✅ 从 0 开始 Y 轴
✅ 使用一致的颜色
✅ 添加数值标签
❌ 避免 3D 效果
```

**Tailwind 风格：**
```html
<div class="flex items-end gap-2 h-64">
  <div class="w-12 bg-blue-500 rounded-t" style="height: 60%"></div>
  <div class="w-12 bg-blue-500 rounded-t" style="height: 80%"></div>
  <div class="w-12 bg-blue-500 rounded-t" style="height: 45%"></div>
</div>
```

---

### 分组柱状图（Grouped Bar）
**用途：** 比较多个维度在同一类别下的数值

**适合场景：**
- 不同年份各季度对比
- 多产品各渠道销售
- 男女比例对比

---

### 堆叠柱状图（Stacked Bar）
**用途：** 显示整体和部分的关系，同时比较整体大小

**适合场景：**
- 收入构成分析
- 用户来源分布
- 预算分配

---

## 📈 趋势类图表

### 折线图（Line Chart）
**用途：** 显示数据随时间的变化趋势

**适合场景：**
- 股价走势
- 网站流量趋势
- 气温变化
- 用户增长曲线

**设计要点：**
```
✅ 时间轴从左到右
✅ 多条线用不同颜色
✅ 关键节点添加标记
✅ 平滑曲线或直线视场景而定
❌ 类别过多（最多 4-5 条线）
```

**Tailwind 实现思路：**
```html
<svg class="w-full h-64" viewBox="0 0 400 200">
  <!-- 网格线 -->
  <line x1="0" y1="50" x2="400" y2="50" class="stroke-gray-200" />
  <!-- 数据线 -->
  <path d="M0,150 Q100,100 200,80 T400,50" 
        fill="none" 
        stroke="currentColor" 
        class="text-blue-500 stroke-2" />
  <!-- 数据点 -->
  <circle cx="200" cy="80" r="4" class="fill-blue-500" />
</svg>
```

---

### 面积图（Area Chart）
**用途：** 强调数量随时间的累积变化

**适合场景：**
- 累计用户增长
- 市场份额变化
- 收入累积

---

###  sparkline（迷你图）
**用途：** 在表格或卡片中显示趋势

**适合场景：**
- 股票列表
- KPI 卡片
- 表格内嵌趋势

---

## 🥧 占比类图表

### 饼图（Pie Chart）
**用途：** 显示各部分占整体的比例

**适合场景：**
- 市场份额
- 预算分配
- 用户构成

**设计要点：**
```
✅ 类别 2-6 个
✅ 按大小排序（顺时针）
✅ 百分比标签清晰
✅ 使用协调的配色
❌ 类别过多
❌ 大小差异太小
```

---

### 环形图（Donut Chart）
**用途：** 饼图的变体，中间可显示总计

**优势：**
- 中间可放总数
- 可同时显示多个环
- 更现代的外观

**Tailwind 风格：**
```html
<div class="relative w-48 h-48">
  <svg class="w-full h-full transform -rotate-90">
    <circle cx="96" cy="96" r="80" 
            fill="none" 
            stroke="#e2e8f0" 
            stroke-width="20" />
    <circle cx="96" cy="96" r="80" 
            fill="none" 
            stroke="#3b82f6" 
            stroke-width="20"
            stroke-dasharray="251 377"
            class="transition-all" />
  </svg>
  <div class="absolute inset-0 flex items-center justify-center">
    <span class="text-2xl font-bold">67%</span>
  </div>
</div>
```

---

### 堆叠面积图（100% Stacked Area）
**用途：** 显示各部分占比随时间的变化

**适合场景：**
- 市场份额变化趋势
- 用户构成变化

---

## 🎯 分布类图表

### 散点图（Scatter Plot）
**用途：** 显示两个变量之间的关系

**适合场景：**
- 身高体重关系
- 广告投入 vs 销售额
- 温度 vs 冰淇淋销量

**设计要点：**
```
✅ 添加趋势线
✅ 悬停显示详情
✅ 处理重叠点
✅ 坐标轴标签清晰
```

---

### 气泡图（Bubble Chart）
**用途：** 散点图的扩展，增加第三个维度（大小）

**适合场景：**
- 国家数据（GDP, 人口, 寿命）
- 产品分析（价格, 销量, 利润率）

---

### 直方图（Histogram）
**用途：** 显示数据分布频率

**适合场景：**
- 年龄分布
- 成绩分布
- 收入分布

**与柱状图区别：**
- 直方图：连续数据，柱子相连
- 柱状图：离散类别，柱子分离

---

## 🗺️ 地理类图表

### 地图（Choropleth Map）
**用途：** 在地理区域上显示数据

**适合场景：**
- 全国销售分布
- 全球用户分布
- 各州选举结果

**设计要点：**
```
✅ 使用渐变色表示数值
✅ 提供图例
✅ 支持缩放/平移
✅ 点击显示详情
```

---

### 热力图（Heatmap）
**用途：** 用颜色密度显示数据强度

**适合场景：**
- 网站点击热力图
- 时间序列热力图（日历）
- 相关性矩阵

---

## 📋 其他专用图表

### 漏斗图（Funnel Chart）
**用途：** 显示流程中各阶段的转化率

**适合场景：**
- 销售漏斗
- 招聘流程
- 用户注册转化

---

### 仪表盘（Gauge Chart）
**用途：** 显示单一数值在范围内的位置

**适合场景：**
- KPI 完成度
- 满意度评分
- 系统状态

---

### 甘特图（Gantt Chart）
**用途：** 显示项目时间线

**适合场景：**
- 项目管理
- 排期计划
- 任务依赖

---

### 词云（Word Cloud）
**用途：** 显示文本数据中词频

**适合场景：**
- 用户反馈分析
- 标签展示
- 情感分析

---

### 树状图（Treemap）
**用途：** 用嵌套矩形显示层级数据

**适合场景：**
- 文件系统大小
- 预算层级
- 市场份额层级

---

## 🎨 图表设计系统

### 配色方案

**单色系（单变量）：**
```css
chart-100: #dbeafe
chart-200: #93c5fd
chart-300: #3b82f6
chart-400: #2563eb
```

**分类色（多变量）：**
```css
category-1: #3b82f6  /* 蓝 */
category-2: #10b981  /* 绿 */
category-3: #f59e0b  /* 黄 */
category-4: #ef4444  /* 红 */
category-5: #8b5cf6  /* 紫 */
category-6: #ec4899  /* 粉 */
```

**语义色：**
```css
positive: #10b981  /* 增长/良好 */
negative: #ef4444  /* 下降/警告 */
neutral:  #6b7280  /* 持平/中性 */
```

---

### 尺寸规范

```
小型图表（卡片内）: 200-300px 宽
中型图表（侧边栏）: 400-600px 宽
大型图表（全宽）:   100% 容器宽
图表高度:           宽度 × 0.6 (黄金比例)
```

---

### 响应式处理

```html
<div class="w-full overflow-x-auto">
  <div class="min-w-[600px]">
    <!-- 图表内容 -->
  </div>
</div>
```

---

## 📱 图表选择决策树

```
你要展示什么？
│
├── 比较数值 → 柱状图
│   ├── 多个类别 → 分组柱状图
│   └── 部分整体 → 堆叠柱状图
│
├── 显示趋势 → 折线图
│   ├── 强调总量 → 面积图
│   └── 小空间 → Sparkline
│
├── 显示占比 → 饼图/环形图
│   └── 时间变化 → 堆叠面积图
│
├── 显示关系 → 散点图
│   └── 三个变量 → 气泡图
│
├── 显示分布 → 直方图/箱线图
│
└── 地理数据 → 地图/热力图
```

---

## 🛠️ 推荐工具

| 工具 | 类型 | 适用场景 |
|-----|-----|---------|
| Chart.js | 开源库 | 快速实现标准图表 |
| D3.js | 开源库 | 自定义复杂可视化 |
| Recharts | React | React 项目 |
| ECharts | 开源库 | 中文场景、大数据 |
| Highcharts | 商业 | 企业级应用 |

---

## 💡 设计原则

1. **选择合适的图表类型** - 不要为了好看而用复杂图表
2. **保持简洁** - 删除不必要的网格线、装饰
3. **颜色有意义** - 使用颜色传达信息，不只是装饰
4. **添加标签** - 图表必须能独立理解
5. **响应式设计** - 移动端体验同样重要
6. **可访问性** - 考虑色盲用户，提供替代文本

---

**记住：** 最好的图表是让人一眼就能看懂数据的图表。


path: references/color-palettes.md
content: # 配色方案库 - 100+ 专业调色板

按场景分类的配色方案，包含 Tailwind CSS 类名和十六进制色值。

---

## 🔵 科技/商务系列

### Tech Blue（科技蓝）
```css
/* 主色调 */
primary-50:  #eff6ff  /* blue-50 */
primary-100: #dbeafe  /* blue-100 */
primary-200: #bfdbfe  /* blue-200 */
primary-300: #93c5fd  /* blue-300 */
primary-400: #60a5fa  /* blue-400 */
primary-500: #3b82f6  /* blue-500 */
primary-600: #2563eb  /* blue-600 - 主色 */
primary-700: #1d4ed8  /* blue-700 */
primary-800: #1e40af  /* blue-800 */
primary-900: #1e3a8a  /* blue-900 */

/* 中性色 */
gray-50:  #f8fafc
gray-100: #f1f5f9
gray-200: #e2e8f0
gray-300: #cbd5e1
gray-400: #94a3b8
gray-500: #64748b
gray-600: #475569
gray-700: #334155
gray-800: #1e293b
gray-900: #0f172a

/* 语义色 */
success: #10b981  /* emerald-500 */
warning: #f59e0b  /* amber-500 */
error:   #ef4444  /* red-500 */
info:    #06b6d4  /* cyan-500 */
```
**适用：** SaaS、企业应用、开发者工具

---

### Indigo Night（靛蓝之夜）
```css
primary:   #4f46e5  /* indigo-600 */
secondary: #818cf8  /* indigo-400 */
accent:    #f59e0b  /* amber-500 */
background:#f8fafc
surface:   #ffffff
text:      #1e293b
muted:     #64748b
```
**适用：** 金融科技、数据分析、B2B平台

---

### Ocean Breeze（海洋微风）
```css
primary:   #0891b2  /* cyan-600 */
secondary: #22d3ee  /* cyan-400 */
accent:    #0ea5e9  /* sky-500 */
background:#ecfeff
surface:   #ffffff
text:      #164e63
muted:     #0e7490
```
**适用：** 健康应用、生活类App、清新品牌

---

## 🟢 自然/健康系列

### Forest Sage（森林鼠尾草）
```css
primary:   #059669  /* emerald-600 */
secondary: #34d399  /* emerald-400 */
accent:    #fbbf24  /* amber-400 */
background:#f0fdf4
surface:   #ffffff
text:      #064e3b
muted:     #047857

/* 扩展色 */
leaf:      #65a30d  /* lime-600 */
earth:     #92400e  /* amber-800 */
sand:      #fef3c7  /* amber-100 */
```
**适用：** 有机食品、健康医疗、环保品牌

---

### Mint Fresh（薄荷清新）
```css
primary:   #14b8a6  /* teal-500 */
secondary: #5eead4  /* teal-300 */
accent:    #f97316  /* orange-500 */
background:#f0fdfa
surface:   #ffffff
text:      #134e4a
muted:     #0d9488
```
**适用：** 个人护理、口腔护理、清洁产品

---

### Wellness Sand（康养沙色）
```css
primary:   #78716c  /* stone-500 */
secondary: #a8a29e  /* stone-400 */
accent:    #14b8a6  /* teal-500 */
background:#fafaf9
surface:   #ffffff
text:      #44403c
muted:     #a8a29e

/* 自然色系 */
sage:      #84a98c
clay:      #d4a373
linen:     #faedcd
cream:     #fefae0
```
**适用：** 瑜伽、冥想、Spa、生活方式

---

## 🟣 创意/时尚系列

### Purple Haze（紫雾迷情）
```css
primary:   #7c3aed  /* violet-600 */
secondary: #a78bfa  /* violet-400 */
accent:    #ec4899  /* pink-500 */
background:#f5f3ff
surface:   #ffffff
text:      #2e1065
muted:     #6d28d9
```
**适用：** 创意机构、时尚品牌、美妆产品

---

### Sunset Gradient（日落渐变）
```css
/* 渐变主色 */
gradient-start: #f97316  /* orange-500 */
gradient-mid:   #db2777  /* pink-600 */
gradient-end:   #7c3aed  /* violet-600 */

/* 辅助色 */
background: #fff7ed
surface:    #ffffff
text:       #431407
muted:      #9a3412
```
**适用：** 社交媒体、年轻品牌、娱乐应用

---

### Cyber Purple（赛博紫）
```css
primary:   #a855f7  /* purple-500 */
secondary: #22d3ee  /* cyan-400 */
accent:    #fbbf24  /* amber-400 */
background:#0f0720
surface:   #1e1b4b
text:      #faf5ff
muted:     #a855f7
```
**适用：** 游戏、科技、夜生活应用

---

## 🔴 食品/餐饮系列

### Tomato Fresh（番茄红）
```css
primary:   #dc2626  /* red-600 */
secondary: #f87171  /* red-400 */
accent:    #16a34a  /* green-600 */
background:#fef2f2
surface:   #ffffff
text:      #7f1d1d
muted:     #dc2626

/* 食品色系 */
cheese:    #fbbf24
lettuce:   #22c55e
meat:      #7f1d1d
```
**适用：** 餐饮、外卖、食品包装

---

### Coffee Roast（咖啡烘焙）
```css
primary:   #78350f  /* amber-900 */
secondary: #b45309  /* amber-700 */
accent:    #10b981  /* emerald-500 */
background:#fffbeb
surface:   #ffffff
text:      #451a03
muted:     #92400e

/* 咖啡色系 */
espresso:  #292524  /* stone-800 */
latte:     #d6d3d1  /* stone-300 */
cream:     #fafaf9  /* stone-50 */
```
**适用：** 咖啡品牌、烘焙店、手工食品

---

### Berry Smoothie（莓果冰沙）
```css
primary:   #db2777  /* pink-600 */
secondary: #f472b6  /* pink-400 */
accent:    #84cc16  /* lime-500 */
background:#fdf2f8
surface:   #ffffff
text:      #831843
muted:     #db2777
```
**适用：** 饮品店、甜品、健康轻食

---

## 🟡 金融/法律系列

### Gold Standard（黄金标准）
```css
primary:   #1e3a8a  /* blue-900 */
secondary: #64748b  /* slate-500 */
accent:    #d97706  /* amber-600 */
background:#f8fafc
surface:   #ffffff
text:      #0f172a
muted:     #64748b

/* 金融色系 */
gold:      #fbbf24
platinum:  #e2e8f0
wealth:    #15803d
```
**适用：** 银行、投资、保险、高端服务

---

### Law Firm Classic（律所经典）
```css
primary:   #1e293b  /* slate-800 */
secondary: #475569  /* slate-600 */
accent:    #991b1b  /* red-800 */
background:#f1f5f9
surface:   #ffffff
text:      #020617
muted:     #64748b
```
**适用：** 律师事务所、会计事务所、咨询

---

## ⚫ 暗黑模式系列

### Midnight Dark（午夜黑）
```css
background: #030712  /* gray-950 */
surface:    #111827  /* gray-900 */
primary:    #3b82f6  /* blue-500 */
secondary:  #60a5fa  /* blue-400 */
accent:     #22d3ee  /* cyan-400 */
text:       #f9fafb  /* gray-50 */
muted:      #6b7280  /* gray-500 */
border:     #374151  /* gray-700 */
```
**适用：** 开发者工具、媒体应用、游戏

---

### Deep Ocean（深海）
```css
background: #0c4a6e  /* sky-900 */
surface:    #075985  /* sky-800 */
primary:    #38bdf8  /* sky-400 */
secondary:  #7dd3fc  /* sky-300 */
accent:     #f472b6  /* pink-400 */
text:       #f0f9ff  /* sky-50 */
muted:      #7dd3fc  /* sky-300 */
```
**适用：** 海洋主题、科技感、沉浸体验

---

### Obsidian（黑曜石）
```css
background: #09090b  /* zinc-950 */
surface:    #18181b  /* zinc-900 */
primary:    #a855f7  /* purple-500 */
secondary:  #c084fc  /* purple-400 */
accent:     #22c55e  /* green-500 */
text:       #fafafa  /* zinc-50 */
muted:      #71717a  /* zinc-500 */
```
**适用：** 高端产品、神秘品牌、游戏

---

## 🎨 特殊场景配色

### Accessibility High Contrast（高对比无障碍）
```css
/* WCAG AAA 标准 */
background: #ffffff
text:       #000000
primary:    #005fcc
success:    #008000
warning:    #ff8c00
error:      #d90000
```
**适用：** 政府网站、无障碍要求严格的应用

---

### Kids Playful（儿童活泼）
```css
primary:   #f59e0b  /* amber-500 */
secondary: #ec4899  /* pink-500 */
tertiary:  #8b5cf6  /* violet-500 */
quaternary:#10b981  /* emerald-500 */
background:#fffbeb
surface:   #ffffff
text:      #451a03
```
**适用：** 儿童应用、教育游戏、玩具品牌

---

### Monochrome Elegant（单色优雅）
```css
/* 只用灰度 */
black:     #000000
dark:      #171717
gray-800:  #262626
gray-700:  #404040
gray-600:  #525252
gray-500:  #737373
gray-400:  #a3a3a3
gray-300:  #d4d4d4
gray-200:  #e5e5e5
gray-100:  #f5f5f5
white:     #ffffff

/* 唯一强调色 */
accent:    #dc2626  /* 红 */
```
**适用：** 时尚杂志、摄影集、高端品牌

---

## 💡 配色使用技巧

### 60-30-10 法则
```
60% - 主背景色（中性色）
30% - 次要色（主品牌色）
10% - 强调色（CTA、高亮）
```

### 深色模式配色技巧
1. 避免纯黑（#000），用深灰（#0f172a, #111827）
2. 降低饱和度（使用 400/500 而非 600/700）
3. 提高对比度但不刺眼
4. 使用色彩层级区分重要性

### 色彩心理学速查
| 颜色 | 情感联想 | 适用行业 |
|-----|---------|---------|
| 蓝 | 信任、专业 | 科技、金融、医疗 |
| 绿 | 自然、健康 | 环保、有机、健康 |
| 红 | 热情、紧急 | 食品、促销、警示 |
| 紫 | 奢华、创意 | 美妆、艺术、奢侈品 |
| 橙 | 活力、友好 | 娱乐、餐饮、年轻品牌 |
| 黑 | 高端、神秘 | 奢侈品、科技、夜生活 |

---

**工具推荐：**
- Coolors.co - 生成配色方案
- Huevy.app - 色彩调色
- WebAIM Contrast Checker - 对比度检查


path: references/components.md
content: # 组件设计规范

常用 UI 组件的设计规范，确保一致性。

---

## 🔘 按钮（Button）

### 尺寸规范

| 尺寸 | 高度 | 内边距 | 字体 |
|-----|-----|-------|-----|
| Small | 32px | px-3 py-1.5 | text-sm |
| Default | 40px | px-4 py-2 | text-base |
| Large | 48px | px-6 py-3 | text-lg |

### 样式变体

**主要按钮：**
```html
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg
               hover:bg-blue-700 
               active:bg-blue-800
               disabled:bg-gray-300 disabled:cursor-not-allowed
               transition-colors">
  主要操作
</button>
```

**次要按钮：**
```html
<button class="border border-gray-300 bg-white text-gray-700 
               px-4 py-2 rounded-lg
               hover:bg-gray-50
               active:bg-gray-100">
  次要操作
</button>
```

**危险按钮：**
```html
<button class="bg-red-600 text-white px-4 py-2 rounded-lg
               hover:bg-red-700">
  删除
</button>
```

**文字按钮：**
```html
<button class="text-blue-600 hover:text-blue-700 
               hover:underline px-2 py-1">
  了解更多
</button>
```

**图标按钮：**
```html
<button class="p-2 rounded-lg hover:bg-gray-100 
               text-gray-600 hover:text-gray-900">
  <svg class="w-5 h-5"><!-- 图标 --></svg>
</button>
```

---

## 📥 输入框（Input）

### 基础输入框
```html
<div class="space-y-1">
  <label class="text-sm font-medium text-gray-700">
    邮箱地址
  </label>
  <input type="email" 
         placeholder="[REDACTED_SECRET]"
         class="w-full px-3 py-2 border border-gray-300 rounded-lg
                focus:outline-none focus:ring-2 focus:ring-blue-500 
                focus:border-transparent
                placeholder:text-gray-400" />
</div>
```

### 带图标输入框
```html
<div class="relative">
  <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-400">
    <!-- 搜索/邮件图标 -->
  </svg>
  <input class="w-full pl-10 pr-3 py-2 border rounded-lg" />
</div>
```

### 错误状态
```html
<div class="space-y-1">
  <label class="text-sm font-medium text-gray-700">邮箱</label>
  <input class="w-full px-3 py-2 border border-red-500 rounded-lg
                focus:ring-2 focus:ring-red-500" />
  <p class="text-sm text-red-600">请输入有效的邮箱地址</p>
</div>
```

---

## ☑️ 复选框与单选框

### 复选框
```html
<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" 
         class="w-4 h-4 rounded border-gray-300 
                text-blue-600 focus:ring-blue-500" />
  <span class="text-gray-700">记住我</span>
</label>
```

### 单选框组
```html
<div class="space-y-2">
  <label class="flex items-center gap-2">
    <input type="radio" name="plan" value="free"
           class="w-4 h-4 text-blue-600 focus:ring-blue-500" />
    <span>免费版</span>
  </label>
  <label class="flex items-center gap-2">
    <input type="radio" name="plan" value="pro"
           class="w-4 h-4 text-blue-600 focus:ring-blue-500" />
    <span>专业版</span>
  </label>
</div>
```

### 开关（Toggle）
```html
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 
              peer-focus:ring-blue-300 rounded-full peer
              peer-checked:after:translate-x-full 
              peer-checked:after:border-white
              after:content-[''] after:absolute after:top-0.5 
              after:left-[2px] after:bg-white after:border-gray-300 
              after:border after:rounded-full after:h-5 after:w-5 
              after:transition-all peer-checked:bg-blue-600">
  </div>
  <span class="ml-3 text-gray-700">启用通知</span>
</label>
```

---

## 📋 下拉选择（Select）

### 原生选择器
```html
<div class="space-y-1">
  <label class="text-sm font-medium">国家/地区</label>
  <select class="w-full px-3 py-2 border border-gray-300 rounded-lg
                 focus:ring-2 focus:ring-blue-500 focus:border-transparent
                 bg-white">
    <option value="">请选择</option>
    <option value="cn">中国</option>
    <option value="us">美国</option>
  </select>
</div>
```

### 自定义下拉（按钮式）
```html
<div class="relative">
  <button class="w-full px-3 py-2 border rounded-lg text-left 
                 flex justify-between items-center">
    <span>选择选项</span>
    <svg class="w-4 h-4"><!-- 箭头 --></svg>
  </button>
  <!-- 下拉菜单 -->
  <div class="absolute top-full mt-1 w-full bg-white border 
              rounded-lg shadow-lg z-10">
    <div class="py-1">
      <button class="w-full px-4 py-2 text-left hover:bg-gray-50">
        选项 1
      </button>
    </div>
  </div>
</div>
```

---

## 🃏 卡片（Card）

### 基础卡片
```html
<div class="bg-white rounded-lg shadow p-6">
  <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
  <p class="text-gray-600">卡片内容描述...</p>
</div>
```

### 带图片卡片
```html
<div class="bg-white rounded-lg shadow overflow-hidden">
  <img src="..." class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-lg font-semibold mb-2">标题</h3>
    <p class="text-gray-600 mb-4">描述...</p>
    <button class="text-blue-600 hover:underline">了解更多</button>
  </div>
</div>
```

### 统计卡片
```html
<div class="bg-white rounded-lg shadow p-6">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-gray-500 text-sm font-medium">总收入</h3>
    <span class="text-green-500 text-sm">↑ 12%</span>
  </div>
  <p class="text-3xl font-bold">¥48,290</p>
</div>
```

---

## 🔔 警告提示（Alert）

### 信息提示
```html
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
  <div class="flex items-start gap-3">
    <svg class="w-5 h-5 text-blue-600 mt-0.5"><!-- 图标 --></svg>
    <div>
      <h4 class="font-medium text-blue-900">提示</h4>
      <p class="text-blue-700 text-sm mt-1">这是一条信息提示。</p>
    </div>
  </div>
</div>
```

### 成功提示
```html
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
  <div class="flex items-center gap-3">
    <svg class="w-5 h-5 text-green-600"><!-- 勾选图标 --></svg>
    <p class="text-green-800 font-medium">操作成功！</p>
  </div>
</div>
```

### 警告提示
```html
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
  <div class="flex items-start gap-3">
    <svg class="w-5 h-5 text-yellow-600 mt-0.5"><!-- 警告图标 --></svg>
    <div>
      <h4 class="font-medium text-yellow-900">注意</h4>
      <p class="text-yellow-700 text-sm mt-1">请检查您的输入。</p>
    </div>
  </div>
</div>
```

### 错误提示
```html
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
  <div class="flex items-start gap-3">
    <svg class="w-5 h-5 text-red-600 mt-0.5"><!-- 错误图标 --></svg>
    <div>
      <h4 class="font-medium text-red-900">出错了</h4>
      <p class="text-red-700 text-sm mt-1">无法连接到服务器。</p>
    </div>
  </div>
</div>
```

---

## 🎴 徽章（Badge）

```html
<!-- 默认 -->
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">
  标签
</span>

<!-- 状态徽章 -->
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">
  ● 活跃
</span>

<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs">
  ● 待处理
</span>

<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">
  ● 已停止
</span>

<!-- 数字徽章 -->
<span class="px-2 py-0.5 bg-blue-600 text-white rounded-full text-xs font-medium">
  12
</span>
```

---

## 📊 进度条

### 线性进度条
```html
<div class="w-full bg-gray-200 rounded-full h-2">
  <div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div>
</div>
```

### 带标签进度条
```html
<div class="space-y-2">
  <div class="flex justify-between text-sm">
    <span class="text-gray-600">进度</span>
    <span class="text-gray-900 font-medium">60%</span>
  </div>
  <div class="w-full bg-gray-200 rounded-full h-2">
    <div class="bg-blue-600 h-2 rounded-full transition-all" 
         style="width: 60%"></div>
  </div>
</div>
```

### 步骤进度条
```html
<div class="flex items-center">
  <div class="flex items-center">
    <div class="w-8 h-8 rounded-full bg-blue-600 text-white 
                flex items-center justify-center text-sm font-medium">1</div>
    <div class="w-16 h-1 bg-blue-600"></div>
  </div>
  <div class="flex items-center">
    <div class="w-8 h-8 rounded-full bg-blue-600 text-white 
                flex items-center justify-center text-sm font-medium">2</div>
    <div class="w-16 h-1 bg-gray-300"></div>
  </div>
  <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-600 
              flex items-center justify-center text-sm font-medium">3</div>
</div>
```

---

## 🗂️ 标签页（Tabs）

### 水平标签
```html
<div class="border-b">
  <nav class="flex gap-6">
    <button class="pb-2 border-b-2 border-blue-600 text-blue-600 font-medium">
      全部
    </button>
    <button class="pb-2 border-b-2 border-transparent text-gray-500 
                   hover:text-gray-700">
      活跃
    </button>
    <button class="pb-2 border-b-2 border-transparent text-gray-500 
                   hover:text-gray-700">
      归档
    </button>
  </nav>
</div>
```

### 胶囊标签
```html
<div class="flex gap-2 p-1 bg-gray-100 rounded-lg">
  <button class="px-4 py-1.5 bg-white rounded-md shadow text-sm font-medium">
    日
  </button>
  <button class="px-4 py-1.5 text-gray-600 hover:text-gray-900 text-sm">
    周
  </button>
  <button class="px-4 py-1.5 text-gray-600 hover:text-gray-900 text-sm">
    月
  </button>
</div>
```

---

## 🧭 导航

### 面包屑
```html
<nav class="flex items-center gap-2 text-sm">
  <a href="/" class="text-gray-500 hover:text-gray-700">首页</a>
  <span class="text-gray-400">/</span>
  <a href="/products" class="text-gray-500 hover:text-gray-700">产品</a>
  <span class="text-gray-400">/</span>
  <span class="text-gray-900">详情</span>
</nav>
```

### 分页
```html
<div class="flex items-center gap-2">
  <button class="px-3 py-1 border rounded hover:bg-gray-50">上一页</button>
  <button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
  <button class="px-3 py-1 border rounded hover:bg-gray-50">2</button>
  <button class="px-3 py-1 border rounded hover:bg-gray-50">3</button>
  <span class="text-gray-400">...</span>
  <button class="px-3 py-1 border rounded hover:bg-gray-50">10</button>
  <button class="px-3 py-1 border rounded hover:bg-gray-50">下一页</button>
</div>
```

---

## 📝 设计令牌（Design Tokens）

### 圆角
```
rounded-none:  0px
rounded-sm:    2px
rounded:       4px
rounded-md:    6px
rounded-lg:    8px
rounded-xl:    12px
rounded-2xl:   16px
rounded-3xl:   24px
rounded-full:  9999px
```

### 阴影
```
shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow:      0 1px 3px 0 rgb(0 0 0 / 0.1)
shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1)
shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1)
shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1)
```

### 间距
```
基础单位: 4px (0.25rem)

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
```

---

**记住：** 组件的一致性 = 品牌的专业性。


path: references/typography.md
content: # 字体配对指南 - 精选字体组合

专业设计师推荐的字体搭配，包含 Google Fonts 链接和 Tailwind CSS 配置。

---

## 🎯 现代无衬线组合

### Inter + Inter（单一字体家族）
```css
/* 最简单、最安全的选择 */
font-family: 'Inter', sans-serif;

/* 字重使用 */
font-thin:       100
font-extralight: 200
font-light:      300
font-normal:     400
font-medium:     500
font-semibold:   600
font-bold:       700
font-extrabold:  800
font-black:      900

/* 使用建议 */
标题: font-bold text-4xl tracking-tight
正文: font-normal text-base leading-relaxed
```
**适用：** 科技产品、SaaS、数据仪表盘
**Google Fonts：** `https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap`

---

### Inter + JetBrains Mono（科技风）
```css
/* 标题 */
font-heading: 'Inter', sans-serif;
font-bold text-3xl tracking-tight;

/* 正文 */
font-body: 'Inter', sans-serif;
font-normal text-base leading-7;

/* 代码/数据 */
font-mono: 'JetBrains Mono', monospace;
font-mono text-sm;
```
**适用：** 开发者工具、技术文档、代码编辑器
**Google Fonts：**
- Inter: `family=Inter:wght@400;500;600;700`
- JetBrains Mono: `family=JetBrains+Mono:wght@400;500`

---

### Plus Jakarta Sans + Plus Jakarta Sans（几何现代）
```css
font-family: 'Plus Jakarta Sans', sans-serif;

/* 特点：几何感强，比 Inter 更有性格 */
标题: font-extrabold text-4xl
正文: font-normal text-base
```
**适用：** 创业公司、现代品牌、创意机构

---

## 📚 衬线+无衬线经典组合

### Playfair Display + Inter（编辑/杂志）
```css
/* 标题 - 优雅衬线 */
font-heading: 'Playfair Display', serif;
font-bold text-5xl leading-tight;

/* 正文 - 清晰无衬线 */
font-body: 'Inter', sans-serif;
font-normal text-lg leading-8;

/* 副标题 */
font-subheading: 'Playfair Display', serif;
font-medium text-2xl italic;
```
**适用：** 博客、杂志、时尚品牌、奢华产品
**特点：** 高端、优雅、有文化底蕴

---

### Cormorant Garamond + Open Sans（精致文艺）
```css
/* 标题 */
font-heading: 'Cormorant Garamond', serif;
font-semibold text-4xl;

/* 正文 */
font-body: 'Open Sans', sans-serif;
font-normal text-base leading-7;
```
**适用：** 文学网站、艺术画廊、婚礼策划

---

### Libre Baskerville + Source Sans Pro（经典阅读）
```css
/* 标题 */
font-heading: 'Libre Baskerville', serif;
font-bold text-3xl;

/* 正文 - 特别优化屏幕阅读 */
font-body: 'Source Sans Pro', sans-serif;
font-normal text-lg leading-8;
```
**适用：** 长文章、新闻网站、电子书

---

## 😊 友好亲和组合

### Nunito + Nunito（圆润可爱）
```css
font-family: 'Nunito', sans-serif;

/* 特点：圆角笔画，友好亲和 */
标题: font-extrabold text-4xl
正文: font-normal text-base
```
**适用：** 儿童应用、教育平台、生活方式

---

### Quicksand + Open Sans（现代友好）
```css
/* 标题 */
font-heading: 'Quicksand', sans-serif;
font-bold text-3xl;

/* 正文 */
font-body: 'Open Sans', sans-serif;
font-normal text-base;
```
**适用：** 健康应用、健身平台、个人品牌

---

### Fredoka + Varela Round（活泼有趣）
```css
/* 标题 - 非常有个性 */
font-heading: 'Fredoka', sans-serif;
font-semibold text-4xl;

/* 正文 */
font-body: 'Varela Round', sans-serif;
font-normal text-base;
```
**适用：** 游戏、儿童产品、娱乐应用

---

## 💼 企业专业组合

### Roboto + Roboto（Material Design 标准）
```css
font-family: 'Roboto', sans-serif;

/* Google 标准 */
标题: font-medium text-3xl
正文: font-normal text-base tracking-wide
```
**适用：** Android 应用、企业系统、工具类

---

### Work Sans + Work Sans（清晰专业）
```css
font-family: 'Work Sans', sans-serif;

/* 特点：优化的数字显示 */
标题: font-semibold text-4xl
正文: font-normal text-base
数据: font-medium text-sm tabular-nums
```
**适用：** 金融应用、数据密集产品

---

### IBM Plex Sans + IBM Plex Mono（企业技术）
```css
/* 标题 */
font-heading: 'IBM Plex Sans', sans-serif;
font-semibold text-3xl;

/* 正文 */
font-body: 'IBM Plex Sans', sans-serif;
font-normal text-base;

/* 代码 */
font-mono: 'IBM Plex Mono', monospace;
```
**适用：** 企业服务、技术文档、IBM 风格

---

## 🎨 创意独特组合

### Space Grotesk + Space Grotesk（几何现代）
```css
font-family: 'Space Grotesk', sans-serif;

/* 特点：几何感、略带复古未来感 */
标题: font-bold text-5xl tracking-tight
正文: font-normal text-lg
```
**适用：** 创意机构、设计作品集、科技品牌

---

### Clash Display + Inter（大胆现代）
```css
/* 标题 - 非常有冲击力 */
font-heading: 'Clash Display', sans-serif;
font-semibold text-6xl uppercase;

/* 正文 */
font-body: 'Inter', sans-serif;
font-normal text-base;
```
**适用：** 时尚品牌、海报、着陆页
**注意：** Clash Display 不在 Google Fonts，需从 Fontshare 获取

---

### Bebas Neue + Montserrat（海报风格）
```css
/* 标题 - 全大写、超粗 */
font-heading: 'Bebas Neue', sans-serif;
font-normal text-7xl uppercase tracking-wide;

/* 正文 */
font-body: 'Montserrat', sans-serif;
font-normal text-base;
```
**适用：** 着陆页、海报、大标题设计

---

## 🌏 中日韩字体组合

### Noto Sans SC + Noto Sans SC（中文标准）
```css
font-family: 'Noto Sans SC', sans-serif;

/* 思源黑体，最安全的跨平台选择 */
标题: font-bold text-3xl
正文: font-normal text-base leading-7
```
**适用：** 所有中文产品

---

### Noto Serif SC + Noto Sans SC（中文衬线）
```css
/* 标题 - 思源宋体 */
font-heading: 'Noto Serif SC', serif;
font-bold text-3xl;

/* 正文 - 思源黑体 */
font-body: 'Noto Sans SC', sans-serif;
font-normal text-base leading-8;
```
**适用：** 文化类、文学类中文网站

---

## 📏 字体大小系统

### 桌面端（标准）
```
Hero:     48-72px / font-bold / line-height: 1.1
H1:       36-48px / font-bold / line-height: 1.2
H2:       30-36px / font-semibold / line-height: 1.25
H3:       24-30px / font-semibold / line-height: 1.3
H4:       20-24px / font-medium / line-height: 1.4
Body:     16-18px / font-normal / line-height: 1.6-1.75
Small:    14px / font-normal / line-height: 1.5
Caption:  12px / font-normal / line-height: 1.5
```

### 移动端调整
```
Hero:     32-40px
H1:       28-32px
H2:       24-28px
H3:       20-24px
Body:     16px
```

---

## 🎯 按场景推荐

| 场景 | 标题字体 | 正文字体 |
|-----|---------|---------|
| **科技/SaaS** | Inter, Plus Jakarta Sans | Inter |
| **金融/企业** | Work Sans, IBM Plex Sans | Work Sans |
| **时尚/杂志** | Playfair Display | Inter |
| **博客/阅读** | Libre Baskerville | Source Sans Pro |
| **创意/设计** | Space Grotesk | Inter |
| **教育/儿童** | Nunito, Fredoka | Nunito |
| **工具/效率** | Inter, Roboto | Inter |
| **奢华/高端** | Cormorant Garamond | Open Sans |

---

## 💡 字体使用技巧

### 性能优化
```html
<!-- 只加载需要的字重 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- 使用 font-display: swap 防止 FOIT -->
<style>
  @font-face {
    font-family: 'Inter';
    font-display: swap;
    /* ... */
  }
</style>
```

### 回退字体栈
```css
/* 西文 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* 中文 */
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

/* 等宽 */
font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
```

### 排版细节
```css
/* 更好的文字渲染 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字等宽（表格用） */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* 小型大写字母（装饰用） */
.small-caps {
  font-variant-caps: small-caps;
}
```

---

**记住：** 字体是设计的声音。衬线=传统/优雅，无衬线=现代/简洁，圆体=友好/亲和。


path: references/ui-styles.md
content: # UI 风格库 - 50+ 专业界面设计风格

按使用场景分类的设计风格参考，每个风格包含：视觉特征、适用场景、技术实现要点。

---

## 🟦 现代极简系列

### 1. Minimalist（极简主义）
**视觉特征：**
- 大量留白（60%+）
- 单色或双色配色
- 无装饰元素
- 精细的排版层次

**适用场景：**
- SaaS 产品
- 企业官网
- 作品集网站

**代表产品：** Linear, Notion, Stripe

**Tailwind 配置：**
```css
/* 颜色 */
primary: slate-900
background: white
muted: slate-500

/* 间距 */
section-padding: py-24
container: max-w-5xl mx-auto px-6
```

---

### 2. Corporate Modern（现代企业）
**视觉特征：**
- 深蓝/海军蓝主色
- 几何图形装饰
- 网格布局
- 专业图标

**适用场景：**
- B2B 平台
- 金融服务
- 咨询公司

**配色：** Navy-800 + Slate-50 + Indigo-600

---

### 3. Clean Tech（科技清爽）
**视觉特征：**
- 青/蓝渐变
- 圆角设计
- 微妙阴影
- 玻璃拟态点缀

**适用场景：**
- 科技产品
- 开发者工具
- AI 应用

**配色：** Cyan-500 + Blue-600 + Gray-50

---

## 🟪 创意大胆系列

### 4. Brutalist（粗野主义）
**视觉特征：**
- 高对比度（黑黄/黑白）
- 大号无衬线字体
- 不对称布局
- 原始 HTML 感
- 故意的不完美

**适用场景：**
- 创意机构
- 设计师作品集
- 街头文化品牌

**技术要点：**
```css
font-family: 'Arial Black', sans-serif;
border: 3px solid black;
box-shadow: 4px 4px 0 black;
```

---

### 5. Maximalist（极繁主义）
**视觉特征：**
- 丰富色彩（4-6种）
- 多层叠加
- 图案纹理
- 装饰性字体
- 无留白

**适用场景：**
- 时尚品牌
- 娱乐内容
- 艺术展览

---

### 6. Y2K Revival（千禧复古）
**视觉特征：**
- 渐变背景（粉紫/蓝绿）
- 金属质感
- 像素字体
- 星星/闪光装饰
- 粗边框

**适用场景：**
- 音乐/娱乐
- 年轻消费群体
- 复古主题活动

---

## 🟨 拟物化系列

### 7. Neumorphism（新拟态）
**视觉特征：**
- 柔和的凸起/凹陷效果
- 同色系阴影（浅色背景）
- 圆润的形状
- 微妙的渐变

**适用场景：**
- 音乐播放器
- 计算器/工具应用
- 智能家居控制面板

**CSS 实现：**
```css
.neumorphic {
  background: #e0e5ec;
  box-shadow: 
    9px 9px 16px rgb(163,177,198,0.6),
    -9px -9px 16px rgba(255,255,255, 0.5);
  border-radius: 20px;
}
```

---

### 8. Glassmorphism（玻璃拟态）
**视觉特征：**
- 半透明背景（backdrop-blur）
- 鲜艳渐变背景
- 细边框 + 阴影
- 浮层感

**适用场景：**
- 仪表盘
- 卡片展示
- 现代应用

**Tailwind 实现：**
```html
<div class="bg-white/20 backdrop-blur-md 
            border border-white/30 
            rounded-2xl shadow-xl">
</div>
```

---

### 9. Claymorphism（粘土拟态）
**视觉特征：**
- 厚重圆润的形状
- 内外双层阴影
- 柔和的色彩
- 3D 感但扁平

**适用场景：**
- 儿童应用
- 游戏界面
- 友好型产品

---

## 🟩 行业专属系列

### 10. Fintech Modern（金融科技）
**视觉特征：**
- 深绿/深蓝主色
- 数据可视化优先
- 信任感设计（锁图标、安全标识）
- 清晰的信息层级

**配色：** Emerald-700 + Slate-800 + Amber-500

---

### 11. Health & Wellness（健康医疗）
**视觉特征：**
- 柔和的绿色/蓝色
- 自然元素（叶子、水滴）
- 呼吸感留白
- 亲和的圆角

**配色：** Teal-500 + Sage-400 + Cream-100

---

### 12. E-commerce Luxury（奢华电商）
**视觉特征：**
- 黑金/白金配色
- 大字体标题
- 高质量产品图
- 精致动画

**配色：** Black + Gold-400 + Gray-100

---

### 13. EdTech Friendly（教育科技）
**视觉特征：**
- 明亮友好的色彩
- 插图风格
- 进度指示
- 游戏化元素

**配色：** Violet-500 + Yellow-400 + Sky-400

---

## 🟥 艺术风格系列

### 14. Editorial（编辑/杂志）
**视觉特征：**
- 衬线字体标题
- 大图片
- 非对称布局
- 精致的排版

**适用场景：**
- 内容平台
- 博客
- 杂志网站

**字体配对：** Playfair Display + Source Sans Pro

---

### 15. Swiss Style（瑞士风格）
**视觉特征：**
- 网格系统
- 无衬线字体（Helvetica）
- 左对齐文字
- 几何图形
- 红/黑/白配色

**适用场景：**
- 海报设计
- 展览网站
- 文化机构

---

### 16. Japanese Minimal（日式极简）
**视觉特征：**
- 大量留白
- 自然材质感
- 手写体点缀
- 柔和的灰/米色
- 不对称平衡

**配色：** Stone-200 + WarmGray-800 + Red-700

---

## ⬜ 暗黑模式系列

### 17. Dark Mode Premium（高级暗黑）
**视觉特征：**
- 深灰背景（非纯黑）
- 高对比度文字
- 强调色点缀
- 微妙的发光效果

**配色：**
```
Background: #0f172a (slate-900)
Surface: #1e293b (slate-800)
Text: #f8fafc (slate-50)
Accent: #3b82f6 (blue-500)
```

---

### 18. Cyberpunk（赛博朋克）
**视觉特征：**
- 霓虹色彩（粉/青/紫）
- 黑色背景
- 故障艺术效果
- 科技字体
- 扫描线/网格

**配色：** Black + Cyan-400 + Fuchsia-500 + Yellow-400

---

### 19. Dark Academia（暗黑学院）
**视觉特征：**
- 深棕/墨绿
- 衬线字体
- 复古元素
- 书籍/蜡烛意象

**配色：** Amber-900 + Stone-800 + Orange-200

---

## 🟫 功能优先系列

### 20. Dashboard UI（仪表盘）
**视觉特征：**
- 卡片式布局
- 数据可视化
- 紧凑信息密度
- 状态指示器

**关键组件：**
- 统计卡片（KPI Cards）
- 折线/柱状图
- 数据表格
- 过滤器

---

### 21. Mobile-First Native（移动原生）
**视觉特征：**
- iOS/Android 设计规范
- 底部导航
- 手势操作提示
- 圆角卡片

**iOS 规范：**
- 圆角：10-20px
- 字体：SF Pro
- 间距：16px 标准

---

### 22. Command Palette（命令面板）
**视觉特征：**
- 深色浮层
- 搜索框置顶
- 快捷键提示
- 键盘导航

**代表产品：** VS Code, Raycast, Linear

---

## 🎨 快速选择指南

| 如果你需要... | 选择风格 |
|--------------|---------|
| 看起来专业可信 | Minimalist, Corporate Modern |
| 显得创新前沿 | Glassmorphism, Clean Tech |
| 吸引年轻用户 | Y2K, Maximalist |
| 展示创意个性 | Brutalist, Editorial |
| 金融/医疗类 | Fintech, Health & Wellness |
| 高端奢侈品 | E-commerce Luxury |
| 儿童/教育类 | Claymorphism, EdTech |
| 深色模式优先 | Dark Mode Premium |
| 数据密集型 | Dashboard UI |
| 强调效率工具 | Command Palette |

---

**提示：** 可以混合风格元素，但保持一致性。比如 Minimalist + Glassmorphism 卡片 = 现代清爽。


path: references/ux-patterns.md
content: # UX 模式库 - 用户体验最佳实践

经过验证的交互模式和设计模式，解决常见 UX 问题。

---

## 🚪 导航模式

### 顶部导航（Top Navigation）
**适用：** 网站、SaaS 产品

**结构：**
```
[Logo]  [主导航项 × 3-5]  [搜索]  [用户菜单]
```

**设计要点：**
- 导航项不超过 7 个
- 当前页面高亮显示
- 支持下拉菜单（二级导航）
- 移动端转为汉堡菜单

**Tailwind 实现：**
```html
<nav class="bg-white border-b px-6 py-4">
  <div class="max-w-7xl mx-auto flex items-center justify-between">
    <div class="flex items-center gap-8">
      <a href="/" class="text-xl font-bold">Logo</a>
      <div class="hidden md:flex items-center gap-6">
        <a href="/features" class="text-gray-600 hover:text-gray-900">功能</a>
        <a href="/pricing" class="text-gray-600 hover:text-gray-900">价格</a>
        <a href="/about" class="text-gray-600 hover:text-gray-900">关于</a>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <button class="md:hidden">☰</button>
      <button class="bg-blue-600 text-white px-4 py-2 rounded">开始使用</button>
    </div>
  </div>
</nav>
```

---

### 侧边导航（Sidebar Navigation）
**适用：** 仪表盘、管理系统

**结构：**
```
[Logo]
[首页]
[分析] →
[用户] →
[设置] →
------------
[用户头像 + 名称]
```

**设计要点：**
- 图标 + 文字标签
- 可折叠的子菜单
- 当前项高亮
- 底部放置用户区

---

### 标签导航（Tab Navigation）
**适用：** 内容分类、设置页面

**类型：**
- **水平标签：** 3-5 个，最常见
- **垂直标签：** 左侧，适合较多选项
- **下拉标签：** 移动端节省空间

---

## 📋 表单模式

### 表单布局

**单列布局（推荐）：**
```
[标签]
[输入框                    ]

[标签]
[输入框                    ]

[复选框] 选项说明

[提交按钮]
```

**设计要点：**
- 标签在输入框上方
- 标签与输入框间距 8px
- 输入框间距 24px
- 按钮与最后一个字段间距 32px

---

### 输入验证

**实时验证（推荐）：**
- 用户停止输入后验证
- 用颜色 + 图标表示状态
- 提供清晰的错误信息

```html
<div class="space-y-1">
  <label class="text-sm font-medium">邮箱</label>
  <input type="email" 
         class="w-full px-3 py-2 border rounded 
                focus:ring-2 focus:ring-blue-500
                invalid:border-red-500 invalid:text-red-600" />
  <p class="text-sm text-red-600">请输入有效的邮箱地址</p>
</div>
```

---

### 分步表单（Wizard）
**适用：** 复杂流程（注册、结账、配置）

**结构：**
```
[步骤1] → [步骤2] → [步骤3]
   ✓        ●         ○

[当前步骤内容]

[上一步]    [下一步]
```

**设计要点：**
- 显示进度（已完成/当前/待完成）
- 允许返回修改
- 显示步骤标题
- 最后一步确认汇总

---

## 🔔 反馈模式

### Toast 通知
**适用：** 操作成功/失败的轻量反馈

**位置：** 右上角或底部居中

**类型：**
```
✅ 成功 - 绿色
❌ 错误 - 红色
⚠️ 警告 - 黄色
ℹ️ 信息 - 蓝色
```

**行为：**
- 自动消失（3-5秒）
- 可手动关闭
- 支持操作按钮（撤销）

---

### Modal 对话框
**适用：** 需要用户确认或输入的打断式操作

**使用场景：**
- 删除确认
- 重要设置修改
- 表单提交确认

**设计要点：**
```
┌─────────────────────┐
│ 标题                │
│                     │
│ 内容说明...         │
│                     │
│ [取消]  [确认]      │
└─────────────────────┘
```

**实现：**
```html
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
    <h3 class="text-lg font-semibold mb-2">确认删除？</h3>
    <p class="text-gray-600 mb-6">此操作无法撤销。</p>
    <div class="flex justify-end gap-3">
      <button class="px-4 py-2 text-gray-600">取消</button>
      <button class="px-4 py-2 bg-red-600 text-white rounded">删除</button>
    </div>
  </div>
</div>
```

---

### 空状态（Empty State）
**适用：** 无数据时的友好提示

**结构：**
```
[插图/图标]
[标题：暂无数据]
[说明：开始创建你的第一个项目]
[操作按钮：创建项目]
```

**设计要点：**
- 不要只显示"暂无数据"
- 解释为什么会出现空状态
- 提供明确的下一步操作
- 使用友好的插图

---

### 加载状态

**骨架屏（Skeleton）：**
```html
<div class="animate-pulse">
  <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
  <div class="h-20 bg-gray-200 rounded mb-4"></div>
  <div class="h-20 bg-gray-200 rounded"></div>
</div>
```

**加载指示器：**
- 按钮内：Spinner
- 页面：进度条或骨架屏
- 列表：底部加载更多

---

## 🔍 搜索与筛选

### 搜索框

**基础版：**
```html
<div class="relative">
  <input type="text" 
         placeholder="搜索..."
         class="w-full pl-10 pr-4 py-2 border rounded-lg" />
  <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-400">
    <!-- 搜索图标 -->
  </svg>
</div>
```

**增强版（自动完成）：**
```
[搜索框：输入中...]
┌──────────────────┐
│ 🔍 建议项 1      │
│ 🔍 建议项 2      │
│ 🔍 建议项 3      │
│ ──────────────── │
│ 📋 最近搜索      │
└──────────────────┘
```

---

### 筛选器

**水平筛选栏：**
```
[全部] [活跃] [未激活] [已归档]        [筛选 ▼] [排序 ▼]
```

**筛选面板（侧边）：**
```
筛选
├── 状态
│   ☑ 活跃
│   ☐ 未激活
│
├── 日期
│   [开始] - [结束]
│
└── 类别
    ☑ A类
    ☑ B类
```

---

## 📱 数据展示

### 表格

**基础表格：**
```
┌──────────┬──────────┬──────────┬──────────┐
│ 姓名  ▼  │ 邮箱     │ 状态     │ 操作     │
├──────────┼──────────┼──────────┼──────────┤
│ 张三     │ [REDACTED_SECRET]  │ ● 活跃   │ 编辑 删除│
│ 李四     │ [REDACTED_SECRET]  │ ○ 未激活 │ 编辑 删除│
└──────────┴──────────┴──────────┴──────────┘
```

**设计要点：**
- 表头加粗 + 排序功能
- 行 hover 效果
- 斑马纹（可选）
- 操作列居右
- 支持横向滚动

---

### 卡片网格

**标准卡片：**
```
┌─────────────────┐
│ [图片]          │
│                 │
│ 标题            │
│ 描述文字...     │
│                 │
│ [标签]    [按钮]│
└─────────────────┘
```

**Tailwind 网格：**
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-6">
    <!-- 卡片内容 -->
  </div>
</div>
```

---

### 列表

**简单列表：**
```
• 列表项 1
• 列表项 2
• 列表项 3
```

**复杂列表（带头像）：**
```
┌──────────────────────────┐
│ [图] 标题           [操作]│
│      描述               │
├──────────────────────────┤
│ [图] 标题           [操作]│
│      描述               │
└──────────────────────────┘
```

---

## 🎯 操作模式

### 按钮层级

**主要按钮（Primary）：**
- 每个页面/区域只有一个
- 实心填充、品牌色
- 最重要的操作

**次要按钮（Secondary）：**
- 描边样式
- 次要操作

**文字按钮（Text）：**
- 无背景
- 低优先级操作
- 通常是"取消"、"了解更多"

```html
<!-- 主要 -->
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  保存
</button>

<!-- 次要 -->
<button class="border border-gray-300 px-4 py-2 rounded hover:bg-gray-50">
  取消
</button>

<!-- 文字 -->
<button class="text-blue-600 hover:underline">
  了解更多
</button>
```

---

### 下拉菜单

```
[触发按钮 ▼]
     │
     ▼
┌──────────┐
│ 选项 1   │
│ 选项 2   │
│ ──────── │
│ 危险操作 │
└──────────┘
```

---

### 悬浮操作按钮（FAB）
**适用：** 移动端主要操作

```html
<button class="fixed bottom-6 right-6 w-14 h-14 
               bg-blue-600 text-white rounded-full 
               shadow-lg flex items-center justify-center
               hover:bg-blue-700">
  +
</button>
```

---

## ♿ 可访问性模式

### 键盘导航
- 所有交互元素可聚焦
- Tab 顺序符合视觉顺序
- Enter/Space 激活按钮
- Esc 关闭模态框

### 焦点样式
```css
/* 明显的焦点指示器 */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
```

### 语义化 HTML
```html
<!-- 好的 -->
<nav>...</nav>
<main>...</main>
<button>...</button>
<label for="email">邮箱</label>
<input id="email" type="email" aria-describedby="email-error" />
<p id="email-error" role="alert">...</p>

<!-- 避免 -->
<div onclick="...">...</div>
```

---

## 📊 常见场景解决方案

### 登录/注册流程

**登录页：**
```
┌─────────────────────────┐
│        [Logo]           │
│                         │
│      欢迎回来            │
│                         │
│  邮箱                   │
│  [________________]     │
│                         │
│  密码                   │
│  [________________]     │
│  忘记密码？              │
│                         │
│  [    登 录    ]        │
│                         │
│  ──── 或使用 ────       │
│  [G] [GitHub]           │
│                         │
│  还没有账号？立即注册    │
└─────────────────────────┘
```

### 设置页面

**布局：**
```
┌────────┬────────────────┐
│ 账户   │ 账户信息       │
│ 安全   │ ─────────────  │
│ 通知   │ 详细设置...    │
│ 支付   │                │
│ ────── │ [保存更改]     │
│ 退出   │                │
└────────┴────────────────┘
```

---

## 💡 设计原则

1. **一致性** - 相同元素在不同页面表现一致
2. **反馈** - 每个操作都有响应
3. **容错** - 允许撤销，防止误操作
4. **简洁** - 每页只展示必要信息
5. **可预测** - 符合用户心理模型

---

**记住：** 好的 UX 是看不见的，用户不会注意到 UX，只会注意到体验是否顺畅。


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)