Agent Skills
› davepoon/buildwithclaude
› trend-researcher
trend-researcher
GitHub通过抓取 Dribbble 等设计社区的最新作品，分析当前 UI/UX 在色彩、排版、布局及组件上的视觉趋势，生成结构化报告以指导设计决策并避免过时风格。
Trigger Scenarios
开始新的设计项目前
需要了解最新视觉趋势时
探索颜色搭配方案时
研究界面布局模式时
Install
npx skills add davepoon/buildwithclaude --skill trend-researcher -g -y
SKILL.md
Frontmatter
{
"name": "trend-researcher",
"description": "Research latest UI\/UX trends from Dribbble and design communities. Use when starting a design project to understand current visual trends, color palettes, and layout patterns.",
"allowed-tools": [
"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"
]
}
Trend Researcher
Research current UI/UX design trends from Dribbble and other design communities to inform design decisions.
Purpose
Before designing, understand what's trending in the design world. This skill helps:
- Identify popular visual styles and aesthetics
- Discover color palette trends
- Learn typography approaches
- See layout patterns in use
- Avoid outdated or overused styles
Workflow
Step 1: Navigate to Dribbble
Visit the popular shots pages:
https://dribbble.com/shots/popular/web-design
https://dribbble.com/shots/popular/mobile
Step 2: Screenshot and Analyze
For each page:
- Take a screenshot of the current view
- Scroll down and take additional screenshots (2-3 scrolls)
- Analyze the visible designs for:
- Dominant color schemes
- Typography styles (serif vs sans-serif, weight, spacing)
- Layout patterns (bento, cards, full-bleed, etc.)
- Animation/motion indicators
- UI element styles (buttons, cards, navigation)
Step 3: Identify Patterns
Look for recurring themes:
Color Trends
- What primary colors appear most?
- Light vs dark mode preference?
- Gradient usage patterns?
- Accent color choices?
Typography Trends
- Display fonts: bold, condensed, decorative?
- Body fonts: clean sans, readable serif?
- Weight trends: heavy, light, mixed?
- Spacing: tight, loose, dramatic?
Layout Trends
- Grid systems in use
- White space usage
- Card vs full-section layouts
- Navigation patterns
UI Element Trends
- Button styles (rounded, sharp, outlined)
- Card designs (shadows, borders, flat)
- Icon styles (outlined, filled, animated)
Step 4: Generate Report
Create a structured trend report:
## UI/UX Trend Report - [Date]
### Top Visual Trends
1. **[Trend Name]**: [Description with specific examples seen]
2. **[Trend Name]**: [Description with specific examples seen]
3. **[Trend Name]**: [Description with specific examples seen]
### Color Trends
- **Primary colors trending**: [hex codes observed]
- **Background approaches**: [light/dark/gradient patterns]
- **Accent colors**: [popular accent choices]
### Typography Trends
- **Heading styles**: [observations about display fonts]
- **Body text**: [readable font choices]
- **Font weight trends**: [heavy/light/mixed]
### Layout Patterns
1. **[Pattern]**: [description + where seen]
2. **[Pattern]**: [description + where seen]
### Elements to Avoid
- [Outdated pattern 1]
- [Overused style 1]
### Recommended Direction
Based on this analysis, suggest: [aesthetic direction that feels fresh]
Alternative Sources
If Dribbble is unavailable, check:
https://www.awwwards.com/websites/- Award-winning siteshttps://www.behance.net/galleries/ui-ux- Behance UI/UXhttps://www.siteinspire.com/- Curated site inspiration
Fallback Mode
If browser tools are unavailable:
- Note that trend research requires browser access
- Suggest user share screenshots or describe sites they like
- Reference general current trends from knowledge:
- Dark mode with accent colors
- Bento grid layouts
- Large typography
- Micro-interactions
- Glassmorphism (fading)
- Neobrutalism (rising)
- Variable fonts
- 3D elements and depth
Output
The trend report should inform:
- Aesthetic direction selection
- Color palette choices
- Typography decisions
- Layout structure
- What to avoid (outdated patterns)
Version History
- 502fc01 Current 2026-07-05 15:11
