描述：从Dribbble和设计社区研究最新的UI/UX趋势。在启动设计项目时使用，以了解当前的视觉趋势、调色板和布局模式。允许工具：

mcp__claude-in-chrome__tabs_context_mcp
mcp__claude-in-chrome__tabs_create_mcp
mcp__claude-in-chrome__navigate
mcp__claude-in-chrome__computer
mcp__claude-in-chrome__read_page
mcp__claude-in-chrome__get_page_text

趋势研究员

研究来自Dribbble和其他设计社区的当前UI/UX设计趋势，为设计决策提供信息。

目的

在设计之前，了解设计界正在流行什么。此技能帮助：

识别流行的视觉风格和美学
发现调色板趋势
学习字体设计方法
查看实际应用的布局模式
避免过时或过度使用的样式

工作流程

步骤1：导航到Dribbble

访问热门作品页面：

https://dribbble.com/shots/popular/web-design
https://dribbble.com/shots/popular/mobile

步骤2：截图和分析

对于每个页面：

截取当前视图的屏幕截图
向下滚动并截取更多屏幕截图（2-3次滚动）
分析可见设计以了解：
- 主要色彩方案
- 字体设计风格（衬线与非衬线、字重、间距）
- 布局模式（网格、卡片、全出血等）
- 动画/动效指示器
- UI元素样式（按钮、卡片、导航）

步骤3：识别模式

寻找重复出现的主题：

色彩趋势

哪些主要颜色出现最多？
亮色与暗色模式偏好？
渐变使用模式？
强调色选择？

字体设计趋势

显示字体：粗体、紧凑、装饰性？
正文字体：简洁无衬线、可读衬线？
字重趋势：重、轻、混合？
间距：紧凑、宽松、戏剧性？

布局趋势

使用的网格系统
空白使用
卡片与全截面布局
导航模式

UI元素趋势

按钮样式（圆角、锐角、轮廓）
卡片设计（阴影、边框、扁平）
图标样式（轮廓、填充、动画）

步骤4：生成报告

创建结构化趋势报告：

## UI/UX趋势报告 - [日期]

### 主要视觉趋势
1. **[趋势名称]**: [描述，包括具体观察到的示例]
2. **[趋势名称]**: [描述，包括具体观察到的示例]
3. **[趋势名称]**: [描述，包括具体观察到的示例]

### 色彩趋势
- **主要颜色趋势**: [观察到的十六进制代码]
- **背景方法**: [亮色/暗色/渐变模式]
- **强调色**: [流行强调色选择]

### 字体设计趋势
- **标题样式**: [关于显示字体的观察]
- **正文文本**: [可读字体选择]
- **字重趋势**: [重/轻/混合]

### 布局模式
1. **[模式]**: [描述 + 在哪里看到]
2. **[模式]**: [描述 + 在哪里看到]

### 应避免的元素
- [过时模式1]
- [过度使用样式1]

### 推荐方向
基于此分析，建议：[感觉新鲜的美学方向]

替代来源

如果Dribbble不可用，检查：

https://www.awwwards.com/websites/ - 获奖网站
https://www.behance.net/galleries/ui-ux - Behance UI/UX
https://www.siteinspire.com/ - 精选网站灵感

备用模式

如果浏览器工具不可用：

注意趋势研究需要浏览器访问
建议用户分享屏幕截图或描述他们喜欢的网站
参考知识库中的一般当前趋势：
- 暗色模式与强调色
- 网格布局
- 大字体设计
- 微交互
- 玻璃态效果（渐变）
- 新粗野主义（兴起）
- 可变字体
- 3D元素和深度

输出

趋势报告应告知：

美学方向选择
调色板选择
字体设计决策
布局结构
应避免什么（过时模式）