moodboard-creator

# 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: ```markdown ## 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 ...