skills.rest
erichowens
erichowensCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vibe-matcher

Translate brand vibes into structured VisualDNA design specifications.

181|30|Updated Nov 16, 2025
Search Tags:#typography#UI/UX#brand identity#visual design#color theory#design psychology#mood board
One-click install
npx skills add https://github.com/erichowens/some_claude_skills --skill vibe-matcher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vibe-matcher
Source: https://github.com/erichowens/some_claude_skills/tree/main/.claude/skills/vibe-matcher
Command: npx skills add https://github.com/erichowens/some_claude_skills --skill vibe-matcher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill bridges the gap between abstract emotional desires ("I want it to feel edgy") and concrete design specifications. It eliminates guesswork by translating subjective "vibes" into actionable visual DNA (colors, typography, layouts, interactions), ensuring your design perfectly matches the intended emotional impact across various domains.

Core Features & Use Cases

  • Domain-Aware Vibe Translation: Interprets emotional descriptors (e.g., "edgy", "trustworthy", "premium") differently based on the specific domain (e.g., portfolio, SaaS, e-commerce).
  • Visual DNA Assembly: Generates comprehensive design specifications including color palettes, typography choices, layout systems, and interaction patterns, complete with rationale.
  • Medium Adaptations: Adjusts visual DNA for different mediums like web, mobile, print, or VR, ensuring consistent emotional impact.
  • Use Case: You want your professional portfolio to feel "edgy but still professional." This Skill can translate that into specific design choices: dark charcoal background with hot pink accents, heavy sans-serif headings, asymmetric layouts, and sharp, quick animations, explaining the psychological impact of each choice.

Quick Start

Translate the vibe "calm and minimal" for a new meditation app, providing specific color, typography, and layout recommendations.

Frequently Asked Questions about vibe-matcher

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

FAQPage Schema
How do I translate a brand mood into visual design specifications?▼

Translate emotional descriptors like 'edgy' or 'trustworthy' into concrete visual design specifications by providing your desired mood and domain. The Skill generates structured design specs including color palettes, typography, layouts, and interactions with psychological rationale for each choice.

Can I adapt visual design specs for different mediums like web, print, and mobile?▼

Yes. The Skill adjusts visual DNA across mediums—web, mobile, print, and VR—ensuring your emotional intent remains consistent while accounting for medium-specific constraints and best practices.

What does a complete visual DNA output include?▼

A complete visual DNA payload contains color palettes, typography selections, layout systems, interaction patterns, mood board references, and detailed rationales explaining the psychological impact of each design decision.

How does this approach differ from manual design mood boarding?▼

This Skill bridges subjective emotional language and actionable specifications automatically, eliminating guesswork. It provides domain-aware interpretations where the same mood descriptor ('premium') translates differently for a portfolio versus a SaaS product.

What domains and use cases does vibe-based design work for?▼

Vibe-based design applies to branding, web, print, and marketing campaigns where you need to translate abstract emotional desires into visual parameters. It works across portfolios, SaaS, e-commerce, and any context requiring mood-aligned design.

Related Skills

Explore More Design & Creative Skills→
curiositechcuriositech
181

vibe-matcher

Translate emotional vibes into color palettes, typography, layouts, and interactions.

Official
Advanced
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced
MartinoPoloMartinoPolo

gk-design-brief

Creates Grovekeeper UI component briefs and triggers /gk-mockup for visuals.

Community
Intermediate