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.
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
-
Download the skill:
# Clone this repository git clone https://github.com/yourusername/design-theme-generation.git cd design-theme-generation
-
Upload to Claude.ai:
- Go to claude.ai → Settings → Skills
- Enable Skills if not already enabled
- Click "+ Upload Skill"
- Select
design-theme-generation.zip
-
Verify installation:
- You should see "design-theme-generation" in your Skills list
- Description: "Systematically generate professional design themes..."
Try this prompt in a new Claude chat:
Design a landing page for my meditation app
Claude will automatically:
- ✅ Ask for product context (emotion, audience, anti-patterns)
- ✅ Request moodboard examples (3-5 visual inspirations)
- ✅ Analyze patterns from your examples
- ✅ Generate complete aesthetic prompt with specific tokens
- ✅ Be ready to implement the design
Design a landing page for my SaaS product
Result: Claude guides you through the 4-phase workflow, asking clarifying questions.
Design a landing page for my fintech app that helps people track investments.
Target audience is millennials who want simple, trustworthy finance tools.
Should feel modern and confident, not like a traditional bank.
Result: Claude suggests clean minimal style with trust-building colors and asks for moodboard examples.
Create a design theme for my meditation app.
I like these designs:
- calm.com (serene, spacious feel)
- headspace.com (friendly, approachable)
- notion.so (clean, minimal)
Target audience: Busy professionals seeking mindfulness, ages 25-40.
Avoid: Generic wellness purple, stock meditation photos, cluttered layouts.
Result: Claude generates a complete aesthetic prompt with specific hex codes, fonts, spacing values, and anti-patterns.
What colors should I use for a fintech app?
Result: Quick reference with reasoning: Indigo #6366F1 (trust) + Emerald #10B981 (growth)
The skill automatically activates when Claude detects design-related requests:
Trigger phrases:
- "Design a [product] landing page"
- "Create a theme for [product]"
- "What colors/fonts should I use?"
- "This looks too generic"
- "Create a design system"
Phase 1: Gather Context
└─ Product details, emotion, audience, anti-patterns
Phase 2: Analyze Moodboard
└─ Extract colors, typography, spacing, visual style
Phase 3: Generate Aesthetic Prompt
└─ Complete specification with hex codes, fonts, spacing, AVOID list
Phase 4: Implement Design
└─ Use prompt to create actual design
design-theme-generation/
├── SKILL.md # Main skill file (4-phase workflow)
└── resources/
├── prompt-templates.md # 8 pre-built templates
├── quick-reference.md # Fast lookup tables
└── reference-library.md # Design movements encyclopedia
SKILL.md - Main skill logic:
- Complete 4-phase workflow
- Quick reference tables
- Full example (meditation app)
- Success criteria checklist
prompt-templates.md - 8 ready-to-use templates:
- Modern SaaS (B2B products)
- Developer Tool (Dark mode)
- Meditation/Wellness
- Playful Consumer
- Fintech/Banking
- E-commerce
- Pet Care/Health
- Editorial/Blog
quick-reference.md - Fast decision tables:
- Product type → Aesthetic mapping
- Emotion → Color psychology
- Typography pairing guide
- Spacing/motion reference
reference-library.md - Deep knowledge:
- 10 design movements explained
- Color psychology deep dive
- Typography detailed rules
- Anti-pattern checklist
✅ Auto-activates for design requests (no manual invocation) ✅ Systematic workflow (not random AI responses) ✅ Specific outputs (hex codes, font names, exact spacing) ✅ Pre-built templates for 8 product types ✅ Anti-pattern lists prevent generic designs ✅ Moodboard analysis extracts design DNA ✅ Works everywhere (claude.ai, API, Claude Code)
✅ DO:
- Provide 3-7 examples (sweet spot)
- Mix real products + aspirational concepts
- Choose cohesive style (shared visual DNA)
- Include product context
❌ DON'T:
- Mix conflicting aesthetics (brutalism + wabi-sabi)
- Provide only competitor sites
- Use only Dribbble concepts without real products
- Skip the anti-patterns list
- Be specific about emotion: "Calm and grounded" vs "modern"
- Mention anti-patterns: "Avoid Duolingo green and streak anxiety"
- Iterate on tokens: "Can we make the yellow warmer?"
- Save successful prompts: Reuse across screens for consistency
Full documentation system available in this repository:
- INSTALLATION.md - Detailed setup guide
- framework.md - Deep dive on methodology
- moodboard-guide.md - How to analyze examples
- theme-examples.md - 3 complete worked examples
- quick-start-cheat-sheet.md - 1-page reference
- tools/moodboard-analyzer.html - Interactive tool
Use the Modern SaaS template to design a dashboard for my project management tool
Take the generated aesthetic and make the primary color warmer,
more towards coral
Create a settings page using the existing aesthetic prompt
we generated earlier
Issue: Claude isn't using the skill for design requests
Solutions:
- Verify Skills are enabled in claude.ai Settings
- Check "design-theme-generation" appears in Skills list
- Try explicit trigger: "Use the design theme generation skill to..."
- Start a new chat (skills may not activate mid-conversation)
Issue: ZIP file won't upload
Solutions:
- Verify file is
design-theme-generation.zip - Check YAML frontmatter only has
nameanddescription - Re-download from releases if corrupted
- Contact Claude support if persistent
Issue: Design doesn't match expectations
Solutions:
- Provide more specific moodboard (3-7 examples optimal)
- Be explicit about anti-patterns
- Describe desired emotion in detail
- Reference quick-reference tables for guidance
Contributions welcome! Here's how:
- Fork this repository
- Create a feature branch (
git checkout -b feature/new-template) - Add your improvements (new templates, movements, examples)
- Commit with clear messages
- Push and create a Pull Request
Areas to contribute:
- New design movement templates
- Additional worked examples
- Improved reference tables
- Bug fixes and clarifications
MIT License - See LICENSE file for details
Built with: Claude Code For use with: Claude Skills (claude.ai)
Special thanks to the Anthropic team for the Claude Skills platform.
- Claude Skills Documentation: support.claude.com
- Official Skills Repository: github.com/anthropics/skills
- Claude.ai: claude.ai
Current Version: 1.0.0 Last Updated: October 23, 2025 Compatibility: Claude.ai Pro/Team/Enterprise with Skills enabled
If this skill helps you create better designs, give it a star ⭐ and share it with others!
Happy designing! 🎨✨