--- name: moodboard-creator description: Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation. allowed-tools: - Read - Write - AskUserQuestion - mcp__claude-in-chrome__computer --- # 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 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: 1. Update moodboard version number 2. Adjust elements per feedback 3. Add new inspirations if needed 4. Remove rejected elements 5. Present updated version Continue until user approves. ### Step 6: Finalize When approved, create final moodboard summary: ```markdown ## 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: 1. Ask user to describe desired mood/feel 2. Reference aesthetic categories from design-wizard 3. Suggest color palettes from color-curator fallbacks 4. Use typography pairings from typography-selector fallbacks 5. Create text-based moodboard from descriptions ## Output Final moodboard should directly inform: - Tailwind config colors - Google Fonts selection - Component styling decisions - Layout structure --- Source attribution: davepoon Original project: https://github.com/davepoon/buildwithclaude/blob/a1103092fa571c032ae3e706433505ce0d6327bc/plugins/frontend-design-pro/skills/moodboard-creator/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2025 davepoon Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: davepoon Original project: https://github.com/davepoon/buildwithclaude/blob/a1103092fa571c032ae3e706433505ce0d6327bc/plugins/frontend-design-pro/skills/moodboard-creator/SKILL.md Attribution basis: Source repository record Fields of work: Design, Marketing Roles: Brand Strategist, Content Marketer, Graphic Designer, Product Designer, UX Designer Specialties: Design Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 6efa862a19d8c20d7c10abdfc6e3daf486d3e8364844b9c3783108f5c9606964