Moodboard Creator Agent Skill

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

1k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

3248

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/davepoon/buildwithclaude --skill moodboard-creator

The instruction itself

12 sections, as written by the author

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

Step 4: User Review

Present moodboard to user and ask:

Does this direction feel right?
Any colors to adjust?
Typography preferences?
Patterns to add or remove?
Keywords that don't fit?

Step 5: Iterate

Based on feedback:

Update moodboard version number
Adjust elements per feedback
Add new inspirations if needed
Remove rejected elements
Present updated version

Continue until user approves.

Step 6: Finalize

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

Iteration Best Practices

Keep each version documented
Make focused changes (don't overhaul everything)
Explain changes clearly
Show before/after for major shifts
Maximum 3-4 iterations (then synthesize feedback)

Fallback Mode

If no visual sources available:

Ask user to describe desired mood/feel
Reference aesthetic categories from design-wizard
Suggest color palettes from color-curator fallbacks
Use typography pairings from typography-selector fallbacks
Create text-based moodboard from descriptions

Output

Final moodboard should directly inform:

Tailwind config colors
Google Fonts selection
Component styling decisions
Layout structure

Other skills for the same job

different authors, same section of the catalogue

Content Research Writer

by frostant

×10

Assists in writing high-quality content by conducting research, adding citations, improving hooks, iterating on outlines, and providing real-time feedback on each section. Transforms your writing process from solo effort to collaborative partnership.

4k tokens

Lead Research Assistant

by frostant

×8

Identifies high-quality leads for your product or service by analyzing your business, searching for target companies, and providing actionable contact strategies. Perfect for sales, business development, and marketing professionals.

Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.

Efficient database search tool for bioRxiv preprint server. Use this skill when searching for life sciences preprints by keywords, authors, date ranges, or categories, retrieving paper metadata, downloading PDFs, or conducting literature reviews.

Query and analyze scholarly literature using the OpenAlex database. This skill should be used when searching for academic papers, analyzing research trends, finding works by authors or institutions, tracking citations, discovering open access publications, or conducting bibliometric analysis across 240M+ scholarly works. Use for literature searches, research output analysis, citation analysis, and academic database queries.

Access USPTO APIs for patent/trademark searches, examination history (PEDS), assignments, citations, office actions, TSDR, for IP analysis and prior art searches.

Multiagent AI system for scientific research assistance that automates research workflows from data analysis to publication. This skill should be used when generating research ideas from datasets, developing research methodologies, executing computational experiments, performing literature searches, or generating publication-ready papers in LaTeX format. Supports end-to-end research pipelines with customizable agent orchestration.

Automated LLM-driven hypothesis generation and testing on tabular datasets. Use when you want to systematically explore hypotheses about patterns in empirical data (e.g., deception detection, content analysis). Combines literature insights with data-driven hypothesis testing. For manual hypothesis formulation use hypothesis-generation; for creative ideation use scientific-brainstorming.

7k tokens

How to use it

Copy the folder

Take davepoon/moodboard-creator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.