Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.
Creates visual moodboards from design inspiration with iterative refinement and user feedback.
/plugin marketplace add davepoon/buildwithclaude/plugin install frontend-design-pro@buildwithclaudeThis skill is limited to using the following tools:
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:
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.