Mood Board Builder

Use to compile visual inspiration, color palettes, and typography references for creative concepts.

Published by @gtmagents·from gtmagents/gtm-agents·0 agent reads / 30d·0 saves·

Mood Board Builder Skill

When to Use

  • Early concepting for campaigns, product launches, or rebrands.
  • Presenting creative direction options to stakeholders.
  • Aligning distributed teams/agencies on look and feel.

Framework

  1. Inspiration Sourcing – collect references from brand archives, industry examples, and trend boards.
  2. Palette Definition – propose color, typography, texture, and motion cues.
  3. Layout Assembly – organize visuals into narrative sections (story, audience, execution).
  4. Annotation Layer – add notes on why each reference matters, usage guidelines, and accessibility considerations.
  5. Feedback Hooks – include prompts for stakeholders to vote/comment.

Templates

  • Figma/Canva board layout.
  • PDF deck template with sections (vision, palette, typography, photography).
  • Feedback form with scoring rubrics.

Tips

  • Limit each board to 3–4 cohesive directions to avoid choice overload.
  • Include real campaign copy snippets to ground visuals.
  • Pair with creative-director outputs for swift approval.

More on the bench

SKILL0

Landing

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

marketing-growth-copy+2
1
SKILL0

Toss Style Design System Rules

Toss-style UI design rules for disciplined spacing, typography, grayscale hierarchy, restrained color, cards, metrics, dark mode, and accessibility

design+1
0
SKILL0

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

ux-product-design+2
0