Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, browser-based inspiration analysis, color/typography selection, and WCAG accessibility

Installation

npx claude-plugins install @davepoon/buildwithclaude/frontend-design-pro

Contents

Folders: commands, skills

Files: README.md

Documentation

An advanced frontend design plugin for Claude Code with interactive wizard, trend research, moodboard creation, browser-based inspiration analysis, and color/typography selection.

Features

• 6 Skills for comprehensive design workflow
• 3 Commands for common design tasks
• Browser Integration via claude-in-chrome for live analysis
• Fallback Mode when browser unavailable
• Anti-Pattern Detection to avoid generic “AI slop”
• WCAG Accessibility built into every design

Installation

Add to your Claude Code settings:

{
  "plugins": [
    "https://github.com/davepoon/buildwithclaude/tree/main/plugins/frontend-design-pro"
  ]
}

Skills

trend-researcher

Research latest UI/UX trends from Dribbble and design communities.

Topics covered:

• Trending design patterns
• Color trends
• Typography trends
• Layout patterns
• What to avoid

moodboard-creator

Create visual moodboards from collected inspiration with iterative refinement.

Topics covered:

• Synthesizing research
• Color direction
• Typography direction
• UI patterns
• Mood keywords

design-wizard

Interactive wizard that guides through a complete design process.

Topics covered:

• Discovery questions
• Aesthetic selection
• Color mapping
• Typography pairing
• Code generation
• Self-review

inspiration-analyzer

Analyze websites for design inspiration using browser automation.

Topics covered:

• Color palette extraction
• Typography identification
• Layout patterns
• UI element analysis
• Motion detection

color-curator

Browse and select color palettes from Coolors or curated fallbacks.

Topics covered:

• Coolors integration
• Color psychology
• Palette mapping
• Tailwind config generation
• Accessibility compliance

typography-selector

Browse and select fonts from Google Fonts or curated pairings.

Topics covered:

• Google Fonts integration
• Font pairing strategies
• Type scale
• Performance optimization
• Tailwind config generation

Commands

/frontend-design-pro:design

Full interactive design workflow.

/frontend-design-pro:design

Guides you through:

1. Discovery questions
2. Trend research (optional)
3. Moodboard creation
4. Color selection
5. Typography selection
6. Code generation
7. Quality review

/frontend-design-pro:analyze-site

Quick website analysis for inspiration.

/frontend-design-pro:analyze-site https://linear.app

Extracts:

• Color palette
• Typography
• Layout patterns
• UI elements
• Key takeaways

/frontend-design-pro:review

Review generated designs for quality.

/frontend-design-pro:review ./landing-page.html

Checks:

• Anti-patterns
• Design principles
• Accessibility
• Provides fix recommendations

Directory Structure

frontend-design-pro/
├── .claude-plugin/
│   └── plugin.json
├── skills/
│   ├── trend-researcher/
│   │   └── SKILL.md
│   ├── moodboard-creator/
│   │   └── SKILL.md
│   ├── design-wizard/
│   │   ├── SKILL.md
│   │   └── references/
│   │       ├── design-principles.md
│   │       ├── aesthetics-catalog.md
│   │       ├── anti-patterns.md
│   │       └── accessibility-guidelines.md
│   ├── inspiration-analyzer/
│   │   ├── SKILL.md
│   │   └── references/
│   │       └── extraction-techniques.md
│   ├── color-curator/
│   │   ├── SKILL.md
│   │   └── references/
│   │       └── color-theory.md
│   └── typography-selector/
│       ├── SKILL.md
│       └── references/
│           └── font-pairing.md
├── commands/
│   ├── design.md
│   ├── analyze-site.md
│   └── review.md
└── README.md

Comparison with Official Plugin

Anti-Patterns Detected

The plugin helps you avoid:

• ❌ Hero badges/pills (“New”, “AI-Powered”)
• ❌ Generic fonts (Inter, Roboto, Arial)
• ❌ Purple/blue gradients on white
• ❌ Decorative blob shapes
• ❌ Excessive rounded corners
• ❌ Predictable template layouts
• ❌ Generic tech startup aesthetics

Aesthetic Directions

Choose from 11+ curated aesthetics:

Modern:

• Dark & Premium
• Glassmorphism
• Neobrutalism
• Bento Grid

Retro:

• Brutalist/Editorial
• Y2K/Cyber

Cultural:

• Swiss Typography
• Scandinavian Minimal
• Japanese Zen

Stripped-Down:

• Statement Hero
• Type-Only

Usage Examples

Quick Landing Page

User: Create a landing page for my developer tool
/frontend-design-pro:design

Claude will:

1. Ask about your project and audience
2. Research current design trends

…(truncated)

Included Skills

This plugin includes 5 skill definitions:

color-curator

Browse and select color palettes from Coolors or curated fallbacks. Use to find the perfect color palette for a design project.

tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })

computer({ action: "screenshot", tabId: tabId })

computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

computer({ action: "left_click", coordinate: [x, y], tabId: tabId })

design-wizard

Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Discovery  │ ──▶ │  Research   │ ──▶ │  Moodboard  │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
┌─────────────┐     ┌─────────────┐           ▼
│   Review    │ ◀── │  Generate   │ ◀── ┌─────────────┐
└─────────────┘     └─────────────┘     │ Colors/Type │
                                        └─────────────┘

inspiration-analyzer

Analyze websites for design inspiration, extracting colors, typography, layouts, and patterns. Use when you have specific URLs to analyze for a design project.

// Get or create browser tab
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()

navigate({ url: "https://example.com", tabId: tabId })

// Full page screenshot
computer({ action: "screenshot", tabId: tabId })

// Scroll and capture more
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

// Mobile view
resize_window({ width: 375, height: 812, tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

moodboard-creator

Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.

## Moodboard v1 - [Project Name]

### Inspiration Sources
| Source | Key Takeaway |
|--------|--------------|
| [URL/Name 1] | [What we're taking from it] |
| [URL/Name 2] | [What we're taking from it] |
| [URL/Name 3] | [What we're taking from 

...(truncated)

</details>

### trend-researcher

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

<details>
<summary>View skill definition</summary>

# 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:

### Step 2: Screenshot and Analyze

For each page:
1. Take a screenshot of the current view
2. Scroll down and take additional screenshots (2-3 scrolls)
3. 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 Eleme

...(truncated)

</details>

## Source

[View on GitHub](https://github.com/davepoon/buildwithclaude)