skills.rest
davepoon
davepoonCOMMUNITY
Explore all skills by this author →
Website𝕏@davepoonGitHub

moodboard-creator

Creates structured design moodboards from collected inspiration with iterative user refinement.

3.4k|487|Updated Jul 25, 2025
Search Tags:#inspiration#ui patterns#moodboard#design direction#Typography#Color palette#Frontend design
One-click install
npx skills add https://github.com/davepoon/buildwithclaude --skill moodboard-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moodboard-creator
Source: https://github.com/davepoon/buildwithclaude/tree/main/plugins/frontend-design-pro/skills/moodboard-creator
Command: npx skills add https://github.com/davepoon/buildwithclaude --skill moodboard-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design projects often jump straight into code without a clear visual direction, leading to inconsistent colors, typography, and layouts. This Skill consolidates scattered inspiration sources into a single approved moodboard before implementation begins.

Core Features & Use Cases

  • Inspiration Synthesis: Gathers screenshots, analyzed websites, and user-provided URLs, then extracts colors, typography, UI patterns, and mood keywords into a structured document.
  • Iterative Refinement: Presents versioned moodboards for user feedback, adjusting colors, fonts, and patterns across up to 3-4 iterations until approval.
  • Implementation-Ready Output: Produces a final moodboard with hex color palettes, font selections, and layout approaches that map directly to Tailwind config and component styling.
  • Use Case: After researching competitor websites for a landing page redesign, use this Skill to distill the findings into an approved color palette, typography pairing, and layout direction before writing any CSS.

Quick Start

Create a moodboard from my collected design inspiration and refine it with me until we agree on the final color palette and typography direction.

Frequently Asked Questions about moodboard-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design moodboard before coding a website?▼

Gather inspiration sources such as screenshots, analyzed websites, or Dribbble shots, then extract colors, typography, and UI patterns into a structured moodboard document. Review it with stakeholders and iterate until the direction is approved before implementation.

How to extract a color palette from website inspiration?▼

Identify primary, secondary, accent, background, and text colors from each inspiration source and record their hex codes. Consolidate them into a final palette table mapping each color to its usage role such as buttons, cards, or headings.

Can I create a moodboard without visual references or screenshots?▼

Yes, a fallback mode supports text-based moodboards. Describe the desired mood and feel, then use suggested aesthetic categories, color palette fallbacks, and typography pairings to build the direction from descriptions alone.

How many moodboard iterations should I expect before approval?▼

Plan for a maximum of three to four iterations. Each version should make focused changes rather than full overhauls, with clear explanations and before/after comparisons for major shifts.

What are the limitations of moodboard-based design direction?▼

A moodboard defines direction, not final components. It requires downstream work to translate colors into Tailwind config, select actual Google Fonts, and implement layout patterns in code.

Related Skills

Explore More Design & Creative Skills→
NaawaalNaawaal

design-intelligence

Discover UI/UX inspiration from Mobbin, Dribbble, Behance, UI Sources, and Awwwards.

Community
Basic
anilcancakiranilcancakir
5

tailwindcss-design

Translate Refactoring UI principles into Tailwind utility classes for UI design.

Community
Intermediate
ComposioHQComposioHQ
72.1k

theme-factory

Apply preset color and font themes to slides, documents, and reports.

Official
Basic
charleshall888charleshall888
1

ui-brief

Generate DESIGN.md and Tailwind v4 theme tokens for new projects.

Community
Advanced