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-proThis skill is limited to using the following tools:
Create and refine visual moodboards that synthesize design inspiration into a cohesive direction.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.
Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.
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: