Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From frontend-design-pro
Creates visual moodboards from design inspiration sources like screenshots and websites, extracting colors, typography, UI patterns, and mood keywords. Iteratively refines before implementation.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design-pro:moodboard-creatorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create and refine visual moodboards that synthesize design inspiration into a cohesive direction.
Finds aesthetic references, interaction examples, and visual inspiration for design projects. Use when the team needs fresh design direction beyond competitive research.
Generates complete visual design systems including style guides and AI assets through phased workflow: discovery, synthesis, documentation, asset generation, assembly. Activates on design system, style guide, or color palette mentions.
Guides exploration of visual design direction through conversation, producing style brief with CSS framework and component library configurations for colors, typography, spacing, and animations.
Share bugs, ideas, or general feedback.
Create and refine visual moodboards that synthesize design inspiration into a cohesive direction.
Before jumping to code, create a moodboard that:
Collect inspiration from:
For each source, note:
From collected sources, extract:
Colors
Typography
UI Patterns
Mood/Atmosphere
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 it] |
### Color Direction
Primary: #[hex] - [color name] Secondary: #[hex] - [color name] Accent: #[hex] - [color name] Background: #[hex] - [color name] Text: #[hex] - [color name]
### Typography Direction
- **Headlines**: [Font/style] - [weight, size notes]
- **Body**: [Font/style] - [readability notes]
- **Accents**: [Any special type treatments]
### UI Patterns to Incorporate
1. **[Pattern Name]**: [Description of how to use it]
2. **[Pattern Name]**: [Description of how to use it]
3. **[Pattern Name]**: [Description of how to use it]
### Layout Approach
- Grid system: [e.g., 12-column, bento, asymmetric]
- Spacing philosophy: [tight, airy, mixed]
- Section structure: [full-width, contained, alternating]
### Mood Keywords
[Keyword 1] | [Keyword 2] | [Keyword 3] | [Keyword 4]
### Visual References
[Descriptions of key screenshots/references]
### What to Avoid
- [Anti-pattern from inspiration that doesn't fit]
- [Style that would clash]
Present moodboard to user and ask:
Based on feedback:
Continue until user approves.
When approved, create final moodboard summary:
## FINAL Moodboard - [Project Name]
### Approved Direction
[Summary of the design direction]
### Color Palette (Final)
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #xxx | Buttons, links, accents |
| Secondary | #xxx | Hover states, icons |
| Background | #xxx | Page background |
| Surface | #xxx | Cards, modals |
| Text Primary | #xxx | Headings, body |
| Text Secondary | #xxx | Captions, muted |
### Typography (Final)
- Headlines: [Font Name] - [weight]
- Body: [Font Name] - [weight]
- Monospace: [Font Name] (if needed)
### Key Patterns
1. [Pattern with implementation notes]
2. [Pattern with implementation notes]
### Ready for Implementation
[Checkbox] Colors defined
[Checkbox] Fonts selected
[Checkbox] Layout approach set
[Checkbox] User approved
If no visual sources available:
Final moodboard should directly inform: