Where do you pull trends from?

From Dribbble's popular shots pages and other design communities; if Dribbble is unavailable, use sites like Awwwards, Behance, and siteinspire.

What should a trend report include?

Top visual trends, color trends with hex codes, typography trends, layout patterns, elements to avoid, and a recommended direction, all with referenced examples.

What if browser tools are unavailable?

Use Fallback Mode: note the lack of browser access, ask for screenshots or descriptions, and reference general current trends (dark mode with accents, Bento grids, large typography, micro-interactions, etc.).

Trend Researcher

Scanned

npx machina-cli add skill davepoon/buildwithclaude/trend-researcher --openclaw

Files (1)

SKILL.md

3.8 KB

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)

Source

git clone https://github.com/davepoon/buildwithclaude/blob/main/plugins/frontend-design-pro/skills/trend-researcher/SKILL.md

View on GitHub

Overview

Trend Researcher scans Dribbble and design communities to identify current visual trends, color palettes, typography, and layouts. It helps inform starting design projects and avoid outdated styles.

How This Skill Works

Browse Dribbble shots (popular web and mobile), take screenshots, and analyze color schemes, typography, and layout patterns. Compile the insights into a structured UI/UX Trend Report with sections like Top Visual Trends, Color Trends, Typography Trends, Layout Patterns, and a Recommended Direction.

When to Use It

Starting a new design project to anchor direction
Refreshing a product’s visual language to stay current
Kick-off for a design system or style guide
Preparing a client-facing trend brief
During ideation to spark color and typography decisions

Quick Start

Step 1: Navigate to https://dribbble.com/shots/popular/web-design and https://dribbble.com/shots/popular/mobile
Step 2: Screenshot the current view (2-3 scrolls) and note dominant colors, typography, and layouts
Step 3: Compile a UI/UX Trend Report with sections: Top Visual Trends, Color Trends, Typography Trends, Layout Patterns, and Recommended Direction

Best Practices

Base conclusions on actual patterns seen across multiple sources (Dribbble plus alternatives)
Capture exact colors with hex codes and note light/dark mode usage
Document date and source list for traceability
Differentiate timeless design elements from fad-driven patterns
Provide concrete examples and where they were observed

Example Use Cases

Bento-grid and card-based layouts paired with bold typography on recent Dribbble shots
Glassmorphism depth with semi-transparent panels in contemporary UI shots
Dark mode setups featuring vivid accent colors across UI elements
Use of 3D elements and depth cues in hero sections and product previews
Subtle micro-interactions and motion cues visible in navigation and buttons

Frequently Asked Questions

Add this skill to your agents