Skill

Trend Researcher

Researches latest UI/UX trends from Dribbble by screenshotting popular web and mobile designs, analyzing colors, typography, layouts, and generating structured reports. Use when starting design projects.

design

Install

npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-pro

Tool Access

This skill is limited to using the following tools:

mcp__claude-in-chrome__tabs_context_mcpmcp__claude-in-chrome__tabs_create_mcpmcp__claude-in-chrome__navigatemcp__claude-in-chrome__computermcp__claude-in-chrome__read_pagemcp__claude-in-chrome__get_page_text

Preview

Research current UI/UX design trends from Dribbble and other design communities to inform design decisions.

SKILL.md

Similar Skills

payload

11 files

Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.

payload

41.6k

data-engineer

Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.

antigravity-bundle-data-engineering

32.8k

airflow-dag-patterns

1 file

Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.

antigravity-bundle-data-engineering

32.8k

Stats

Parent Repo Stars2696

Parent Repo Forks300

Last CommitJan 4, 2026

Actions

View Source View Plugin View on GitHub View README

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 sites
https://www.behance.net/galleries/ui-ux - Behance UI/UX
https://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)