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:
- Discovery questions
- Trend research (optional)
- Moodboard creation
- Color selection
- Typography selection
- Code generation
- 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
| Feature | Official | frontend-design-pro |
|---|---|---|
| Skills | 1 | 6 |
| Commands | 0 | 3 |
| Interactive wizard | ❌ | ✅ |
| Trend research | ❌ | ✅ Dribbble |
| Moodboard creation | ❌ | ✅ |
| Website analysis | ❌ | ✅ Browser |
| Color selection | ❌ | ✅ Coolors |
| Font selection | ❌ | ✅ Google Fonts |
| Self-review | ❌ | ✅ |
| Fallback mode | N/A | ✅ |
| Accessibility guide | Brief | ✅ Full WCAG |
| Anti-patterns | Brief list | ✅ Detailed + code |
| Aesthetic catalog | Mentioned | ✅ 11 styles + code |
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:
- Ask about your project and audience
- Research current design trends
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.
View skill definition
Color Curator
Browse, select, and apply color palettes for frontend designs.
Purpose
This skill helps select the perfect color palette by:
- Browsing trending palettes on Coolors
- Presenting options to the user
- Extracting hex codes
- Mapping to Tailwind config
- Providing curated fallbacks when browser unavailable
Browser Workflow
Step 1: Navigate to Coolors
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })
Step 2: Screenshot Palettes
Take screenshots of trending palettes:
computer({ action: "screenshot", tabId: tabId })
Present to user: “Here are the trending palettes. Which one catches your eye?”
Step 3: Browse More
If user wants more options:
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
Step 4: Select Palette
When user chooses a palette, click to view details:
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
Step 5: Extract Colors
From the palette detail view, extract:
- All 5 hex codes
- Color names if available
- Relative positions (light to dark)
Step 6: Map to Design
Based on user’s background style preference:
| Background Style | Mapping |
|---|---|
| Pure white | bg: #ffffff, text: darkest color |
| Off-white/warm | bg: #faf8f5, text: darkest |
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.
View skill definition
Design Wizard
An interactive wizard that guides you through creating distinctive, production-ready frontend designs.
Purpose
This skill orchestrates the complete design process:
- Discovery - Understanding what to build
- Research - Analyzing trends and inspiration
- Direction - Selecting aesthetic approach
- Colors - Choosing color palette
- Typography - Selecting fonts
- Implementation - Generating code
- Review - Validating quality
Process Overview
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Discovery │ ──▶ │ Research │ ──▶ │ Moodboard │
└─────────────┘ └─────────────┘ └─────────────┘
│
┌─────────────┐ ┌─────────────┐ ▼
│ Review │ ◀── │ Generate │ ◀── ┌─────────────┐
└─────────────┘ └─────────────┘ │ Colors/Type │
└─────────────┘
Step 1: Discovery Questions
Ask the user about their project:
Question 1: What are you building?
- Landing page
- Dashboard
- Blog/Content site
- E-commerce
- Portfolio
- SaaS application
- Mobile app UI
- Other (describe)
Question 2: Project context
- Personal project
- Startup/new product
- Established brand
- Client work
- Redesign of existing
Question 3: Target audience
- Developers/technical
- Business professionals
- Creative/designers
- General consumers
- Young/Gen-Z
- Luxury/premium market
Question 4: Background style preference
- Pure white (#
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.
View skill definition
Inspiration Analyzer
Analyze websites to extract design inspiration including colors, typography, layouts, and UI patterns.
Purpose
When a user provides inspiration URLs, this skill:
- Visits each site using browser tools
- Takes screenshots for visual analysis
- Extracts specific design elements
- Creates structured inspiration report
- Identifies replicable patterns
Workflow
Step 1: Get Browser Context
// Get or create browser tab
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
Step 2: Navigate to URL
navigate({ url: "https://example.com", tabId: tabId })
Step 3: Capture Screenshots
Take multiple screenshots to capture the full experience:
- Hero/Above-fold: Initial viewport
- Scrolled sections: Scroll and capture
- Interactive states: Hover on navigation, buttons
- Mobile view: Resize to mobile width
// 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 })
Step 4: Analyze Elements
From screenshots and page content, extract:
Colors
- Primary color: Main brand color
- Secondary colors: Supporting palette
- Background color: Page and section backgrounds
moodboard-creator
Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.
View skill definition
Moodboard Creator
Create and refine visual moodboards that synthesize design inspiration into a cohesive direction.
Purpose
Before jumping to code, create a moodboard that:
- Consolidates inspiration into clear direction
- Extracts colors, typography, and patterns
- Allows iterative refinement with user feedback
- Establishes design language before implementation
Workflow
Step 1: Gather Sources
Collect inspiration from:
- Trend research screenshots
- Analyzed websites
- User-provided URLs or images
- Dribbble/Behance shots
For each source, note:
- URL or source
- Key visual elements to extract
- Why it’s relevant
Step 2: Extract Elements
From collected sources, extract:
Colors
- Primary colors (1-2)
- Secondary/accent colors (1-2)
- Background colors
- Text colors
- Note hex codes
Typography
- Headline font style (name if identifiable)
- Body font style
- Weight and size observations
- Spacing/tracking notes
UI Patterns
- Navigation styles
- Card treatments
- Button designs
- Section layouts
- Decorative elements
Mood/Atmosphere
- Keywords describing the feel
- Emotional response
- Brand personality traits
Step 3: Create Moodboard Document
Generate a structured moodboard:
## 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
</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:
https://dribbble.com/shots/popular/web-design https://dribbble.com/shots/popular/mobile
### 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
</details>
## Source
[View on GitHub](https://github.com/davepoon/buildwithclaude)