Design Theme Generation Skill banner
ussumant ussumant

Design Theme Generation Skill

Design community

Description

Claude Skill for systematic design theme generation from moodboard analysis. Generate professional, non-generic aesthetics with hex codes, fonts, and spacing.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

Design Theme Generation - Claude Skill

A Claude Skill that systematically transforms visual inspirations into professional design themes through moodboard analysis. Generate complete aesthetic specifications with hex codes, font names, spacing values, and anti-pattern lists.

[![Claude Skills](https://img.shields.io/badge/Claude-Skills-8B5CF6)](https://claude.ai) [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)


🎨 What This Skill Does

Automatically helps you generate professional, non-generic design themes for:

  • Landing pages and marketing sites
  • Design systems for products
  • UI/UX components and screens
  • Color schemes and typography choices
  • Brand aesthetics and visual direction

**The Problem:** AI defaults to generic designs (Inter font, #3B82F6 blue, basic card grids)

**The Solution:** Systematic moodboard analysis → Distinctive, professional aesthetics


⚡ Quick Start

Installation

  1. **Download the skill:**

    # Clone this repository
    git clone https://github.com/yourusername/design-theme-generation.git
    cd design-theme-generation
  2. **Upload to Claude.ai:**

    • Go to claude.aiSettingsSkills
    • Enable Skills if not already enabled
    • Click "+ Upload Skill"
    • Select design-theme-generation.zip
  3. **Verify installation:**

    • You should see "design-theme-generation" in your Skills list
    • Description: "Systematically generate professional design themes..."

First Use

Try this prompt in a new Claude chat:

Design a landing page for my meditation app

Claude will automatically:

  1. ✅ Ask for product context (emotion, audience, anti-patterns)
  2. ✅ Request moodboard examples (3-5 visual inspirations)
  3. ✅ Analyze patterns from your examples
  4. ✅ Generate complete aesthetic prompt with specific tokens
  5. ✅ Be ready to implement the design

📖 Usage Examples

Example 1: Simple Request

Design