# Generate Custom Kendo Themes with AI

ThemeBuilder includes an AI-powered theme generation feature that helps you create custom Kendo themes from natural-language prompts. You can use generative AI to quickly generate a starting theme and then refine it further with the standard ThemeBuilder tools.

## Overview

The AI theme generation feature allows you to:

* **Create themes using natural language** - Describe your vision in plain English
* **Generate cohesive styles instantly** - Create a starting theme in seconds
* **Experiment with different aesthetics** - Try multiple design approaches quickly
* **Maintain design consistency** - Ensure cohesive styling across all components
* **Save development time** - Focus on functionality while AI handles the styling

## Prerequisites

Before using the AI theme generation feature, ensure you have:

* A Kendo project created in ThemeBuilder
* Kendo Theme version **Q2 2025 or later** (required for AI functionality)
* An active internet connection for AI processing

## Step-by-Step Guide

### 1. Access the Generate Feature

1. **Open your project** - Create a new Kendo project or open an existing one
2. **Navigate to the Generate tab** - Click on the **Generate** tab in the main interface

> note The **Generate** functionality is only available for projects based on Kendo Theme version Q2 2025 or later. If you are using an older version, consider upgrading your project.

### 2. Create Your AI Prompt

Choose one of these approaches to define your theme:

#### Option A: Write a Custom Prompt

Enter your instructions in the AI prompt field. Be descriptive about:

* **Color preferences** - "Use warm earth tones with gold accents"
* **Overall mood** - "Create a modern, minimalist design"
* **Specific elements** - "Make buttons rounded with subtle shadows"
* **Industry context** - "Design for a financial dashboard"

#### Option B: Use Predefined Prompt Suggestions

Select from available predefined prompts for common design patterns, or use them as a starting point and then add further customizations.

![Using the "Generate" tab to define a prompt for theme generation](https://www.telerik.com/themebuilder/documentation/assets/266791bba23c3dad19d90376bb56c961/ai-theme-001.png)

### 3. Execute and Preview

1. **Submit your request** - Press **Enter** or click the arrow button
2. **Wait for processing** - The AI will analyze your prompt and generate the theme (this may take a few seconds)
3. **Review the preview** - Check how the generated styles look across different components

### 4. Apply or Refine Your Theme

Once the AI generates your theme, you have several options:

#### Apply the Changes

* Click **Apply Changes** to confirm and implement the new styling
* The theme will be applied to your entire project immediately
* Once the theme is applied, you can fine-tune specific elements using the standard ThemeBuilder tools

#### Make Adjustments

* Modify your prompt and regenerate if the results do not match your vision
* Try different wording or add more specific details to your prompt
* Experiment with multiple variations to find the perfect style

After generating a theme, you can iterate on the results through the AI chat and modify the design system modules, such as color palettes, spacing scales, typography settings, shadows, and border radii.

#### Reset if Needed

* Use the **Reset** button to revert to your previous styles
* Your original theme is preserved until you explicitly apply changes

![Creating custom Kendo styles using generative AI](https://www.telerik.com/themebuilder/documentation/assets/16e1f3e14cf0822ca1fc859392970749/ai-theme-002.png)

## Best Practices for AI Prompts

### Writing Effective Prompts

**Be Specific and Descriptive**

```
❌ "Make it look nice"
✅ "Create a modern dashboard theme with dark blue (#1e3a8a) primary colors, rounded corners, and subtle gradients for a professional financial application"
```

**Include Context**

* Mention your application type (dashboard, e-commerce, blog)
* Specify your target audience (corporate, creative, technical)
* Reference design systems or brands for inspiration

**Use design terminology**

* Color theory terms (complementary, monochromatic, warm/cool)
* Typography concepts (serif, sans-serif, weight, hierarchy)
* Layout principles (grid, spacing, alignment)

### Example Prompts

**Corporate Theme**

```
"Design a professional corporate theme with navy blue primary colors, clean typography, and subtle hover effects suitable for a business dashboard"
```

**Creative Agency Theme**

```
"Create a vibrant, creative theme with bold gradients, modern typography, and playful button animations for a design agency portfolio"
```

**E-commerce Theme**

```
"Design a clean, trustworthy e-commerce theme with green accent colors, clear call-to-action buttons, and professional product showcase styling"
```

**Accessibility-Focused Theme**

```
"Generate a high-contrast theme optimized for accessibility with WCAG AA compliance, clear focus indicators, and readable typography"
```

## Troubleshooting

### Common Issues and Solutions

**AI Generation Not Working**

* Verify you're using Kendo Theme Q2 2025 or later
* Check your internet connection
* Try simplifying your prompt if it's too complex
* Ensure you have unused AI tokens available

**Unexpected Results**

* Be more specific in your prompt description
* Use design terminology the AI can better understand
* Try breaking complex requests into simpler parts

**Performance Considerations**

* Complex prompts may take longer to process
* AI generation requires an active internet connection
* Save your prompts for future reference and reuse

**Theme Not Applied Correctly**

* Some advanced customizations may require manual fine-tuning

## Advanced Tips

### Combining AI with Manual Customization

1. **Start with AI** - Generate a base theme using AI
2. **Fine-tune manually** - Use standard ThemeBuilder tools for precise adjustments
3. **Iterate** - Use AI for major changes, manual tools for details
4. **Document** - Keep track of successful prompts for future projects

### Prompt Optimization

* **Iterate gradually** - Start simple, then add details
* **Reference examples** - Mention well-known design systems or websites
* **Test variations** - Try different phrasings for the same concept

## Benefits and Advantages

### Speed and Efficiency

* Generate comprehensive themes in seconds
* Eliminate hours of manual CSS writing
* Rapid prototyping and experimentation

### Design Quality

* Professional-grade color harmonies and combinations
* Consistent styling across all components
* Modern design principles automatically applied

### Accessibility

* Built-in consideration for accessibility standards
* Proper contrast ratios and focus indicators
* Responsive design principles

### Creativity

* Explore design directions you might not have considered
* Break out of design comfort zones
* Generate inspiration for further customization

AI-powered theme generation helps you create a strong starting point for your Kendo applications while preserving the option to fine-tune the result with ThemeBuilder's standard precision tools.